Build an Animated Onboarding Flow in React Native | DEVember Day 2

what's up noj developers welcome back to demember a month long marathon of react native and Expo tutorials today is day two of our marathon and the topic of today's video is going to be onboarding screens what we're going to do is we're going to build a onboarding flow based on multiple screens uh because this is the very important feature in any kind of applications uh so yeah I believe that you will you will enjoy it and you will be able to implement it in your application as well so we're going to start with uh designing and rendering a simple onboarding screen with some image title and description then we're going to implement a multi page onboarding flow and the navigation between these pages and also we're going to cover some animations to make our onboarding flow um looking better but before we start uh the the coding process let's let me quickly recap the demember uh the monthlong re native uh tutorials uh Marathon so yeah we started yesterday and we're going to have every single day one tutorial about building mobile applications about building rack native uh applications um all of this is going to be on our YouTube channel so make sure to subscribe we're going to go live every single day at 12:00 p.m. GMT uh so yeah make sure to turn on the notification Bell not to miss that out and if you have ideas make sure to submit them to our idea board from where I'm collecting the features topics that you guys uh want help with so you'll find the link to the idea board in the description below or you can follow this link on the screen um make sure to vote for other ideas that you feel uh that that you find interesting and I will pick the best ones and will Implement in the future videos during this series and demember is not just about learning demember is also about giving back because during this time we decided to organize a fundraiser called education for children and during this month of December we are um helping save a kids organization with their efforts of providing education to every child in the world so if you want to to support this uh fundraiser make sure to donate uh you'll find find the popup somewhere on YouTube we set it up directly on YouTube and all the donation go directly to the save children organization um all 100% of all the proceeds so yeah we also set up some incentives for everyone who decides to to help us with this fundraiser and more details you can find at no. d/ eventd um if you cannot donate the easiest way that you can contribute is uh by simply subscribing to the channel because for every 1,000 subscribers during December we're going to donate $100 and I want to say big thank you to roel Zamora who donated yesterday $50 thank you very much for all your support so we are ready for day two and we're ready to get started here is our application that we started yesterday hello everyone who is joining us live hello alhuda uh hello an rag how are you doing guys this is the application that we started yesterday and the GitHub repository link again you'll find in the description here is the repository and I will keep uh two branches for every single day one branch for the beginning of the tutorial and one branch for the end of a tutorial so that you can uh start from any point in VC serious I'm trying to have like separate tutorials every single day so that's the that's the reason um so all you have to do is get the URL from here clone the repository and after you clone it do a git checkout day two- start uh so after you are on this Branch all you have to do is do npm install to install all the dependencies that we that we have and after the dependencies are installed go ahead and start the development server with npm start and after that you can run it on your device using Expo go or on iOS simulator Android simulator on on your device if you have them set up so here is the application during yesterday we have set up a project we connected it with Git and we also design this Advent calendar for that will store the features of every single day so today is day one day two and let's go ahead and set up at least our screen because at the moment we do not have it so in the source application we have a folder with days we have this day two and we also have yeah some information about day two uh the index. TSX like the screen that you see right now I think I'm going to leave it um I'm going to leave it like this uh I will just change the the header name screen with stack screen options and I will save it with title is going to be day two on boarding so when we go here is day two on boarding at the top there is a text here and what I'm going to do is I'm going to Simply add a add a button from react native that will redirect us to the actual onboarding screens that we're going to develop in a moment so the button needs a title uh go to on boarding so if I go here I see go to on boarding and when I press this button later on I want to add more details about the what we are working on on this page so that you first see some introduction and after that when we press on go to on boarding I actually want to show them what we are doing today so let's go ahead and in day two create a new screen called onboarding do TSX here I'm going to export a default component called onboarding screen and here here let's start by returning a text that will say onboarding the text should be imported from react native so let's make sure we do that from react native that's good uh not sure what's happening here but I think it should be good so uh when we press on this button we want to redirect to the onboarding page our application is also working on web so I will I can navigate there by running it on the web and simply going to day2 SL onboarding because that's where we created the screen and I'm not sure why I cannot change oh because my keyboard disconnected day two SL onboarding it's rendering the screen that we want but we actually want to redirect to that screen when we press on the on this button to do that we saw yesterday how we can navigate from one screen to another using export router and we're going to go we're going to use a link imported from XO router the links the link needs an hre and the hre will be slash day2 because slash day2 that's the name of our segment our directory and after that we want to go to the screen called onboarding so onboarding if I go here and click go to onboarding nothing happens because a button does it has on press yes it has uh we're going to send as child in order for the link to send to the button the one press event so now if I press here we we go to the on boarding okay now our focus is going to be on this screen um what's going on here I don't know so we're going to work with this one I we'll also import a view and let's wrap our component in a view does it expect me to import react that's not needed anymore so import that's weird I I I will double check the my typescript later uh anyway so we have a on boarding here what I want to do is I don't want on the on boarding screen any kind of top navigation of headers so using a stack do screen that is imported from export router we can send an option to hide the the header header shown false and that if we go there we'll hide the header perfect now let's go ahead and import also a Styles shet and using the Styles shet we're going to define the styles for our onboarding screens by styleset do create and yeah we're going to have like a page style we're going to have maybe a most probably a title style uh description or subtitle and if I'm not mistaken we're also going to have an image so if on the page I'm going to do a line items Center just to see the things on the in the middle and flex one and if I give it to the root view styles. page I need also justify content Center just to see the the text in the middle then we're going to think about the design that we want to implement yes now we have on boarding here and we get here by pressing on the day two and then go to on boarding perfect now when it comes to the uh to the design that we want to implement um that's a bit yeah it's uh I have a couple of examples and help me decide which one to implement one of them is actually uh uh inside the application that I have built the Fifi financial application on the market and this onboarding flows flow is coming from the tamagi takeout template and it's quite simple but really goodlooking one it has an icon at the top uh it has a title a subtitle some buttons at the bottom to to move between pages and to also skip the whole process I think this is yeah we we it's a good starting point I also found on um on dribble some good looking designs for the on boarding flow uh this is one of them uploaded by Aruna um that here like what stands out is definitely the illustrations the illustrations are really nice but at the end of the day like all one boarding flows that I saw like we follow a very similar pattern an image on the top a title and a short description with a button like to to skape or continue so that's what we're going to focus on let's go ahead and Implement that let's uh let's start with displaying some icons because it's hard it's going to be hard to find like images that will look good but by the end of the video we're going to look for for some images maybe we're going to generate some AI uh images with AI to to display but just simply having uh icons is going to make our work much easier um so that means that we're going to implement something like this track every transaction uh that would be the title so let's adway information track every transaction and this will be style do title nothing will change we're going to work on the Styles a bit later uh below this we're going to have another text component for the description and the the description itself so many tyos maybe I should use generate some text with with chbt okay something like this and as I said it also has has an icon on the top to in Expo to work with icons um we can use Expo icons and these Expo Vector icons contains a lot of font classes with different icons and yeah like you might you will find like anything that you you might need here so for transaction trans arrows I can use this one so to import it we simply import it like this import font awesome from Expo Vector icons basically we are importing the font family and then using the font family we are rendering an icon so the icon will be rendered here here at the top okay that's good and yeah yeah yeah yeah perfect when it comes to colors what do we do with the colors should we what do we do with the colors even white ones may are looking okay so should we keep should we keep it light mode or dark mode no dark mode looks much better so let's go ahead and follow the color scheme of this on boarding flow looks really nice so for the page I'm going to go with a background color and I'm going to paste the the color that I found there okay for the title the color is going to be something like a white maybe not it shouldn't be like full white so I'm going to try to take something from here it's going to be very hard oh think I found something good it's a very close to white but when you increase the font size for for example font size 30 oh I didn't give it font size and we will also increase the font weight to something like 500 maybe even 600 the value 400 is the default one and 700 is The Bold and you can either use 700 or actually bold yeah I think bold is okay I can also play with the you know with the um font font family because in our layout we are loading the font inter so let me try to actually use this inter font to see what's going on there font family inter that's good uh but it's not going to be bold but maybe 600 500 oh in this case when we are loading the font family it already has the whether it's bold or not so I will probably have to import something like inter um 600 semi bolt and add it here with inter semi and I will use this one as the font family inter semi yep should it be bold if it's Bal can I do letter spacing yes with lat spacing I can increase the spaces between letters so if I'm going to do by default it's one right no it's even lower than one so 1.3 will probably look good now as we see the text um stretches the whole screen size uh and to avoid that we can add some padding to the whole page uh in order to avoid items to reach like the borders of our screen so a border a pting of 20 might look good and I think we will have to decrease the font size track every transaction perfect now for the description again the color can be a lighter gray yes it can be I can even try a gray here yeah that looks good uh track C transaction gray font size we will increase it a bit maybe to 18 not sure why the description is H I I think I will I I will not Center them in the middle so I will delete the Align items to start them from the left something like this one should I use also an inter font for the text itself we can do that by importing something like inter regular so I will change here the inter from black to inter regular there is also inter font family enter why is it uh bold okay that's better but this one it should be semi or actually we need the the the Bold not the inter bold for the title okay better better better uh when it comes to the icon let's also use a gray color here maybe it should be a more interesting color I don't know what's going to happen if we give it like color like this doesn't look very good but a color like this I'm terrible at design might look might look better uh what I know is I want to increase the size like very much like somewhere 70 and I want uh to give give it a style so the Styles I will give it the style image for now because later we're going to replace it by the actual image and I want to center it in the middle because we removed the line items that was what was aligning it in the middle but I don't want it on the page because I want everything else to be from the right and only the image to be from the center so what I can do is I can send here a line self Center and this will only align the this item in the center I can also add some margin aggressive margins like 20 uh for the title as well I can do maybe even the title and the description should be at the bottom don't you think I think so to have them somewhere at the bottom uh for that to work we're going to put everything on the bottom inside a view with a style footer and the footer we can do margin Top Auto let's see if that will work yes that works it moves it to the to the bottom but what all what I will also do is in order to avoid things for going below the the the safe areas like below the the notch we can use a safe area uh View and if I'm going to I think if I'm going to replace the sa yeah I can replace that the root view the first view that we have it represent the whole page with a safe area View and this will make sure that our content is displayed in the safe area but the style here is no longer style but content style right well not actually because we are using here padding but it doesn't like the padding ve so I will have to wrap another view with the page content and the Tex screen can be outside here for additional ping that otherwise I cannot add through the safe area view because the safe area view is handling the the Ping itself uh let's go page content here that will add that simple padding now page content we'll have the podding instead of a page and it might also need the flex one yes because without Flex one if I will do a background color red you're going to see that it's it takes only the amount of space it needs with flex one we say like take everything that is available to you and now everything looks much better it has like putting like 20 it's also say displayed in the safe area because if I'm going to do a background color to the page content now you're going to see that this content is displayed in the safe area okay perfect perfect uh we don't need that background color uh for the title I think we need some margin vertical 20 to separate it a bit from the description I would even increase the font size to 30 even if it's in lines 50 I don't know let's go crazy what if it's going to be the inter 900 will it look good yes it looks good so I'm going to add also the inter black let's see yes I like how it looks now looks something similar like this one right and for the second one maybe semi no simply looks much better maybe we can increase as the size and the line height because right now if you look at the description here everything is so cramped into that space so if if we simply increase the line height to 25 that will look much better maybe 25 was enough and here is without it where without it with no 27 28 perfect all right so we have this one here uh maybe the icon is [Music] to 100 it's okay okay so we have some quite basic stuff on the screen already uh that that looks good uh now what I want to do is probably I'm going to add where is it uh let's go ahead and add some buttons where do will we take our buttons from which one do you like guys think I will go with this one it looks really nice continue continue continue but even like that um the one from my application uh I think looks really nice because it has it has both the continue button and the skip button so let's do that now in the footer after our text here is going to be our row with buttons maybe so let's put that into another view with style do button and here I'm going to start with the first button uh I want to design the buttons myself so I will use a pressable component which is a very general component similar to like a view it doesn't have any Styles but it allows us to build uh any kind of in uh to handle any kind of inputs from the user like press events and so on so it's very good to design buttons with it so let's use a pressable and inside it a text with a with a text continue now the pressable will have a styles do button The View here should be button buttons row and for the text is going to be button text okay so we have three styles that we have to Define here button button throw and the button text button text now I'm going to start with the button itself uh because I can use a simple background color like here for the button background color is going to be this one with a hashtag beginning that's nice uh as we can see uh the button definitely need some spacing inside so I'm going to start by adding a pting 10 even more like 15 but the size of a button will also change with the changing of the size of a text here so for the text I'm going to start with color white so that we can see it or maybe I can use the color of our title which is a lighter white okay good for the font family should I use a inter semi bold what else what else uh the buttons row needs some spacing so I'm going to add some margin margin top margin top here 20 to have some separation the button will have some round corners so border radius 20 looks good and if we want the text to be in the middle we're going to do uh justify content Center no it's align items align items Center perfect for the text I think the font size should be maybe 16 inter bold I don't like inter semi is better should should we do all caps no I don't like all caps yeah that looks good continue um I will increase the Border radius because I see that it's not fully rounded the corners now it's fully round perfect now if we want to do the same with a skip button the skip button will be a simple text because a simple text can also handle press events so I will add it before here text Skip and let's try to add the styles of a button text to see how it will look I think it will look good to be honest uh button text Skip and if we want to render them inside the same Row for the buttons row we're going to do Flex Direction row and background color red okay the button itself probably should have a flex one in order to take the whole Space the available space here uh to Center them horizontally we're going to do a line items Center and now the skip is centered with a button and probably the button will have no the buttons row which contains both buttons will have a gap that's going to be the easiest way to save a gap between the items because if we set it on the button itself it's going to be both on the left and the right or we need to think like in what direction it is um now with have a button text look if I'm going to add a background color red for this button that's that looks okay but for the skip button that that's too L the box is too small for for for for for the button to be easily accessible and pressable so I think that the pting that we added on the button itself will become pting of the text so 15 yes and now we can remove a pting from the button itself and this will look good in both situations where we have a background and where we don't and if now I will remove a background color red of a text it looks something like this which is very close with what I was looking for yeah okay that's good that's good uh you can even add more pting horizontally so p ing horizontal 25 and this will have more horizontal space for the skip the buttons are not functional yet uh but we have our screen ready for the next steps maybe the title has too much vertical space Perfecto okay so our simple boarding page with image in our case with an icon title and description and also buttons it's ready now let's think about a multi-age on boarding flow uh a multiplay page where we can press continue and to go to the next page having a multipage on boarding flow we can approach it in two different ways we can have every single page of on boarding flow as a separate screen in our navigation system and let the navigation system handle the animation between when moving from one screen to another uh that would work for example uh very simply by creating another file here in day two on boarding uh which I can do on boarding two and here I can change the the title for example just for to show how how it might work for example the title track every transaction save save better and the icon is going to be any kind of Icon a uh left I don't know if there is such an icon so uh to navigate from V on boarding one to the on boarding two all we have to do is on the pressible to put a link on top of it that will help us redirect to that screen to have a HRA here as day 2/ onboarding 2 and and pass here as child now if I'm going to go to the go to on boarding here I am on the screen one if I press continue I'm redirected to the next screen and I can also use like the the animation the swipe to go back uh because this is handle on the navigation side this is a stack navigation moving from one screen to another from on boarding one to on boarding two I believe that this is the probably the easiest way and I would encourage you to go with this approach uh however in this situation you cannot have some kind of elements on the screen that remain unchanged for example what do I mean by that uh in my case where is it in the application that I've built here when I go from one screen to another we see that only the content changes and the buttons at the bottom including the step indicator they remain on the screen and might even be animated on the screen so this is another approach in this situation we have only one screen and we simply change the content that we display in that screen and this will allow us again to have parts or components in the in the on the screen that are not changing that stay there statically because with this approach both buttons and the text and so on are moving uh so I think we are going to follow the second approach having only one single screen should we yep for that reason I'm going to remove onboarding to and all our work is going to happen in this onboarding screen for that to work we will need some data about the steps the on boarding steps so let's go ahead and Define here onboarding steps which is equal to that will be an array of objects and every object will be one onboarding uh step uh what information do we need on on the about the data about one on boarding step well definitely the title we need the description and later we will also need the later we will also need the the what the image right I don't know let's let's use icon for now and here we're going to use an icon name so for the first screen that's going to be people arrows for the icon track your transactions for the title and this one for the description let's what where is it let's add two more steps here and the second one I don't know what's going to be the second one well the first one is let's do it like this title welcome should we do an onboarding screens specifically for this challenge I think that that makes more sense Welcome to the Deber uh demember that's going to say daily rect native tutorials during during December this second one is going to [Music] be learn and grow together learn by Building 24 um projects with r native and Expo and last one education for children contribute to the fundraiser education for children to help the organization all right so we have uh now the last step is some some icons so the first one is I don't know something like Christmas or snow snowflake snowflake oh snowflake oh that's going to be hard to find something oh we we're we're going to think about that a bit later all right so now that we have an array of data for different screens uh we will also need to keep track of the position of a screen is it the first one the second one or the third one so that will become a state variable in our onboarding screen because whenever we will change it we expect the the user interface to update so that's why we need it as a state uh let's go ahead and Define use state from react and this is going to be position zero because we we start from the index zero and we have here screen index set screen index now we can get the data for that screen data equal this array on boarding steps and position screen index now for when name now we will use this data to render dynamically the title description and so on so for the title that's going to be data dot title for the description that's going to be data. description and what else do we have we have here the name of the icon which now will be data do icon the pressible that we have here will no longer need a link because we are not uh handling the navigation between steps through through expert router through through the navigation we handle it oh come on we handle it on the on the level of this screen 45 no flake isn't the snowflake from where oh it's just snowflake oh perfect so welcome to demember daily react native tutorial during December now if I press continue nothing uh happens but what I'm going to do is yeah let's do a const on continue equal it's going to be a function that initially we're going to do console warn continue now let's assign this function to the on press event of our continue button so when press equal to on continue if I press we see the warning now what should happen when we press continue well you initially we simply have to increment the screen index so we can do screen index plus one so if I go here and change it automatically changes the icon the text the title and so on because what we are doing here is we are updating the state variable by increasing the uh the screen index and when we take the data the component is re rendered and when we take the data from this array we are taking different data that later is being rendered on the screen so I can go to the third one but if I'm going to press one more time it's going to say cannot read property icon of undefine what that why is that happening that's happening when we are trying to render here data do icon but the data reached the end of array so we have three pieces of data here and when we reach the fourth one there is no data there so for that reason uh what we can do is we can check here if it reached the end so if the current screen index is equal to the length of the array so on boarding steps is last screen is equal to screen index equal to onboarding steps. length minus one why minus one because we are on the last screen when the index is this is zero this is one this is two so if the index is two uh that means that we are at the end of array but the length of array is actually three so that's why we are checking if the index is equal to length minus one so if it's last screen what should we do I don't really know but else we will do this one we can start from the beginning so set screen index with zero and if I'm going to reach the end it's going to start from the beginning maybe what I should do is simply go back using router uh if we want to programmatically navigate from one screen to another we can import from export router here hook use not sure if I need the hook where I can use the router directly from there so let me try if I will do router. back and continue yes it works so as you can see when we reach the last screen and then we press continue we are going back and end on boarding let's make it as a function and I will copy this logic here and only call the end on boarding why did I put it in a separate function because I want to do the same logic when we press on the skip when we press on the skip I want to do on press simply call the end on boarding now if I'm going to go here and for example press Skip it's going to call the end on boarding function and we'll go back and if I do continue continue and reach the end is going to call the same end on boarding and then we can decide what should happen when we end one boarding perfect so so we are we are good uh so far uh very still things that I want to implement especially around animations maybe some cool images and also the the step indicator the step indicator not hugely important but most of on boarding flows have it because whenever you show the user like what to expect like how many onboarding screens to expect it's going to be easier for him to to follow that onboarding screens because if he presses continue continue continue and it never finishes and he doesn't know how many screens he he still has it's um like it's a risk that you're going to lose that user so yes having step indicators is going to be useful here George is suggesting a topic can something similar to photoshop be done in rack native very basic V uh we could try to do some basic image editing or something like that using Rec native skia um I've been wanting to to try it out for a very long time so I'm not sure like what's possible there but maybe uh brage is asking I want to ask I want to start my SAS uh so for that I don't know where to start from figma design so I need to make uh barage I would recommend you to uh think about the problem that you're solving understand the features that are the core of your application try to ignore features that are nice to have only focus on features that are must then go ahead and draw some sketches on a piece of paper to understand how things will look on the screen and this should be like very uh low low file like very like simple rectangles boxes like where post will be where things will be buttons and so on and then you can start actually working on the application because if you don't have experience with figma you it's not going going to help you a lot having some figma designs uh so yeah I would just jump into it maybe look into into a UI library that will provide you with some pre-built components and that will help you keep a consistent design throughout the screens uh and yeah if you if you're more comfortable with that like you can start from the beginning defining like reusable components like buttons inputs and so so one and that will help you again keep everything consistent is this live seems like it started early uh this is live uh it starts our demember live streams are starting 3 hours before our usual time so usually I start at 3 p.m. GMT the demember uh Marathon we are starting at 12:00 p.m. GMT in order for me to to have some time to work on some other important parts to work on the academy um to yeah there is a lot of work to to be done and if I had started free I would would not be able to to get anything done uh guys if you have ideas about projects that you would like us to build make sure to check out the link in the description for our idea board and here on GitHub discussions uh you can submit a new idea here in the ideas uh maybe add a screenshot or explain like what you'd like to see and also vote for some ideas that you are interested in for example I see that the top idea recommended by technology Consulting is a tracking item like a real time uh like real-time display or tracking of a position on a map that sounds really nice uh most probably we're going to handle this problem or handle this type of feature by the end of this live stream uh maybe independently or maybe part of a bigger project because some other person uh recommended something related to food watering which also has 12 votes already anyway uh about Redux were any recommendation to start uh to start uh we have some some Redux tutorials on our Channel I'm not exactly sure like if I'm going to do the Redux in this series but if you submit V on Via board and more people would be interested in that you can we can definitely look into that uh but i' would be interested in trying some other uh Global State Management libraries that um that I didn't have a chance to to try before so maybe we can have something maybe even a comparison between different ways to handle Global State starting with the easiest one like with a react context all the way to to a to more complex libraries so so back to our project The Next Step uh The Next Step here is going to be where it's going to be to have this step indicator which style do we do we like the most there is this kind of Step indicator how can I zoom in with simple small dots and lines I think in my application that's also what they have and as you might see here well think is they are at the bottom uh where we can do something like this with a similar style of how stories on Instagram show up at the top basically a long line we divided into multiple smaller things and highlighted the current one I think this one will be very easy to implement and at the same time it looks really nice so I would recommend to to to implement this style of of Step indicator let's go ahead and try to do that in our application so the step indicator we're going to render somewhere at the top that means that is going to be in our page content but in page content yeah but above the icon so that's going to be first of all a view with style styles dot step indicator container let's do it like this now inside there we need to render some kind of lines what are these lines how to how can we render them well we can use a simple view with some height and width and a background color and just like that we will have something on the screen for example I will start even here if we have a weave of 100 a height of 10 and a background color of white you're going to see that line here and if we have two of them uh they will be displayed there we can also add some margin for example but no let me actually remove and do it properly like not without in Styles but below so all of these will go into styles do step indicator so let's go to our Styles we have steps there is Step indicator with the styles that we just defined and we also have a container step indicator container okay uh let's let's define at least two or maybe even three steps later we're going to do that dynamically but for now just to have it as Styles let's do it like this uh for the step indicator I can add a margin five just to see the separation between items perfect we see three lines on top of each other but we want them to be in the same row for that for the container we can change the direction of how it renders the children using Flex Direction row that will put them in the same row and it looks good right now but having a fixed weave here is not going to be a resizable because if I look at the web version and if I resize they will also resize they will remain the same so what instead of setting the weave I will set a flex one and flex one means take if all the children have Flex one that means that the available space will be equally shared amongst them so that means that on the web or on different screen sizes they will grow as we change the size of a window you see perfect now um we're going to have we're going to have them uh with round corners border radius 10 can be enough yes and the height will be much smaller like three five maybe five and a and a I don't know the background color gray yes and only to highlight the one that is currently selected but that's cool because every time now that we add a step like it's going to make it make space for it and will adjust like in sizes now all we have to do is instead of manually rendering different steps here we can Loop through the available onboarding steps and for each of them to render one line in this row how to do the well let's go ahead inside the come on inside the steps indicator container let's go ahead and map through the onboarding steps map and for every step we want to render one of these indicator I will remove the rest of them and only leave the loop that we have have here now it automatically has three of them if I'm going to for example later add one more in our data array it automatically shows them in the step indicator at the top perfect uh and how do we highlight the current selected one well we know the current screen index and at the same time we can when mapping and when rendering them we can take the index of the item that we are rendering and the index if this index is equal to the screen index we would like to display it with a different color but first of all how do we send to the Styles some kind of a variable to change where a color well we cannot do that but we can we can send to a view and an array of styles for example if I'm going to put this step indicator inside an array it's still going to work but that means that we can add another object in this array with for example background color red now all of them are red because it merges these styles with the inline styles that we provide here well we don't want all of them to be red we want only one the where index is equal to the one from State screen index let's display with red otherwise we want to Simply display it with gray now the first one is red if I press continue the second one and now the third one and instead of red I'm going to actually take maybe this one to uh yes this one to have it this perfect one 2 3 maybe even uh the to reduce the height to three two three probably is good and instead of margin actually uh it's much better to to work with a gap Gap five because the Gap will only add the the spacing between items not to the left and to the right of every single item so this is much better to have with a gap maybe we can increase the size of a gap to seven eight uh margin top let's do 30 [Music] oh I would actually put the step indicator even um more to the top what if I will take it out of our page content that looks good I will only need [Music] to add some part to the steps indicator container but only putting horizontal or even margin yes perfect I see that uh our status bar displays like icons with black and because our background is black we cannot see the clock and the uh and the battery indicator if you're wondering how you can uh change that we can do that using the status bar from XO status bar and if we render it somewhere here at the top wave style light now we can see properly the the clock and the the other icons in the header don't a very important part in these onboarding screens I believe is also going to be gestures because at the moment we can only move to the next space using the continue button but if I want to go back actually there is no way to go back at this moment I can only go forward so what I'm thinking is uh uh if we look at in to to at my application I can simply swipe left to move to another screen and swipe V direction to move back so let's see how we can use gestures to move between these screens or to move between these steps for that we can use gesture Handler let's go ahead to open the documentation we already have it installed in our application but let's go to the view documentation installation so what do we have to do Expo manage project to use this version of react native Expo install react native gesture Handler so let's go ahead and run this command but in fact we should run it using npx expo npx Expo install Rec native gesture Handler after installation wrap your entire Point uh entry point with jure Handler root view if I'm not mistaken because we don't have to do this because we are using xer router and most probably exper router depends on it and it already wraps around with a gesture Handler root view but we're going to see like if we have any problems we're going to come back to to check this that's it I think we can already start uh using the quick start guide to implement the gestures of swiping left and right to to move between the screens uh all you need to do is rub the view that you want your gesture to work on with gesture detector Define gestures and pass it to the detector that's all to demonstrate uh how you would use the new API let's make a simple app where you can drag a ball around you'll need rag na okay and reanimate for animation we don't need animations yet but we're going to need that in a moment uh so what we need is that gesture detector imported from the react native here gure Handler so let's import that here and we're going to wrap our if I'm not mistaken we're going to wrap the page content because we want to handle the gestures on the whole page content let's do that here gesture detector and let's see where the page content ends it ends here before the safe area view now if I run cannot read I would uh go ahead and restart the server and if it's still persist most probably is because I didn't follow all the installation guides all the installation instructions so let's go to here on boarding yes let's go ahead and try to do that from the installation let's go import the root view inside our inside our layout because this is the entry point of our application so I'm going to import it just a Handler root view I will wrap around everything here and as I saw in the documentation we need to also add a flex one in order for it to take the whole space and now if I'm going to go to our onboarding screens not it's still uh not working because yeah I think I will just have to to move forward for to The Next Step because we need to provide some some some gestures to it let's find like this swiping gestures a fling gesture is this what we're interested in a discrete gesture that activates when the movement is sufficiently long and fast yes the swiping gesture gets active when movement is sufficient long and it does not take too much time I think that's what we are interested in in a fling gesture so let's go back to our onboarding screen and let's define this fling and we need to import gesture from the Handler now to the gesture detector let's go ahead and do equal Flink and now it should work uh I mean it should uh run but we are still not we we still didn't Implement any like um logic like what should happen when the fling happens let's see at the configuration the direction right and left I think that's what I interested in but I'm going to add that direction a bit later let me just have callbacks that's what I'm interested in on begin set the call back on start on end set the call back that is being called when the gure that was recognized by the Handler finishes it will be called only if a handler was previously in the active State that's exactly what we want I don't really care like what happens when the gesture begins or when it starts or or something like that I only care about when it ends successfully so here in the fling I can do uh on and and this is a callback we're going to receive a event and we need to do something what do we need to do is well let's do a console log fling and maybe even the event data now if I open the console let's go ahead and see what happens when we actually do this flings well well it something happened uh so Handler number of points all state state Target mhm how to understand in what direction was the fling x coordinate of a current position of a pointer finger or leading pointer absolute x x coordinate of a current position of a pointer relative to the window for no long rotation no pinch definitely no yeah it's actually fling yeah we can set the direction only to right right and left by importing the directions but still it's a fling yeah now it looks better with the with this only Direction it understands them every time I just need to understand how to to check in what direction that was happening because I can simply do what I can simply do on end let's set screen index or let's let's have a let's call the on continue here so if I do sling it continues sling it continues sling it continues but it will only be in V Direction it only goes forward it doesn't go backwards m most probably I can do a one begin to save like where did we start like the the X position where we started and we can check when we ended is not yet and then compare like if it's to the right of or to the left is being called so on start event uh fling start event and fling end event now we're going to see if I do like this fling start uh and the x is 143 fling and the same weird maybe x uh X1 for3 X1 for3 fling start the same maybe not the start maybe begin because start only is triggered when it understand that it's a fling and I think when it understands it's a fling it's both the start and the end this is a short movement it's not a long continuous movement so now if I do like this the start is 77 and the end is 140 and that's true like that means I move from here to there and if I move in v Direction the start is larger than the end now how can we send data from one to another I think there is a state let me just simply search because maybe I will find it the answer that I'm looking for J Handler Flink get direction velocity what am I missing guys uh uh maybe I can use the native event what's going on there with a native Event Event dot maybe it's not longer including the native event for that seems that it should be easier than than than I expect but maybe I'm missing something so I'm trying to understand like how to understand if it's the Swip left or swipe right um fling I have some information here event attributes common to all gestures state do we also have a state VAR there state does it have a state Old State Target XY Dot yes it has stay what it contains 2 five some some numbers okay what if I have two of them can I have two of them compos gestures provide a simple a simple way of building relationsships between gestures composed what if that's exactly what I'm looking for and I can do two two flinks one with direction right uh and in that situation I don't even need the the begin I only need the end so let's see if that will work just to have right for example okay that's actually left because we do it like this and if I'm going to have another uh let's do swipe swipe um forward and then let's do another one for swipe backward const swipe back that's going to be to the right it's not going to have a begin and it's going to be not on continue but on back let's have a new function on back and it will check not if it's last screen but if it's the first screen so if screen index is equal to zero it's going to be the first screen if it's the first screen yeah if it's the first screen I think we can end on boarding otherwise we can decrease the screen index now this wi back now using the this one using compos gestures we can have a race simultaneously or exclusive let's try I don't know uh swipes gesture I think simultaneously we can have swipe back and swipe forward and now if I give this com compos gesture to our gesture detector let's go to V boarding if I swipe forward it works and if I swipe backward it doesn't oh because I also call on continue but I need on back on back yep yes it works guys and it was easier when I thought instead of calculating something we have two different fling events one for swipe left and it's and it calls like what it should do and actually it can be even more simplified like because we don't need the event we can remove everything and simply pass here the on continue now it still works uh and for the second one the same instead of defining it we send access to a function that is that will be called when V fling is is called and you can even either have them as variable swing forward swing back but it's so simple that I would even replace them in line here because I don't think it will impact a lot like the readability of a code and this way we only have one composed gesture that defines two kind of gestures with the with a function that should be called when that happens now if I refresh let me d double check onboarding screen getting complicated oh I hope that um yeah I'm trying to implement like features that any kind of on boarding screens will will need but this is definitely not something that every application needs like you can start as simple screens that you saw at the beginning with just a title and so on and as you go you might Implement like these additional features like gestures animations and so on but yeah it looks really nice and you can do with gestures you can also do with button continue and also we have a skip nice like it okay that was the the swipes and that was our gestures um I also want to actually this the video is getting too long uh when I started it I was thinking like boring screens a couple of titles images and so on like it's going to be 15 minutes but now it's already one and a half hours and I still want to show you some some things and what I actually want to show you is some simple animations some simple layout animations that we can get using uh reanimated reanimated so let's open the documentation up and let's see uh how we can use reanimated to add simple layout animations uh and what I want to accomplish is uh look first of all compare how it how application on the right looks right now so when we change like everything is replaced instantly without any animations and it's it's nice but it can be better uh and compare this with with this screen that has very subtle animations things are moving slowly things are moving from left to right uh but yeah it's it's really it really looks smooth so let's add this um let's add these small animations using reanimated and they layout animations here layout animations uh using them we can have predefined animations for entering and exiting states of components so it can have like a fade in Fade Out left and right uh we can have like Bouncy Stuff and so on so let's play a bit with that but first let's go ahead and uh follow the getting started guide uh what we need to do is we need to use npx Expo install react native ranimated we're going to need to add the plug-in off animated to Babel config so let's open that up here and in the plugins we're going to need if I'm not mistaken export router should be the last one in the in the array of plugins so we're going to have ranimated first oh ranimated has to be listed last hm okay let's see who actually needs to be listed last and then and then we can simply restart the server using the DH Dash clear to clear the Metro bundler if I refresh and now we can go to the layout animation entering and exiting when they are added or removed from the view hierarchy ranimated comes with a bunch of predefined animations you can customize okay let's try a simple example like a fade in in our onboarding and for that I'm going to have to import the the the animations the predefined animation fade in and Fade Out from reanimated and also the animated view I think everything is animated or is it simply animated now uh if I'm going to go here to the one boarding what can we do we can uh yeah we can first of all transform A View to an animated view so I'm going to do that with a page content with a full page content then we can send the entering animation like fade in and the exiting animation as fade out now if I'm going to refresh and go there did it work it's a bit something weird happened there so uh let me try not to do that with this with this view but now let me actually do that with this view just when we move from a page to a page our entering and exiting are not being triggered because these components are the same they are not being changed the only thing that is changing is the data the titles and descriptions if we want to actually recreate them and to trigger the entering and exiting if I'm not mistaken we have to pass here a unique key and we can use the the screen index as the key here and now every every page content of every screen yes is has a different key and it's being animated in and out maybe fade in is not very visible but we can try what entering this is fade bounce flip a bounce will be clear like if it works or not let's do bounce bounce boun in right and bounce out left and for the entering let's do bounce in right and exiting bounce out left if I go to the own boarding okay it's a bit weird right we've continue I think it works nice nice I mean it's not broken bounce is good uh I just wanted to show you like how we can add like it's very simple like we all we have to transform A View from A View to an animated view it also works like on text animated. text animated. image and any animated View and simply provide the entering and exiting animation uh that you can choose from all the built-in animations that you can find on this page but uh to to have a better experience uh I was planning to have to have um individual Parts being animated not everything together for example for the icon at the top I think I can do well for the whole footer for example title I can do animated do text and for entering I can do bounce might be too much um light speed pin whe how does it look roll slide yeah I will use a simple slide for the title to slide from slide in left so let's use slide in left for the title slide in left and let's import it from reanimated here so the title should slide in for the left yes that looks nice the description can also do the same so I I can do animated. text and entering can be this one for the image for the icon icon I will actually leave it like this maybe I can do a small a view on top of it and have here the entering I know fade in and for the exiting I can do a fade out will that work yeah that look looks nice I I can change the icon for the last one font awesome what do we have here can I have a book something book reader that's it now we have animated screens that was quite easy to implement to to make the slide animation a bit slower uh over the text right we could do that let's see in the entering and so one I think we can have modifiers and modifiers time based modifiers with using for example I can probably modify that uh on the slideing left I can uh for example the description I can delay it a bit so that first we have a title and then the description uh we can delay it with 100 milliseconds and that will make the description come later the title comes the title comes first and then the description title and description uh probably 300 will be enough or maybe even 200 and I can maybe even um sliding left I can do duration I can increase that to 3,000 and you're going to see how slow it goes so yeah you can add any kind of modifiers to this built-in uh animations what the one by default should we change anything in terms of duration will it look better let's see if we can add also an exiting animation if it will look good slide out right slide out right in import it from here let's see welcome yeah I think it looks nice nice I think I like it uh delay and most probably the other one should also have something like this with a delay something is weird I think it should go in the other direction I think I should move entering from sliding right and slide out left slide in right and slide out left slide out left and slide in right yes now it's better now it goes here from the left to the right and it makes more sense and it also synchronizes with the animation of a screen navigation so when it comes from the left the text also like comes after it right after that happens okay so uh that's our animation and I think we are re we are done with power on boarding screens and I covered everything that I wanted to to cover today uh I saw a small issue with when we go there uh and warning that each should have a unique key and that's happening when we map through the on boarding steps and render this indicators at the top we also need to provide here a key uh with the it can be the index of the of the step and now it works better nice so the trick in this one in this animations to work was to uh to have a unique key that represents the screen index to one of the parent components here because if you don't have a key this key here um the components that are rendered on the screen they will not be recreated they will remain the same and only the text inside it will change however when we have a unique key react native and react behind the scenes will recreate them when this the key is different so that's uh that recreating them when the screen is different will create will trigger the enter ring and exiting animation of all the child components uh maybe I will play a bit with the and the size and the uh 150 and we [Music] icon where is icon in the style well oh it's image so margin top maybe 70 just to be in the center there I don't really like that the the second text coming something is wrong with the second text coming so maybe I can do for the second one fade in fade in and exiting Fade Out no something is wrong maybe slide but with less delay yeah with less delay I think it it's better okay pretty happy with this one all right guys so let me go ahead and uh finish everything I'm going to I'm actually going to check out to the day two and and I'm going to do here the G commit so that you can have access animated onboarding screens get push origin day two end all right so that was the the project that we did today and here is our results this is a beautiful onboarding screens I'm very happy with how it turned out even though I'm not very good at designing skills like in the end like it looks like really nice especially with small animations that we have here so when we go here we land on the first page we have activity the step indicator at the top image in the middle we have titles descriptions and we can navigate back and forth using buttons and not only buttons but also gestures when we when we when we move throughout the screens we also have some animations and when we stop here it is so I hope you enjoyed this uh and this was day two of our marathon of our Christmas marathon of re native tutorials demember uh make sure to subscribe to the channel because we are going live every single day during demember with this kind of interesting projects that you will need in a lot of R native applications we're going live every single day at 12:00 pm GMT so don't forget don't forget about that uh if you have ideas make sure to share them on our idea board on GitHub you'll find the links to it in the description below and or you can follow this URL and yes I want to to mention that demember is not just about uh learning it's also about giving back and we're organizing a fundraiser called education for children where we are uh encouraging our community to donate uh and help save the kids organization with their efforts in providing education to every kid around the world your donations are helping uh kids get access to accessible education and uh if you simply subscribe to the channel we will donate $100 for every th000 subscribers we gain during uh December so that's the best way you can the easiest way you can help and thank you very much orelio and Travis for your donations and uh yes guys I will see you tomorrow with a new live stream make sure to vote your your ideas that you'd like me to that you'd like to see me build and I'm going to cover them in the next events all right bye-bye have a nice day and see you tomorrow guys

Channel: notJust․dev

Views: 3,632

Keywords: vadim savin, not just development, notjust.dev, react native live coding, live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, react native for beginners, React Native, mobile development, DEVember, Expo framework, fundraiser, mobile app tutorial, React Native beginner, learn coding, tech education, charity event, coding challenge, Expo Router, coding for beginners, onboarding screens, onboarding users, react to react native

Id: b5WB0ImJ6oo

Length: 116min 24sec (6984 seconds)

Published: Sun Dec 03 2023