Onboarding UI in React Native

[Music] hey guys welcome back to my youtube channel today in this tutorial i am going to show you how we can implement onboarding ui in our react native app so as you can see over here this is our layout and this is the first slider of our onboarding ui and over here we can see that we have these two buttons the first one is the skip button and then we have this next button and in the center we have these dots indicators by seeing these indicators we can assume that this is the first slider of the ui right and we can click on the next button then we are presented with the next slider and again we can click on the next button then we are presented with the last slider of the ui and then we have this done button and we don't have the skip button if we click on the done button then we will be completed with the onboarding ui if we don't want to see all these sliders then we can simply click on this skip button right then we will be presented with the actual app screen so click on the next click on the done then we will be presented with the login screen and the main concept of the onboarding ui is that when a user first using the app that time the onboarding ui will provide the brief information of the app to the user for the first time when the user first installs the app and when user launch the app for the next time that time the user will not see the onboarding ui so here we have this login screen now if i remove the app from the phone memory and open it again then we can see that we are not seeing the onboarding screen we are directly presented with the login screen so here's the visual representation of the user flow for the app so first we have the app launch if it is the initial launch or the first launch then we will be seeing this onboarding ui otherwise if we have any other launches then we will directly presented with the login screen or the home screen based upon the authentication if user is authenticated then they will be presented with the home screen so that is a different part for the authentication purpose right now we are not doing authentication right now we are focusing on the onboarding for this tutorial for this onboarding ui we have this user flow for the initial or fast launch they will be presented with the onboarding ui then the login screen and for the other launches they will not see the onboarding ui so i think the concept is clear to you now so if you find this tutorial interesting to you then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification bell icon so that you get notified whenever i post a new tutorial on this channel so without wasting any more time let's get started with the tutorial so this is our app screen and let me discuss the app structure we have created this screens directory and within this directory we have this onboarding screen which you are seeing right now and we have this login screen so there is nothing fancy currently we have this text and a button right and we have this app just and in the app.js we are displaying our stack navigator so we have installed the react navigation version 5 and react navigation stack so within this stack we have this onboarding anti-login screen and if we click here then we are presented with the login screen so nothing fancy if you don't know about the react navigation version 5 or you want to learn more about it then you can check out my react navigation version 5 playlist i will link that in the description below or you can check that from i icon of this video so we will implement the onboarding ui in our onboarding screens.js file and to implement that layout we need to first install a library and that library is called react native onboarding swiper and first we need to install it so to install it we need to copy this command and paste it in our terminal [Music] so it has been installed now we don't need to do any more thing over here we can just simply import it and we can start using it so here's the uses and we need to import it so i copy this code and paste it here now for the users of it we can see that we have this code so i copy it and paste it here so here we have the pages so within the pages array we can define different pages so one is present and i have added another one so here we have the title and subtitle so i change title little bit and for the images i have already created an assets directory and over here we have three images so here it will be assets and then we have this onboarding image one and for this one it will be onboarding image two and we are using the image component so we need to import the image component from react native as well now save it once so after saving it we can see that we have this layout and we can swipe from here right now we can change the background colors here so this is the background color for the first slide and this is the background color for the second slide now save it now let's see so it's working fine right and we can see that these things already has been added by default we didn't need to do anything regarding this right so let me add another slider and change the titles and all quickly so i have updated the title and subtitle now let's see so it's working fine now let's see what are the customizations we can do so here for the pages we can see that these things are required so background color image title and subtitle these four things are required and then for the buttons we have these things and these are the optional things next level skip on skip on done so here for on done and on skip we can provide what we want to do so here for on skip we will navigate to login screen and similarly for on done we will do the same thing so let's see and here for the undone we have this check mark and this is by default so when we are clicking on done button then we are presented with this login screen but we can go back to our onboarding layout and for the on skip as well if we click on it then we are presented with the login screen right so this thing has been done by this navigation navigate but we will not give the ability to the user to go back to the previous screen which is the onboarding screen so for that we will use replace instead of the navigate so it will replace the onboarding screen with the login screen within the stack we will provide the replace for both these but right now i am not providing it right now i am providing this only for this on script so that i can go on with the rest of the process and in this process i can go back to the onboarding screen but later when we are done then we will provide replace in this place also so here we can see that we have many more other things and these are the things which we can customize like this skip button next button done button dot component so these are the dot components and these are the buttons right so this is the escape button and the next button so skim button component we can provide our custom button for the next button we can provide our custom component as well so here we can provide any other text or we can provide any icon as we want so now let me show you how we can provide these things so for the skip button component we can provide a component and i name it as skip so here i have created this skip component and here i will return a button and for the title of this button i will provide this skip so now after providing this you can see that the button has been changed so now i can provide the color over here and i will provide this black color so i'm not changing it drastically because i think this layout is looking pretty good so i will keep this as it is but i am showing you how we can customize it so this is the escape button so similarly we will have next button and for the next button i named this component as next and here it will be next button component right now save it change the text now if i click over here then we can see that it's not doing anything so for that we need to pass some props over here and we need to provide those props in this button now save it after saving it we can see that the button is working perfectly right so we need to remember to provide the props to make the custom component functional so i will change this icon to the text as well so for that i will create another component as done and the text for it will be done as well and it will be done button component so it has been changed also if you want to provide custom styling for the button then you can also provide that but then you need to use other component like touchable opacity rather than the button so here the touchable opacity so let me create the touchable opacity button i want to provide some margin here here for the style of it i will provide margin horizontal eight okay we have the error we need to provide this done within this text component now save it now let's see so it's working fine now provide some styling here for the font size i will provide 16 pixel but now this button will not work so we need to provide that props and now if we click on done then we are presented with the login screen so like this we can customize our component and let me do last customization which is this dot component so for the dot component we will use dots now create a variable called background color and for the background color we will provide this color and for this component we will return a view and for this view style i will provide width and height margin horizontal will be 3 and i will provide the background color and this background color will be this one now save it now after saving it we can see that all dots are similarly colored right now we cannot assume which slider we are seeing currently to determine that we have the selected prop and from that we can determine here and if it is selected then we will display this color and if the slider is not selected then we will display this color now we can see that it has been updated and by this we can get a clear understanding of the current slider so this is how we can customize it now we need to do the user flow when we are opening the app again that time we don't want to display this onboarding screen we just only want to display this once for the initial launch right so for that we need to do some calculation in this app.js file so within this app.js i will create is first launch state and for it by default we will provide the null value and here we can create a function which will only run once when the app is mounted and we can do that by this use effect hook and within this use effect we can do our calculation to find out if this is the initial launch or not for that we need to store some value within async storage so make sure you install async storage as well i have already installed it in our package so here we can see we have this async storage dependencies right so make sure you install that and import it properly and here for the async storage get item i have created this already launched item now if the value is null then we will set this true value to this item and we will update our state as well so if the value is not set for this item then we will set the item value and we will update the state with this true value else if this item has some value then we will update our state as false now we can use this state value to display the screens accordingly so here if is first launch equal to null that time we can return null yes if his first launch equal to true then we will return this navigation container else if it is not null not true then that means it is false so that time we will return our login screen right so now we can get rid of it save it so after saving it now click on next next done so we are presented with the login screen now if we close it and again open it okay we need to return this now save it so now we are presented with the login screen now let's check it once more so we are presented with the login screen now if i delete the app uninstall the app from our mobile device and install it again so now for the first time we have seen the onboarding screen now for next launch onwards we will not see the onboarding screen right so that is it guys this is the tutorial i hope you have learned something new from this tutorial if you do so then hit the like button let me know by commenting down below if you have any kind of suggestion for me then also let me know and don't forget to subscribe to my channel for more tutorials like this so i will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 64,166

Keywords: onboarding screen react native, onboarding ui design, onboarding ui in react native, onboarding screen in react native, react native tutorial, react native onboarding screens, react native onboarding, react native onboarding tutorial, react native onboarding animation, react native onboarding swiper, detect first lauch in react native, only show in first launch, show screen only on first launch, asyncstorage react native onboarding

Id: SMkR-iIGvwQ

Length: 16min 3sec (963 seconds)

Published: Mon Sep 07 2020