Onboarding tutorial for React Native - Animated Carousel #1

welcome back everyone today we're going to start on an onboarding example using some really cool animations i'll show you how to create a carousel effect with flat lists then animate these dots changing size and opacity and the next button animating the circle around it depending on which slide is currently showing then we'll finish up with adding the onboarding functionality making sure users only see it the first time they load the app i'll be breaking this up into a few smaller videos so if you'd like to see the entire series right now it's available on my patreon link is in the description otherwise make sure you're subscribed and all the videos will be here on youtube soon okay let's get coding okay to start with i've got a blank project here i'm using expo today but the code will be the same if you're using the cli so pick whichever one you like let's first create a component we'll call it onboarding and we'll put some boilerplate in here for now back in app.js we'll import that component and then render it out our onboarding component will contain the flat list the paginator and the next button today we'll start with the flat list first we'll import flat list for the data i'm exporting an array that contains four objects each with an id title description and an image i've pulled these images from undraw.co but you can use whatever you'd like so let's go and import that data and provide it to the flatlist now we'll create another component we'll call it onboarding item and we'll put in some boilerplate for it now we can import the onboarding item into the onboarding component and in the render item prop we'll pass in that component [Applause] we'll need to import the image component and the use window dimensions hook we'll accept the item prop and we'll get the width of the screen using the use windows dimensions hook we'll set the width to the width of the screen so that each item will take the full width now we'll add an image setting the source to item.image we'll give that image some styles also setting the width to the width of the screen and set a style property giving the image a flex of 0.7 so it'll take up 70 and justify its content to the center we'll create a view giving it a flex to take up the rest of the container we'll display the title and the description giving the title a style and the description of style we'll give these styles to the title and these to the description and that'll complete the onboarding item component you can see this is a vertical scroll now though and we would like to do a horizontal scroll now we can scroll left to right let's get rid of the indicator so we want all these slides to snap into place instead of just scrolling we'll do that by adding the paging enabled prop but we also want to get rid of being able to pull it slightly like this so we'll set the bounces property to false now you won't be able to do any of that looking pretty good so far we'll need to add a key extractor prop let's import the use state and use ref hooks let's also pull in the animated component we'll create a reference to an animated value using the horizontal scroll position of the fly list for the on scroll prop we'll add an animated event get the native event the content offset the x position and then map that to our scroll x reference we'll also set the use native driver to false because we'll be animating width in the future and the native driver does not support width at this point we're not going to see anything different let's create some state to hold the currently viewed index meaning we'll get the index of whatever slide is currently being showed on the screen so for instance this would be 0 this one would be 1 2 3 and so on we'll set this reference whenever the flat list scrolls and moves on to the next slide where we can then set the state of our current index to what's currently being displayed on the screen and we'll pass that in as a prop and we'll need to tell it that the next slide needs to be at least 50 on screen before it will change and we'll also pass that in as a prop and let's give it a scroll event throttle of 32 and get a reference to the flat list itself finally we'll wrap the flat list in its own view give it a flex of three so that it'll take up three times as much space as the other items on the screen when we add those so that'll do it for this part if you want to see all the videos for this app they're available right now on my patreon link in the description otherwise make sure you're subscribed and the next part of this video will be out next week hope all of you have an awesome day go out and code something cool a huge thank you to lawrence raphael goode nabeel jonathan marwin michael esco kevin joseph hassan felix along with all my other patrons you're all amazing

Channel: DesignIntoCode

Views: 114,398

Keywords: React Native, React Native UI, React Native Expo, React Expo, React Native iOS, iOS, Design, Javascript, JS, React, react native tutorial, react native ui, react native design, react native ui design

Id: r2NJJye0XnM

Length: 5min 26sec (326 seconds)

Published: Wed Jan 27 2021