Onboard App UI Part 2 - Figma to React Native

welcome back everyone hope you're doing well this is made with matt and today we're going to be building out this onboard screen that we designed in figma in one of the previous videos so this screen is really good to add to any app where you do need an onboard screen and what we'll add in as an extra is when you click this done button you can never get back to it unless you reload the app so it kind of mimics a real app so let's jump right into it to get the link to this figma file check the description below and i've pasted it down there i've included it and you can go in and there's going to be a button at the top to export the figma file you could download it as a figma file and then upload it to your own personal account to be able to play around with it like i can do here right off the bat here i've already cleared out appjs when you create a new react native app usually there's a lot of stuff that comes with it that we don't actually need so i cleared all that out and all i have is welcome back first thing we're going to do is create a new folder called components and within it we'll have a file called onboard.js now in here we'll set up the onboard screen so let's do const on board and for now we'll just have a view with a text component that says on board now we can't forget to import everything from react import react from react and we're also going to need to import a view and text from react native once that's done jump to the bottom and export on board cool could save that and we're still not going to see it because we have to go back to app.js and actually import that so import onboard from components on board and now in here we'll replace it all with onboard and there you have it you can see it all the way at the top now to set up this actual slider here where you can jump through screens what we'll look up is react native app intro slider now this is an open source github package for anyone to use and it's extremely easy to use so let's scroll down here good look at the examples and this is exactly what we need so that's what's nice about react development or development in general there's a lot of things that are already pre-made out there for you so let's scroll to the bottom and let's get the basic here and we'll just copy some of these things so that we can use it so let's copy this and paste it in our return statement and we're also going to copy [Music] the data cool and one last thing can't forget to actually import the component and we'll save this we'll get some errors but it's all good one thing you need to remember is if you haven't installed this yet make sure to do so so go npm just like that and it's going to download all right so we've got all this here in the actual app component we need to define these functions so let's go const render item and this if we go back to the documentation is going to take in an item so let's do it like that and for now let's just put actually let's just put a text i need to return it text and this is on board screen okay and we're also going to need the key extractor const key extractor does this one take in an item as well yes it does so let's do that item and it returns item.title so we don't even need this item dot title perfect now let's change these this one's going to be key extractor and this one's going to be render item so let's try that out still get an error because unable to resolve these so let's just comment them out for now because we just want to test that it actually works so can't find variable view fix that up status bar [Music] import that as well and now i think we're able to see it yep we've got it up there on board screen onboard screen and you can see the little buttons here so already some good progress so the actual package that we implemented is working properly now we're just gonna have to add our design to it so to do that let's change the titles and all the data that's used here so first off let's change this title to what we need it as which is save your time by tracking your studies and i'll just keep doing this for each one so i've got all the data here you can look at the title text and image and the image i got from assets images which is here assets images and it's what we did in part one of the video so check that video out it's gonna be in the description if you missed that so now we still see the same screen because we actually haven't connected any of the data to our scroll screens so how we'll do that is we'll go to the render item over here and we'll remove what we already have so we're already passing in the item which means that now we can access the title text and image for each screen so let's just set up a view here for now and let's do image and the source of the image is going to be the item dot image which comes from up here and we'll set up the styles right after but for now let's just do that and another view to hold the two text components there so let's do that text this one's going to be item title and the next one is going to be item text so let's save that and see how it looks can't find image not a problem let's just import it there we go so now we see the three different screens without style which is exactly what we wanted now comes the actual fun part where we get to style it make it look good so let's go up here and import stylesheet good and down here let's get styles equal to stylesheet dot create and for now we'll just leave it empty save that all right so jump back to render item which renders these items and let's add our style to it so style 2 styles we'll call this one slide the image will give it a style as well this one's going to be image the text down i need to close that the text down here is going to have a style of title and this one's going to have a style of text so let's copy all of those and paste them in our style sheet now let's i'm holding down the option key by the way to make that happen whoops oh no let me redo that so i hold down the option key for multiple selects like that which is pretty cool all right so we're gonna start with slide which is basically the entire view that you see here and right away we'll give it a flex of one we're going to align the items in the center and justify the content in the center so that everything's centered good and now we'll make sure that the background color is white so we'll do colors and we want to we don't want the capital c for colors because that's from react native we don't want our own colors so we can import that now import colors from assets um colors and colors good save that and what's the problem here right so colors dot white do we have that yeah let's go see colors we don't have white so let me add that in awesome now let's keep going down with the styles and by the way i just noticed that we're in app.js instead of onboard js that's my bad we'll fix it up later because it doesn't really matter and right now it's working so let's just go with it so for the image we'll give it a vertical margin of 60 to get some nice spacing going to make this look a bit more centered and we'll jump to the title give it a font size of 24 which i believe is what we have in here so we have 24 open sans bold and black so in our colors let's add black so that we have it oops okay jump back here so font size is 24 the color is black we also want the text to be centered which is always key the font family to be open sans bold as we just saw let's save that and see what it looks like cool and now we need to add some margin horizontal and let's try with 50. what do we need let's go with 60 because i think that's yeah it's closer to what we have there amazing now we go to text this is open sans semi bold and 14 and this is gray so i'm just going to copy this paste it down below so 14 we said open sans semi bold and let's save that nice and we also need gray how does that look looks pretty good and we just need some margin between the two so let's add that at the bottom margin top and we'll put 20. great so there you have it that's the very very basic slider but now we want to add things like these colorful circles and the next and previous buttons and at the end the done button so if we go to the actual documentation then you could see that there's things we could do like render next button show done button render previous button render done button to actually edit all these buttons the way we want it so if we go back to our code we'll just set up functions to be able to do that and we could throw them in here so basically you could have render done button and we'll call that the exact same thing render done button we could have render next button which we'll call render next button as well and render previous button which we're also going to call render previous button now let's copy all of these paste them in up here and make these some actual functions that we can use cool so in the done button up here we'll return a view and within it we'll have a text that says done okay if we copy that we'll paste it into the next button and into the previous button and for the next button we'll just say next previous will say breathe so let's save that and cool we already see it there click next click next and we have done and we don't have the previous button and that's because i missed a step here which is show previous button by default it's not already showed but now we have it so let's add some style to them and we'll make the same style for the next and done button because that's what we have here and it's just easier that way so let's call this one styles dot right right text wrapper and then the actual text is going to be styles.red text instead of wrapper and we can copy that for the next button which is going to be exactly the same and then for the previous button we'll have the same thing but instead of right we'll have left so left text wrapper and then left text we'll copy all of these paste them down below and start fixing up the style so first off the right text wrapper as you can see by default it's a bit elevated which i don't like so a quick fix for that is we add a bit of width and height to the actual wrapper so we could do width of 40 height of 40. and i'll just set a background to it just so you see what i'm talking about right now let's do colors.gray so you could see now that this width and height spans basically the like if you center it in the rectangle it's going to be centered with these dots so that's exactly what we want so width height we want to give it a bit of margin on the right how much do we have here 30 let's try with 20. give it 20 and we want everything to be centered justify content center align items center nice and just in case text line that doesn't actually do anything we could do that now the actual text we need to edit the color this one's going to be blue and we want to edit the font family to be open sans semi bold along with a font size of 14. save that just want to double check we got the right thing open silent semi bowl 14 blue amazing now the left text is going to be very similar so i'm just going to copy it the only thing that actually changes is instead of margin right it's margin left save that there it is and the actual text is going to be the same so this is a bit of repeated code we could fix it but for now it's all good there it is all right guys so it's looking good we've got the basic implementation down now we just need to change these little bubbles at the bottom it's kind of like the navigation so first thing i'm going to do is look at these colors so we know that the faded one is the same as this color at 50 or it's this color in hex so i'd rather just take the actual hex color so i'll paste it in here as blue faded save it and jump back here and now we'll do dot style which is going to be equal to styles dot dot style and we'll also have active dot style so the first one which is just dot style is going to be for the regular dots when uh they're not actually active and then obviously the active one is when it's going to be active so we'll add a background color so when it's not active we want it to be blue faded right and then when it is active we're going to want colors dot blue save it and now we could see we have the exact same thing that we have here so this next part is completely optional basically what we're going to do is when we get to the end here and you click done we're going to redirect to a new page instead of being stuck in here so if you're actually implementing this for your app then that's going to be good to use if you were just doing this for fun you don't really need it but it's actually extremely simple first thing we got to do is we'll move everything we have in appjs to onboard js so that's what i should have done at the beginning sorry about that so change the name of the component to onboard the bottom as well save that and we might get an error which is not a problem now i'm going to delete everything in app.js and start from in our app.js what we're going to want to return is the actual onboarding screen so it's going to auto import so you could save that and now we have that on board has already been declared and the errors are coming from colors here that we need to import properly and a bunch of other places so instead of just jumping out or looking in the same directory we actually have to jump out of it that's one quick fix and once we do that we could see it working good as normal again so that's perfect so what we'll add in app right now is we'll have a state so const show onboard and set show onboard this is going to keep track if it's the first time the user opens the app or not so we'll say use state and to begin with it'll be true that we do want to show the onboarding screen so in here let's return empty components like that and what we'll have is we'll say if show on board is true then we'll show the onboarding screen so if we save it you'll see that right now it does the exact same thing but if we go add a new component here a new file and we'll call this one home js and i have some keyboard shortcuts there you could download some extensions to do that let me know if you want it in the link in the comments below so here i'll call this one home and i'll return a view i'll call this one the safe area view with text saying welcome to the home page awesome and we'll save that in app.js bring it in components home now what we can do which is actually really cool is we can have just restructure this so a similar thing here so if not show on board then we want home now to actually connect it to make it work because we see now even if we go click done it doesn't do anything what we'll need is a function to actually handle the onboarding finishing so we'll have const handle onboard finish and in here we'll set show onboard to false and what that's going to do is now it's going to show the home page but to actually make this happen we need to pass it in so add it in like this as a prop and we'll call it handle done so now if we go to onboard js scroll to the bottom and right under data you could write on done which is a built-in function in the component and what we're going to do is we'll call handle done which will set up right here and all it's going to do is it's going to call the function from app.js so first off we need to get it so we'll say props in onboard so that it is passed down as a prop and we can access it so handle done now we'll save that now let's click done and welcome to the home page now you can see i can't go back and i can never get back to the actual onboard screens unless i reload in which case it appears so that's it for this video guys i hope you enjoyed it it's really simple to build out an onboard screen so if ever you need it for your app for a little fun side project or whatever it is it's really really easy to do and straightforward so once again i hope you enjoyed this video in the next video let me know if you guys want this we can set up this done button to make it look a bit prettier otherwise that's the end of this hope you enjoyed it leave a like comment and subscribe and let me know what you want to see next [Music] you

Channel: Made With Matt

Views: 4,738

Keywords: react native, figma, ui, font, adding font to react native, colors to react native, figma to react native, design to react native, design, design to app, set up react native, react native project setup, react native project, react, mobile development, build an app, mobile project, learn react, learn react native, onboard app, figma tutorial, react native tutorial, learn figma, image to react native, image to app, mobile app, react native onboard, react native slider, onboard

Id: A__XR8xNi-g

Length: 23min 12sec (1392 seconds)

Published: Sat Nov 28 2020