Let's build iOS 16 in React Native 🤔

what's up no Jazz developers welcome back to a new live stream so excited to be back at our usual Fridays live stream and today I'm coming at you with a very exciting build that uh I've been preparing for a couple of the last couple of weeks so today we are gonna work uh on the iOS 16 lock screen and we're gonna try to reproduce it with react native um you might ask why are doing this well I was looking I was I updated to iOS 16 I was looking at the lock screen and it has so many features it has so many customizations and I really enjoy uh all the animations that vs screen provides and I decided to challenge myself and try to reproduce some of these animations so in this tutorial that's what we're gonna do we're gonna start by uh simply displaying the user interface of this beautiful screen and after that we're gonna get into some animations so in this tutorial in this live stream You're Gonna Learn react native using Expo and also where you're gonna learn some JavaScript because we're gonna write JavaScript but what's new and what I'm mostly excited about is the react native animated which is the library that will help us build web beautiful animations that we have on the screen so um for everyone who is new here hi my name is Vadim and I'm sharing my knowledge and experience here on YouTube channel with everyone with our community so if you enjoy and if you uh if you enjoy building mobile applications and if you're interested in that make sure to drop a subscribe down below not to miss future videos because I know like most of you watching right now are not yet subscribed and yeah that's a bit sad uh but with that being said I think we can get started and in a moment I'm gonna show you the end result of application so let's go all right so first of all hello everyone who is joining us live in the chat as usual let me know where are you joining us from um I'd like to show you the application that we're gonna build and just give me a second some of course some issues before but before that of course before that uh one last step for them come on for the uh prerequisites in order to get the step-by-step guide and also the asset bundle that will include all the images all the dummy data and everything that will help you follow along this tutorial then go to assets.nojas.dev iOS Dash lock screen so the URL you'll find in the description below of this video so in after following that form you're gonna get the um then how is it called the step-by-step guide which is in notion and explains all the steps and it has also code Snippets in order to be able to follow along and also the diamond data that I explained so um yeah let me see what's going on yeah the application I think is running oh of course um give me one second I will need to to grab some some files I forgot about them let me know if you managed to uh get the step-by-step guide and when you're ready we can get started okay I brought the assets here in my dummy project let's see if all right so here we have it so here on the right uh you can see the application that let me actually do it like this foreign so guys here you can see the application but we're gonna build by the end of this tutorial so as you can see like initially the application will look like this we are going to Simply display a beautiful background image with the clock and the date at the top we're gonna work with some icons to display them for example the lock icon and here at the bottom The Flash in the camera icon after that we're gonna start working on the animations so the first animation is the little swipe up to open uh text at the bottom that is really quite easy to implement then we're gonna also do some layout animations for example if I refresh the application the text and the footer should slide in in the screen probably it's not very visible at the moment after that we're gonna get into some interesting stuff and we're gonna animate the flat list so as you can see here the flat list when you scroll the item seems to um to be coming from from the behind uh instead of just going straight uh down so this is a really nice animations that you can reuse in a lot of applications and even though I spent like probably four hours to nail it down uh I think now that understand better animations it's actually uh not that complicated to build also we have some really nice small things like if your start scrolling them the least our footer will disappear and if we scroll all the way up the footer appears back in and the same goes with uh if we uh swipe down and scroll down then our flat list will disappear and the same we can make it appear again so with that in mind I think we are ready and we can get started are you excited about that guys let's see foreign so I see that a lot of people are just joining and if you just join right now the plan for today is simple the plan for today is to try to recreate iOS 16 lock screen together with its notifications using Rec native and here what you see on the screen is not them uh lock screen of iOS because that one is here this one is actually built with react native and that's what we're gonna do today with all these little animations with a beautifully scrollable list and yeah okay we have our team here hello Momo hello Catalina so guys uh I'm gonna open the I'm gonna open the guide that you should receive on your email and let me do it here let me open it here because here you'll find like all these like step-by-step instructions on how to follow along um also it has like a lot of code Snippets to to make your life easier all right so here we have it so when you open this page uh you're gonna scroll down and you're gonna see the task list here on the task list we have all the tasks for today but if we go by topic uh here we should see like all of them divided in UI and animations because the first part of this video is going to be focused on the user interface so before we use any interface let's start from the beginning and let's start with the task UI one and here we need to initialize the project so to initialize an export project we simply need to use a command npx create Expo application nowadays you don't have to install uh Expo CLI globally you only need npm and npx and if you have them you are ready to get started and building applications with export so I'm going to open a terminal um by the way this application will work both on uh windows and on a Mac OS I mean to develop it on Windows and Mac OS and it will work both on an iOS device and on an Android device I would really have advanced to see how this lock screen looks at them on a Android device but now let's go ahead and I'm gonna I'm gonna go in my projects and here let's go ahead and run npx create I can do it even like this npx create Expo up and the name will be iOS lock screen let's press enter and now npx will check if you already have this installed globally if not it will ask you to confirm to install it so press yes and after that your Expo will initialize our project I think my camera is a bit off so sorry for that uh I think it's better all right hello Brooks hello guys can I use node 18 most probably you you should be able to do it because the only thing that we need is npm here and that's it Reginald hello all right no no no no what did I do have no idea what they did I pressed on some buttons Jason hello Jason is actually uh you're from our premium course right I remember you foreign it takes so long for to install JavaScript dependencies I think I'm on a Wi-Fi and maybe not the best but after we see that your project is ready all we have to do is to open um is to open this project with Visual Studio code or any other editor of your choice so let's go ahead and do code iOS lock screen and this will open them newly created project in vs code now I will not need any more of this terminal because I will use the terminal that is integrated in Visual Studio code so let me set up everything and now let's go ahead and run this project as it is as it was generated by Expo for that open a terminal by selecting terminal in the top bar and then new terminal and here let's go ahead and run npm start this will start our development server and after that oh we yes let's do yes I'm gonna do it like this so this started for us the Metro bundler uh Metro bundler and it displayed uh the QR code this car code uh if you have if you don't have an emulator on your machine then uh the easiest way to test and debug um XPO applications without having to go through the installation guides is to download on your phone the application called Expo go from Market it is available for both um Android and iOS and after you install it on your device then you can scan this your code and it will run in your physical device in your hand but in order for you to see what I'm doing here I will go ahead and run it on this emulator so I'm gonna press I here by the way Expo if you remember previously Xbox had like a very nice web UI user interface for uh them for the development server but it was removed so now nowadays we the only way to interact with Expo is through the CLI command from here so as you can see there is all the commands that you can run and also you can press um question mark to see actually all of them so now we see you on the right the application running on our application on our emulator or on your device and it says to open up objects and start working on the application so app.js we can find it here in our root directory and this is the entry point of our application so if we're gonna change the text here to hello world then this text will automatically without any uh without even saving this it automatically um updates on the device so that means that everything our setup is correct and we are ready to move uh to The Next Step so uh let me where is it here you can see all them in the guide that you received on the email you should see all of these steps and also I included like a couple of tips and tricks and some information about debugging so if you're interested go ahead and follow this guide to learn more about this oh I should uh remove this one okay so back to our task list let's go to the second one UI import the assets uh to import the assets go ahead and download this asset bundle from here and this is going to be the files that I told you that we that we need so not sure why my internet is so slow but okay I don't mind as long as the stream health is good all right so how am I how many of you guys are following along there and are trying to build this application together with me let's see let's see I'm gonna uh let's do a poll while I'm downloading no actually the asset bundle already finished downloading so that means that we can go ahead and unzip this directory where is it uh here so on the previous directory and from here open it up and you will receive the PDF presentation if you're interested in that and also a folder called assets so drag this folder in our root directory so somewhere below like the package.json drop it here and then let's press on the copy folder copy folder and then replace and this will replace the asset bundle the assets that was already in our application and I prepared for you like images for the applications that will be displayed in the notifications I also have prepared wallpaper and some dummy data here with all the notifications that we will you use in the application to display all right so um the next task is done our assets are in place let me go here so we downloaded and we replaced it in our project let's go ahead to our third task the first task is the image background so our goal is to render um a image background and the image as I told you is this wallpaper uh from our assets images wallpaper so in our app.js let's go ahead and import a couple of components a couple of things here you will see the code examples if you open it like this but I'm gonna do it right away here so what do we need is first of all we need a component from react native which is going to be the image background this image background will is very similar to a image component but it allows us to put children content inside the image background and that is going to be displayed on top of the image and this way the image serves as a background um now let's import the actual image and the image I called it wallpaper so let's do import wallpaper wallpaper from uh this directory then assets then images come on no no images when a wallpaper dot web P I think yes now what should we do what should we do I think we're gonna replace the top container this view with our image background so let's replace view with image background make sure that the closing tag is also now image background and let's go ahead and give it the wallpaper source so Source will be um source source wallpaper wallpaper save and just like that we see the image in the background and the text that is inside our image background is displayed nicely on top of it um here the way I display the image background was using absolute field position in order to be to to take the whole screen but I think the way I did it right now is also very nice now we can easily clear like a background color of our container because we don't have a background color there we don't need it all right so that's it with image background let's go ahead to our next task back to our task list after rendering the image background let's go ahead and start rendering the date and time UI with it in time oh very convenient because I don't need screenshots I can just show you how it actually looks here this is iOS 15 in in fact so it's a bit different from the end result but um video is that we have them time displayed and at the top of our screen above the time not below above a time we will have the date and also the lock icon so let me see the application and let's uh go there okay so um where we have this text hello world this is where we will write the time so for example I don't know 15 26 then we will duplicate this text to have another one but this time we need it above it above a Time and these time will be I think for example Friday 30th September uh all right and we also need the lock icon that displays like if the screen is locked or not for that uh we're gonna use uh some icons that are already provided by Expo so the icon name is going to be you only cons uh that we import from Expo Vector icons so above our text let's render our icon so unicorns the name is going to be um I'm gonna check in there here iOS lock closed iOS lock closed let's close this tag just to see the icon require model did I write it wrong most probably you only cons let's give it uh some a size because it needs the size like 20 and a color color white will work so refresh still doesn't work what's going on I'm gonna stop the server and start it again oh eighty percent of people are following along that's nice uh okay yes and let's run it on iOS yes it works and we see that I conveyor perfect um now let's put them into a container in order to be able to properly style and keep them close together but at the same time like give them some space between them so let's go ahead and do that into a view and uh we have to close this view after the time let's save now it's good and the next step is going to be to actually style this um this header the header of our page so we will start by giving the styles to our components for example this view will have the style s.heather uh the text here will have Style Styles dot date and this one will have Style Styles dot time all right now in our styles um object here let's go ahead and start defining the header style which is going to be an object that date Style and the time Style all right so starting with the time I think we can right away go ahead and increase the font size so font size is going to be around 50. font size how much I gave it 82 actually 82 for their font weight let's give it a 500 I think or even more like 600 or something wait a second let's see okay no for font weight is actually 700 or bold easier like this that's how it looks on iOS 16 nowadays I mean you can adjust and change the Styles and for the color uh the color is going to be a very like kind of a white but it's it has a tint of blue so for that reason let me go ahead and take it from uh from here this is the color that I'm interested in and let's paste it here all right that looks much better or better already so um with the time we're done let's do the same with our date for example the date will have the same color it will have a font size of probably 20. yes then it will have a font weight we can make it bold but I think it will look better if this one is not that actually bold um and what else what else and that's it probably we're gonna work with alignments in a moment now date yes I think it's good foreign now we want to put all the items in the center because as we can see the date starts from the beginning it doesn't look very good for that for our parent component header header here we're gonna say that we want to justify content Center and actually that's not justified content but align items it's always like trying one or another all right so that's good um container now I want to give some more spacing between the lock icon and the date so for that reason for the date I'm gonna say that it has a margin top of 20 and this will push uh the icon more to the top all right um with that being said like we are almost ready with everything um only the position is not right the position should be on the top so uh let's first of all think why it's in the middle because this header is inside our Styles container so the Styles container as we can see has a lime item Center and justify content also Center so let's go ahead and remove uh justify content Center because this is what makes it centered in the middle so if I remove it now our lock is on the top but the problem right now is that we do not see the lock icon as it is behind the notch uh there are a couple of ways to address this issue but the way I'm gonna do it is a bit tricky um so I'm gonna simply say that our header has a static height so for the height we're gonna say 250 and we're doing this because this will knowing and having a static height will give us the possibility to easier do some calculations during animations and we're gonna see that a bit later but uh it's still not visible why if I do a background color red we see that the header is actually quite long but all the items inside it are still aligned to the top so let's go ahead and beside align items Center that centers on horizontally let's also do justify content Center to Center them vertically as well in the center and with that being said now our header displays well without this background color and it's actually the same as we we have on iOS 16. all right so I think that's everything that they wanted to do here for our header um and we can move on to the next one yes that was everything you have uh the code Snippets here if you didn't manage to follow along or if you had some issues you can check what are the differences and fix the issues that you have in some cases so let's go back to our task list and the next task for us will be ui5 the ui5 is about our footer uh the footer I think it's kind of the same it's kind of the same here on iOS 15 uh but I don't know why it doesn't display the flashlight maybe because it's an uh simulator so that's why it doesn't display the flashlight but the way we're gonna do it we're gonna display a flashlight in the left corner uh camera icon in the right corner and the icons will have like this nice um transparent background Okay so uh let's go ahead in our application and after our header after our header here we're gonna have a notification list but after the notification list we're gonna have our footer so let's go ahead and do uh start with a view that will contain our field footer for the style I'm gonna do Styles dot footer right away and as I said we need two icons here uh one icon is uh uh okay give me a second that I can name is one is material Community icons so let's import material Community icons at the top from Vector icons material Community icons and whatever one is also from unicorns the first one the first one is from Material Community icons and has a name of Flash Flesh Light Flesh Light light come on flashlight for the size we're gonna give it 24 and for the color we're gonna simply give it white I don't close that one now it looks better color white let's close this icon like this and we see it here right in the middle all right let's go ahead and display the second one and then we're gonna think about positioning and styles and so on so the second one is from juanicons and the name is IOS camera iOS camera again with size I'm going to actually copy them because I'm too lazy size 24 and color white save all right now we see the camera there as well um the idea is that this icon should have like VM like a background a gray background as you can see here so for that reason uh what we're gonna do is we're gonna put them into a view both of them I mean each of them so view with a style Styles Dot icon and I put the first icon here and the same thing we do for the second icon it's gonna be a view with that and when we close it after the unicorns and like this now we should have like two views for the icons and inside of them the material Community icon and here unicorns but we have that let's go ahead and start styling it so what components did we add we added the footer uh we added their icon I think that's the only thing footer and icon right okay where do we start from where do we start from um let's I let's probably start with the icon because the icon is a bit easier to um to display so for example what we need is a background color there which is going to be a very dark um black color but we need some transparency so if we add six digits here as we have right now and then two more the last two digits will represent that will represent the transparency so if we do f f that's going to be full um fully visible and as we can see it's the same thing but if we're gonna do zero zero that's going to be fully transparent and we don't see it but if we do something in the middle for example 50 that's gonna be like semi-transparent as we can see there so that's what we were interested about in let's make it them a bit uh bigger so I'm gonna give it a width of 50. and also a height of 50 but instead of giving the height I can work with aspect ratio of one and this will automatically calculate the height to be equal to the width all right now we see that the icons are not centered so to Center we need two properties justify content analyze items similar how we did here in the header okay let's do that here now we're in the center and what else what else we need to make them round right uh let's do border radius border radius um also 15 the same as our weave and just like that our component our icons are looking really nice now let's go ahead and position them we need to uh display them in the same line not in separate lines so to do that we're gonna use flex Direction row and this will display them in the same row like this now um what else what else an easy way to yeah the next step is to render them at the bottom of the screen not on the top and an easy way to do that is to give margin Top Auto to this footer container margin top Autumn and by doing that um we are basically saying that footer should have maximum amount of margin on the top in order to uh and but but still visible in the apparent container so as we can see that pushed him all the way to the bottom now to work a bit with uh the actual how it is displayed and the sizes I'm gonna start with a background color just to see what we have what we are working with so if I do background color red we see that um the footer is simply as wide as our icons but the idea is to be the footer should be as wide as our screen so one way would be to give a weave 100 percent uh but a better approach I think is using a line itself and we say that it should stretch and why we're doing this basically um align items on the parent component of this footer parent component of this footer this is the footer parent component of this footer is this image background and it has a container so the container has a line item Center and this means that the items will be centered if items here would be stretch then uh like it would work automatically but because we wanted to align items in the center uh but actually I don't need that you know I can do stretch here and to have both the header and the footer stretched so in this case I don't need to give a line self stretch here because both of them should be stretched does it make sense I hope so uh all right all right all right um now let's let's work with a bit of of uh spacing for example [Music] um it's to um it doesn't have like a some Inner Space the footer and as we can see like our icons touch the border of the screen and also the footer so let's give some padding to the footer like 10. uh parting 10. but um as we can see the icon doesn't start so close to the right side of the screen it starts a bit in the middle so for that reason I'm gonna say putting vertical 10 but putting horizontal will be 30 padding horizontal 30. like this and now our flashlight looks a bit better here um the player um also for the same reason we gave um a specific height for our header we're gonna do the same for our footer in order to simplify our work when we're going to deal with animations so height 75 okay that shouldn't change a lot but now we know that the height is 75. okay um now positioning right again like when camera icon should be to the right so one way to do that is to tell uh our flexbox how should it justify the content we know that there is a Justified content Center and this will put all the items in the center as we can see here but what we are interested in is a space between so the flexbox will put all the space between the items so one item is on the left one item is on the right and with that being said I think we are done with our footer let me just double check if we have everything we don't need the red color here anymore and yeah I think we uh we are good to go with this footer as it is right now so that means that we are done with um we are done with the footer do you have any questions on the footer guys or on anything that we have done until this moment because the next step would be to working with Dynamic time so yeah let's see okay I watched her video and fell in love with what you do keep up a good work I'm watching beastial van thank you very much Edward it's really nice we're doing this kind of projects uh every Friday so make sure to subscribe and join us every Friday for the live streams build which extensions do you use to highlight the color in the editor um I don't remember the name but I have like a video specifically for my whole vs code setup where I also show you all the extensions that I'm using uh can you add the styles to the icon component itself um I would like to say that it's possible but most probably I tried that and something is not working properly and you are limited to some kind of styles so for example um probably alignment or border radius was not working I can give it a try but I think that's we we can look at Advance after restream oh Yousef said that he didn't know about the stretch so there's a new thing you learned today that's amazing love from India hello Brienne guys in a moment like we have three more tasks and then we're gonna get into the animations so that's exciting that's the exciting part uh I see that there are not a lot of questions so we can go ahead and start working on the next tasks all right so we are done with uh one two three four five the next step is we to work with a dynamic time but it is that at this moment the time that we're displaying here is uh hard-coded here in our display so it doesn't actually show the proper time and the date so uh in this small tutorial you're going to learn how to work with um with base.js library in order to work with times and display times in your application so for that let's go ahead and uh first of all install days.js in our project for that let's open at the terminal a new terminal and here let's go ahead and write npx Expo install this GS you'll have like this command here it's not days it's day sorry uh let's do day dodges all right it was installed successfully and the next step is to use this data.js in our application so first of all let's import let's import data.js here like this and where we're displaying for example the time let's go ahead and add curly brackets instead of that text in order to be able to access um like JavaScript and for example these days.js and let's call these days.js in order to get the current date and time it's not gonna display anything because uh data just doesn't return a string it returns a date object so we can do like I don't know two ISO string something like that just to see it so right away we see that that's quite a lot of things there but what we're what we can do with this data.js library and why I like it um in comparison with the JavaScript date Library like the JavaScript date object is that we can format and it's very easy to uh to format dates in the way you actually need it so for example for this one the format will be we need to display hour and minute so for the hour is HH then double dot mm for the minute so this will display the current date as we can see it's correct if you want to display the seconds you can do SS here check out where documentation for more information about how you can format now for the date we're going to do the same basically but we're gonna format it a bit differently so let's copy this from here let's put it here and let's format this date to display the name of the day of the week and the name of day of the week is going to be for this DDD then we have comma save we see already Friday um when we have DD for the day of the month and we have mmm for the name of the month so again like if like I don't remember these things you don't have to remember them you can go ahead and look in the documentation and uh to see like what all of these stand for and knowing them when you can mix them to display dates in the way you actually want for example if I do just mm this is going to display the month but in uh with numbers if I do mm with lower that's going to display 52 I think it's the I don't remember what time am but what we are interested is in this uh Friday 30th September all right that's good but the problem is that we are setting this when we uh we're we're displaying this time when we are opening the application now if I'm gonna wait and actually I've already waited a couple of minutes and I see that the current time is 15 free 50 free but it still displays 52 in the application so if I'm gonna restart the application yeah it's going to display 53 because it will take the current date when the application is rendered but that's not what we actually want to do and that's not how a clock Works a clock should automatically update like every second and display the most up-to-date like time so for that we're gonna do have to do a couple of changes in order to um to always update this timer how we can do that we have it here so okay let me um let me do it like this I'm gonna explain it every every single step so instead of taking the day like the current date inside the rendering part we're gonna save it into a state variable because a state variable we can update and whenever a state variable updates our user interface our UI is re-rendered to reflect the changes in the state so this way we can have a state variable for the current time and for that we're gonna need the use State Hook from react now in our inside our application before we are returning here let's go ahead and Define uh the state for our date set date for the setter equal use state now whenever we're working with use date we can provide a default value here so what's going to be the default value well it's going to be that days.js that gives us the current date right now instead of um now let's go ahead and tick this date our state variable called date and let's replace in where we are rendering here instead of this.js let's do date dot format and the same here date dot format now um it's gonna we didn't solve the problem this is only the first step but the good thing is that our date is being taken from the state and whenever the state variable will change our UI will re-render and it will reflect the changes of our date now how do we update the date in our state well we can have um a function that is being triggered like every second where if we're only displaying minutes it can also be triggered every minute and every minute it will update the state variable and then the state variable as I said will update the UI to have like this repeatable function that runs at every like at specific intervals like every minute every second and so on there is a function in JavaScript called set interval and set interval will help us to do that but um we also need to import the use effect hook because we need to start this uh we need to start this function we need to initiate the interval when the component mounts so using a use effect we can provide here a function and after the function if we provide an empty dependency array this use effect will be called when we uh start the component now we can use the set interval here that I was talking about set interval expects two things a callback function and then the number of milliseconds um that will Define our interval like how often should we run the function that we are sending here the function we're going to Define it here and for the second parameter of a set interval we need number of milliseconds so one second that's one thousand um milliseconds so if we send 1000 that's going to be one second and then we can multiply it by for example 10 that's going to be 10 seconds or 60 that's going to be one minute but I'm gonna do multiply by one just to see that this is one second now what should we do every second every second we should update this date uh State variable to reflect the most up-to-date uh the current date so we're gonna use this setter set date in our interval set date and the value that we're gonna send is going to be this this.js and whenever we call these days.js it returns us the most like current time time and date so by doing that we update the date state every single second and in order to be able to to see that in our user interface let's go ahead and where we're displaying the time let's also display the seconds and this will actually be will help us to visualize and see if it's actually working so I don't see what's the problem here all right here we have it it's it updates every single second so to to recap what uh is happening here um we are using a state variable for the current date and based on that current date we are displaying it on the screen now we need a way to update that current date every single like based on some interval like every second or every 10 seconds or every minute for that we are using a set interval function that helps us run a callback function every x amount of time every x amount of second milliseconds so every second here we are setting the date and updating it with the most current date and we are initializing this uh set interval when we um first render the application component because we it is inside this use effect the last thing here is uh to avoid memory leaks every time we set an interval we should also make sure to remove it to unset it because if we leave our this component application then we don't want this interval to still keep running because if it still keeps running with a memory leak and that's not good for your application so the way we can reset it our set interval will give us back the actual object for the interval so we can say interval equal to set interval and in a use effect if we return a function this function is going to be called when the component unmounts so this is where we clean up the component and clean up things that we initialize here and to clean up there is a global function that is automatically available clear interval and we're going to send this interval here just by doing that we make sure that every time our application and mounts we are actually stopping this function to repeat and to to run again and again now that we see that everything is working we can remove the seconds from here because I don't need them uh I can save and we can set like here like run this interval every second basically 1000 milliseconds multiplied by 60 uh seconds in a minute so run this every minute not second all right so with that being said I think that's everything when it comes to working with this Jazz and to um to display the current date and time on the screen using Uh custom formatting foreign let's see yes I think so yeah you stay to the fact yes perfect uh anyone has any questions related uh regarding the diesel Jazz and how we're working in the the current stuff feature sorry I'm mumbling for some reason map is only showing on the first 30 of my screen the bottom hop is blank let me recheck the background Style um yeah that might be a problem with background style um one way one thing that you could try is to say hmm for example if your screen is smaller and has a different shape and I will simulate that by saying that the container height is I don't know 400 pixels in that case like it might show you like this uh uh but no actually the image displays properly I was thinking to give like a resize mode to this image background resize mode the default is uh you can have contain and this will make sure that the background image is fully visible on the screen or you can have cover and this will make sure that the image covers them the container that it is displayed in and by default the resize mode is covers so that shouldn't be the problem so not sure why why but why that might happen for you shouldn't have a footer be more on the top um maybe maybe but I'm gonna stick with this just in order not to mess up the numbers when it comes to animations all right so guys are you managing to follow along everything good mm is me in it yes yeah Jason you can also check the um the code Snippets that I'm providing here in the project you can get this uh the URL of this page following like this page following the link in the description of this video at the assets.nodes.dev iOS Dash lock screen foreign can you use higher order components and write the same example um I I'm not sure if I understand what you're saying do do you want me to explain how higher were the components work or do you want me to do this with higher order components I don't know okay uh regarding the social media application from the master class um reach out to me on Discord and I'm gonna try to help you there not to um delay not to um how is it word I forgot to be focused on the application that we're gonna be that we're building today uh all right guys so uh that means that we are done with the dynamic time and the last step is with a notification flat list the notification flat list uh I was not play here we have it the notification a flat list actually the notification flat list has not play planning to explain like step by step but mostly give you the code just for us to move as uh faster to The Next Step which is going to be the animations and that is the exciting part and that's what uh I really want to do here um so let's go ahead and add the notification item component and for that we need to create a new file in our source components called notification item so let's go ahead in our project let's open the files and uh let's create first of all the source directory because we don't have it yet and I like to keep all the source file in the SRC directory so let's go ahead and click new folder SRC and here let's go and create another folder for our component now in this components folder I'm going to create a new file called notification how is it called notification list item or notification item dot GS alright so for this notification item dot GS I have prepared uh how we are displaying it so I'm gonna copy it from our task list if you're interested we can do together um how's it called them the flat list uh but yeah like the notification uh item simply renders the image of the application where the notification uh is from and then it renders the title and the subtitle and then were created at and that's it like it's a pretty simple component with some styling tool to make sure that it looks uh good also as we can see here the height of our container we have it defined here as notification height uh this way we're gonna need this notification height later in the video okay so um we have notifications we are done now let's go ahead and for the next file this is going to be the notifications list notification list component um make sure it's wait wait do it okay notification list let's copy the code first and in our component let's create a new file notifications list dot GS let's paste the code here and again the uh this component is pretty simple it renders a flat list with data the data is imported from the assets data notification and make sure that the relative path is correct because if you didn't create these directories where if your project structure looks a bit different then you'll have to update the relative path to the notifications and the notifications are coming from SS data notifications here and this is like an array with all the notifications that we have and for the renderer item for every item we are rendering uh the item that we created in the previous step now with all of this created we can go ahead in our app.js and let's import notification list no TV locations list from source components notification list let me check if it's the same name yes now let's render this list here where we are supposed to render an education list basically being between the header and the footer let's go ahead and render notification list like this and just by doing that we have our scrollable list with notifications everything looks good so far uh I would say it looks good but it looks basic so um in the next steps we're gonna go ahead and Implement some really nice animations but before that one thing that we can improve is whenever I scroll up the time remains on the top of the screen however in iOS this is uh this is different so whenever we scroll up notifications the time Scrolls up together with the notifications to accomplish this our flat list flat lists have a property called list header component so let's send it to this notifications list as list header component and here it expects a simple component so what we're gonna render there we're gonna render our header there so let's copy everything from here and paste them here so now the time serves as the list header component and by doing that when we scroll our time Scrolls together with our flat list just like that now it's a much better experience and it's very similar to how iOS is doing the last thing here in abdoches that we forgot to do before is to adjust the status bar because at the moment it displays with black color but if we say white here now the um uh status bar white come on should be oh it should be light yes light if the style is light Van van battery indicator and all the indicators in the status bar will display with white color foreign if you use react instead of rap native what is a good alternative for for the flat list I think in react um it's probably it's a simple deal like a scrollable div okay so um that means that we are actually done yeah render it in the application and move a header as a list header component for our notification list so that means that we are done with the UI part who one hour in and the user interface is finished awesome um so next part is exciting how are you doing guys are you managing to follow along uh with the user interface part let me do a poll real quick foreign it already looks so good um this is this is a project that I was uh doing on weekend when I said like today I don't want to work uh yeah like today I don't want to work so what should I do let's play a bit with animations and let's try to uh simulate or replicate the animations from uh from Apple and yeah like I I work like probably the whole day just to to make the animations but now I think it's going to be it's gonna go much uh faster and I'm gonna try to explain like step by step everything how it works hmm let's so I'm thinking how to get started um all right so let's go ahead and start our animation part and we're gonna start with uh A1 the first task from our list get started with animated here uh actually let me I need to do one more one extra step to commit everything here just to have like a possibility to get back and share with you the source code for the UI so UI here is done yep um I'm thinking to cut this video as a separate resource later on so let me quickly do um like a proper intro so in the previous part we have managed to build the user interface of our iOS lock screen iOS 16 lock screen now you can go ahead and download the source code from the description below of a user interface and in this video we're going to take it to a Next Level and we're going to work on the animations and the animations we will look where is it go go home and here I have IOS home by the end of this video our lock screen will look a bit different so the first thing that we see here at the bottom is the swipe up to open text that nicely animates uh to the top and also we're playing a bit with opacity to make it more visible then a very exciting part is actually the flat list animations so the flat list animations as we can see all the items are coming very nicely from the bottom uh we're playing with again like with opacity with translation translation and also with the scale of item to make it seem that it's coming from the from beneath the last item so when you scroll real far really fast it really really looks um looks cool also another simple and small animation is the way where uh hiding the footer here on this page so when we start scrolling as we can see the footer disappears and now we have a bit more space for our notification flat list and the same when we go all the way up our footer actually appears and we have a bit less space for the flat list but all of these are very small there is no like jump to uh um to a new size and so on and the last thing that we're gonna do uh is we're gonna hide all the items or all the flat list when we swipe down in order to have a very clean user interface here and when we swipe up the items appear back so with that being said we are ready to get started and yeah let's let's get it going all right so let me put this one here like this and where is our code all right here we have it and the last step is our guide here okay so uh the first task from our uh all right so the first task is this get started with reanimated and we're gonna start by uh installing renimated in our Expo project you can have a look at the documentations of reanimated here and actually I'm going to open it up because we're gonna look through the documentation from time to time um and then we have an installation guide specifically for uh Expo so go ahead and open it up but the only thing that we have to do is to use npx Expo install react native or animated so let's go um in our project and start with that I'm gonna open a terminal and let's do yeah npx Expo install react native reanimated enter I'm gonna have to switch back to our project no come on home and iOS lock screen okay so after it is installed we see I did five packages that's good uh the next step is to add to change a bit with bubble.config file and what we need is these plugins react native animated plugin so let's copy this actually let's copy the whole um babel.config if this is a new project but if you have like made already changes it's better just to copy the plugins from here let's go in our application we find in the root directory the Bible config and after the presets we can paste the plugins now after this done we should restart our development server and we should start it again and also clear the cache so let's go ahead and stop our development server using Ctrl C or command C and then we're gonna do npm start then dash dash space dash dash clear this will send them a clear fact to our Expo and it will make sure to clear the cache and and in order to include the newly added um reanimated plugin okay so let's press I to open it on iOS I'm gonna open it again just to make sure that it's actually the latest version all right now we see it loading it means that yeah it's trying to download the new update okay if everything is running without any problems then good job that's it uh we can move on to the next step because our animated is installed and it's got correctly set up with a plugin okay let's go back to the task list and let's go to the next topic the next topic is about layout animations layout animations are a very easy way to animate some of your um some of your yeah like layout components and the way it works it works we can Define some basic animations for when the component is entering the screen and some basic animations when the component is leaving the screen and this is very helpful in situations like where we don't want some very Advanced animations we just want to make our application look a bit better and we can just add a couple of these animations like sliding that will come from the top or with opacity like fade in and Fade Out this like simple animations that work really well in them in of applications so let's have a look at how we can work with these layout animations okay um give me one second okay okay let's go ahead in our app.js and what do we have to do is first we have to import um the animated reanimated Library so we're gonna import like this animated from react reanimated besides uh via animated Library we also want to import some helper animations and one of them is the slide in down and also slide in up these are animations that will help us move like some containers up and down when they appear on the screen so to work with them let's go ahead and check like one layout component that we want to animate for example the to appear from the bottom to the top and the clock we can animate to appear from the top to the bottom to do that we need to change from a simple and normal view to an animated view so I just I will just simply say animated Dot View and this is a view that already can be animated make sure that the closing tag is also animated.view so besides the properties of a view like style and so on the animated can also the animated View also expects a couple of other properties like entering and the entering will specify what animation to use what layout animation to use when this component mounts when this component is added so in the entering I can do sliding down and as you can see like it's really hard probably to see but when the application mounts our footer comes from the bottom to the top um it shows refreshing and probably you don't see it properly but let me let's check and let's try to do the same um layout animation for our header so for our header again instead of you we have an animated Dot View and for entering we have slide in up so it slides in from the top position yes and you saw that it automatically appears from the top to the bottom there is a lot of this type of animations and you can animate both by entering and where exiting uh part and this is helpful like for example when you have like some items that you add to a list you can animate how they appear in the list like should we fade in and also hover items behave when you remove them from the user interface with the exiting in our case we don't need any exiting animations and for more details to check like what other layout animations there are you can check the documentation and here probably you can see read more yeah yeah here are all the animations fade in fade in right fading left fading up down and so on there are also some modifiers where you can adjust and fine-tune the animations the way you actually want them to look but I'm pretty happy with how they perform right now and here in this example we show you how animation look on the screen like fading up fading down yeah these are the fade in when there is Bounce It can bounce in bounce out and so on so there are a lot of like this really easy animations that you can use out of a box from reanimated flip trash I'm Gonna Leave You here because you can have a look at all of these animations in your application over here in this documentation light speed okay this looks really nice so we play out the animations I hope it's clear now the next step is to to work with some custom animations but before that let me go ahead and uh commit everything layout animations perfect now as I said the next step is to start working at some custom animations because not always we will be happy with layout animations and sometimes we need more freedom and adjustments to uh to run these animations for example four of us swipe up uh label that we saw in the demo at the beginning that label is like a custom animations and we should implement it ourselves so for that let's go ahead and first uh create this component that will display a simple swipe up to open label in our application so for that in our source components let's create a new file swipe up oh swipe up to open rename swipe up come on to open dodgesk come on okay here let's uh generate a blank component and what will we have in the swipe up to open a simple text we don't even need the view we only need the text and it should be a swipe up to open okay I already see that I made a mistake to the file name two and the same for the name of a component but that's not a big issue I don't need the view okay um now let's uh style a bit with this this text and I'm gonna style it right away here uh but to style it probably I first need to display it on the screen to be able to see it so let's go in the app.js let's import this newly added component import swipe up to open from components and we're gonna render it between our two icons between the flashlight icon and between the iOS camera icon here let's do swipe up to open okay we have it there that's okay for the footer checking footer footer okay so let's go to the swipe up to open and um style it so first of all we need a color white then we need to increase a bit the font weight font weight 600. uh what else what else we need to make sure that it is aligned at the bottom so I will use a line itself Flex end to align it at the bottom yes there it looks very nice like almost at the end here flex and and what else oh uh I can play around with some lit letter spacing to increase the space between the letters so it will look a bit better swipe up to open perfect hmm let me go ahead in the updoches and actually use them the recommendation from people to add a bit more space to the footer because now it's too close to the bottom and okay okay okay okay hmm margin bottom margin bottom 10. okay yeah okay that's fine so swipe up to open we have a text here now our job is to animate this text that's gonna be a bit complicated to to properly explain but um all right all right all right all right so uh first of all we have to import animated from react not native or anime not track native attract native reanimated like this now because our text will be animated we can change it to an animated dot text in order to be able to animate this style and to animate this um to directly animate the style of a component we will use actually animated should not be destructured it should be like this um and as I said in order to animate the style directly the style of one component we will use a hook imported from react native ranimated called use animated Style use animated style now in our swipe to open component let's go ahead and Define the animated style animated Style equal use animated Style this hook expects um expects a function that will return our animated styles so I'm gonna add some Styles in a moment here but first let's go ahead and send these animated styles to the animated text in the style here and for that we need to put the existing um static styles in an array and beef after closing these static Styles we can send the animated style like this now as I said here in this object that we um we are returning in the use animated style we can use all them uh properties that we are styling our components for example we can say color can be red right and now our color is red bear but what are we interested in is to move this text to the top yeah actually to move this text to the top so how we're gonna do that we're gonna work with uh the transform property with transform style that it helps us move and scale um items on the screen so how do we want to transform it we want to translate our item on the Y and this will move up and down the item for example if I do 50 here uh I don't see it but if I do minus 50 it's all the way up there so if it's zero it's where it's supposed to be if it's -10 it will be a bit of a bottom no it's actually to the top and if it's 10 it's to the bottom so negative values move a item closer to the top and positive translate um values move a item to the bottom lower on the screen but um this animated style right now moves uh the item right away with without animating it properly in order to say that we want to move towards that direction not to jump to that direction we can use some hooks from react native animated and one of that is with timing and this with timing will help us like smoothly move the item towards that direction and um we're gonna do probably -10 here so as a software probably probably didn't see it um very clearly but our item slowly moved to the top when we put it there in order for us to be able to see uh to see this in action we can use another Hook from reanimated with repeat that helps us repeat the same animation over and over so let's wrap this with timing animation inside them with repeat the first one uh is the animation that we want to do the second parameter is the number of repetitions for example three times or five times we want to repeat this but if we provide minus one that's gonna repeat the animation um unlimited number of times like this and the last parameter is whoever we want to reverse this animation so it will go to the Translate Y minus 10 then it will go back to zero and then to -10 so if we send through here it's going to try to reverse the animation so with that being said uh uh let's see nothing is happening I mean minus 15. yeah something is happening definitely uh let me try to open it again Expo go iOS lock screen foreign [Music] animation and it only starts when I update it like this okay with repeat now our component our swipe up to open moves from 0 to -15 then it moves back to zero and this way infinite number of times because because we have minus one here in the width repeat what we want to do is we want to move it up keep it there for like one second and after that it should disappear and then again from the bottom up it should stop there for one second and then disappear so as you can see we have multiple steps the first step is to move up 15 pixels and we have it here like with timing 15. this will help us move up um 15 pixels now we want to stop there and wait um stop there and wait a couple of seconds to display the text on the top so as I said we have multi-step and animation so we can use another hook called with sequence that will help us put one animation after another in a sequence and our sequence will be um I will wrap my with timing inside the weave sequence because this is the animation like the steps that we want to repeat um so with timing -15 uh like that probably I'm gonna try to do it like this to make a bit more sense if I'm gonna okay it's gonna help me in a moment but um in the web sequence at the moment we have only one animation which is not how we've sequence work works because we need multiple animations to sequence them to uh to run one after an hour so as I said we are moving to the um how to do it in order not to weave timing so let's uh let's do again like with timing -15 and the first animation will move to -15 and the second one will keep it there like at -15 and the thing is that now we cannot uh reverse our repeat when you have like a sequence so I'm gonna remove this true from here and yes now our sequence is like this we move to -15 and when we stay there and then we should go back to zero so with timing go to zero with time and go to zero but when it jumps back here so we need to slowly go there so if I do it like that a bit weird um um well the weird parties that we have here 2 minus 15 like go to -15 and then stay to minus 15. what I can do to improve this a bit is basically what I wanted to do here is to stop at the top for one second and to stop at the top of one second and then move to the bottom back here instead of doing this two times I can use another hook called with delay that will help us put a some delay before running another animation so before going back to zero we should put out with delay how much we've delay with delay and the first parameter is the delay so the delay will be one and a half seconds and then move to the position zero so now oh okay now I think it looks good to zero it's still not very smooth wait a second oh now after refreshing it's actually what I I expect it to be can you see it like it moves to the top um yeah let me explain this sequence one more time because I'm pretty sure it's quite confusing so uh the first step in our sequence is to move our swipe up to open to the top um 15 pixels this is what this with timing 15 is doing it slowly gradually moves the item until it reaches -15 uh pixels to the top after that we say uh wait because we have this delay wait one second there on the top and after that go back to zero but again with timing so don't jump but smoothly go back to zero then I don't know why I have here with 15. I think I don't need it but no in that case it will jump so let's keep it there perfect so the movement is actually um working as we expect now now we need to play around a bit with the opacity because this swipe up to open when it moves down it should not be visible so before that give me one second I want to check the wave sequence documentation animations animations with sequence does it try to run them in Reverse World there no it doesn't have any additional values so I was thinking that yeah all right so the same way we worked with that transform to animate it the same way we're gonna work with the opacity so after we finish the transform let's animate the opacity of our component because if we set opacity to zero We're not gonna see the item but what we are want to do with the opacity is we want um yeah let's think first step is to move up uh to move up 15 pixels I mean let's try to think when should we start um fading out we should start fading out after the delay finished so before we start moving to position zero right so for that reason we're gonna have a with delay and how much delay it's 1.5 seconds and after that using with timing I want to fade out our text so the opacity will go to zero now if I refresh I don't see it um if I do if I don't know 5 000 just to delay it a bit more uh probably um I think yeah it went to opacity zero now it doesn't want to come back Expo go iOS lock screen what's going on there foreign foreign alright so let's uh let's do it like this I need actually two steps one step to fade out and one step to fade back in So for that reason I'm gonna need the weave sequence a sequence of animations where the first one is uh going to zero fading out after we finished the first step then I want to also with a small delay of 300 milliseconds the same way the same amount of time taken by this animation we want to with timing we want to move it back to opacity one and it automatically faded away as you can see but after one once it doesn't repeat so we need to set that this sequence should repeat um infinite number of times so minus one here and then we should be good to go okay it automatically uh fades in and moves to the top Waits there one and a half seconds and then it fades out and it appears from the bottom again perfect I think it looks really nice um guys what do you think is it clear probably I will need a bit more time to um to get used to explaining these animations to you um next time I'll try to use some drawings to um to make it a bit more clear but so far is this a small custom animations that we are animating the position and also opacity is it clear or do we want to stop all right let's ask the community because if this one is not clear no actually it should be good yes 100 of people said yes okay then probably I thought that it's a bit more complicated than it in fact is so the complicated part like and the confusing part for beginners in my opinion would be like all the hooks that we are using uh with repeat these are not hooks actually these are animation functions with repeat with sequence with timing with delay and so on but like when you take them separately one by one like with timing that means that we are not jumping to that position but we are slowly moving to that position then with delay it's also quite clear like wait sometime and then run the animation and when with sequence is a way to group multiple steps uh together if if our animation is a bit more complex and we need multiple steps like in this case we need the first step is to move up the second step is to stay there and the event to move back down uh just this second with timing in the translate one this one with delete a bit unclear uh is it unclear because we have like this with delay um this is helping us move back to position zero uh and it's clear like when we comment out the opacity how it works because with opacity it looks like some some magic but without opacity we see that we also use the animation to move it back down but when we uncomment when uh the opacity at the point where we're moving down we calculated it in a way to um uh to to have like the opacity zero and this is very important like when you have uh when you're animating two properties here like translate and opacity if they depend on each other and we should work in at the same time it's really important the values that you're using here because for example if here you decided to do 2000 like with delay then your animation will start slowly to become worse and worse as you can see here like it's very unpredictable like every time it runs it's every time is different so it's really important like to to have a right amount of delays and right amount of timing for the animations so the two of them sync up and what do I mean here like first of all yeah like we're going here and this um the timing animation they also have a duration so you can change the duration here for example if you want this to take a bit more you can change the duration here the default one is 300 by the way so let me actually add this duration 300 this is default so it's already there I'm just adding it here so in the first [Music] um let me try let let's try to play uh play with this and I'm gonna try to to draw some something for you I'm very terrible at drawing but let's see what we we can achieve so where is it oh here it should be what's happening hmm wait a second I'm gonna make sure that everyone gets it foreign and I'm gonna also have um the code here so that you can see it properly like this where where to put this one whoo how to explain it with drawing basically first of all we have a timeline right the animation starts here and it progress there and it's infinite so um as we said here we want to translate the position to -15 in the next 300 millisec 300 milliseconds so the first 300 milliseconds this is 300. we want to uh Translate yeah like with uh uh with green we're gonna have position so uh Tran slate so in the first 300 milliseconds we want to translate the position of our text like this then we have a delay of 1.5 seconds so in the next 1.5 seconds 1500 we the position will translate we will not change anything because we simply delay so it's going to be all the way until there come on such terrible at drawing [Music] okay now after that delay finished oh I didn't show it here after the delay finished we go back to zero in the next 300 milliseconds so in the next 300 milliseconds we go back to zero with our position hmm perfect now let's look at the opacity what should do so um well when the component let's when the component goes up here we don't need we need opacity one so opacity here should I do so opacity starts at one here opacity is one such terrible drawing and when it moves up it should be at one then um where as long as it stays up it should always be a one but when it moves like during this part the opacity should already be zero because we don't want to see the label moving down we should see delay in the same position and when it opacity is zero the label should move down so in fact like we want to move the opacity starting from here all the way way till here so that whenever we whenever we start the movement down we don't want to see the movement down and after that like eight repeats infinite number of times like then from down it goes back up it waits one second it goes back down and the same goes for the opacity um we've delayed 300 that means that we delay 300 on the Zero probably yeah it's all the way till here this is the 300 and at 300 we move it back to uh to one the opacity in the next 300 milliseconds this is also 300. so this is how it works I'm not sure if I helped you or confused it even more but yeah and uh yeah it's again like while it's up it's gonna be like this then it's gonna move to zero then it's gonna wait until here then again up and so on okay so we're getting there we're getting there as you can see uh 84 of our community said that it is clear so we can move on let me see a couple of comments to see if everything is all right a bit unclear is it better now after uh drawing timing needs some adjustment timing needs some adjustment yeah as I said now that you have this diagram there you can play around with the timing um and I don't know wait a bit more while it is behind for example let's see how we would design to have a a quite a longer pose pause between the animations so the pose oh God okay the pose is um should be somewhere this is the pose right between animations so this pose should be increased from 300 to a bit more so that means that for our opacity which is uh very red we should increase this segment from 300 to I don't know 1000. so and the same with this part um and the same with this part of our translation animation the one that goes to zero should happen not in 300 milliseconds but should happen in one second to have more time between animations So based on our graph it's clear it's a bit more clear for us how to do these adjustments and let's see if that's actually the case so as I said where is my mouse come on here it is so as we said like we want to increase the for them timing we want to increase the segment that goes back to zero from 300 to more so this is the segment that goes down to zero so let's increase it from 300 to one second or even more like we can do uh one like this and when it comes to the opacity we should increase the segment that delays that weight right so with Delay from 300 to one second and a half let's see right now if that actually worked we should have like a more delay yes I think it actually worked and I can even increase it to three seconds to have delay between the animations one two three and we see it again one two three and we see it again I'm interested if it sinks because if if we mess up with these numbers like it as I said before like it will gradually Decay and mess up it even bigger so just wait a couple of iterations and see if you nailed it down in it the same animation every single time I hope it is it looks beautiful I just can't stop looking at it foreign list animation materials is saying all clear thank you looking forward to the kickoff of a course on Monday yes I'm also preparing for that uh this Monday we get started with all the students that joined and enrolled in our premium full Stack mobile development queries so I'm excited about that um to get started to get to know the all the new students that joined the course and tool to start working with them closer to make sure that they are achieving their goals by then thank you Kathleen where are you located I am currently in Spain oh okay Vadim good luck explaining the next animation so let me do another intro real quick for our flat list animations probably I work for okay however is saying I work for Kanye West and he wanted a few uh we watched a few of your videos you should Hope on a call with us no joke okay foreign native versus flutter Soria it's it's too complicated topic to to get into it right now so and of course like short answer I'm gonna be biased and I'm gonna say you ragnative is better because I'm using Rec native day to day so yeah but if like for a longer answer like I can give you a lot of arguments why that's that's the case but that doesn't mean that flutter is bad at the same time so okay so let me let's get back to our coding like these and before before we get started let's actually have a look at uh the animation that we are trying to to implement to try to see uh how it actually behaves and if you have an iOS in your hand uh and if you have a iOS 16 but maybe even like 15 have the same animations for this flat list uh open the lock screen and try to swipe through the notifications in order to see what's happening like what's actually happening there uh to uh to in terms of yeah like what do you see um I'm gonna open our Expo goal the previous project let me make it a little bit bigger alright guys so in this video we're gonna learn how to animate a flat list using granny rack native reanimated so let's have a look at what specifically we will want to animate vir um we're gonna work based on the lock screen of iOS 16 and here we have this beautiful uh flat list here what we want to do is to animate the way our items are moving down because at the moment it's quite boring like they are like a plane um plane like moving up and up and down uh give me a second to open them uh home this one what we want to do is to have like something more similar to this where the items in the flat list they seem to appear from behind instead of coming from the bottom of a screen it's um this animation is inspired by actually flat list by actual list of notifications from IOS 16 and we're gonna try to replicate it with react native and reanimated um let's have a look at what actually happens and what uh what we will have to do here so as you can see uh where items we are playing with there first of all with their size because you see that the last item here is a bit smaller than the rest of items that we see on the screen and it slowly slowly grows until it reaches its position and when it reaches its position now the animation for the item is finished and we expect the next one to come into the view besides the scale we also play with the opacity as you can see the more I scroll down then least I can see the item in the back and when the animation finishes I cannot see that item at all the same way when I scroll up the opacity of item increases until it reaches one and the last step is to um to simulate this feeling of items coming from the back instead of from the bottom and to do that we're gonna play with the translation of the last item and we're gonna move it with the same speed as the scroll speed in order for invite them to slowly come back and into the view I think it will make more sense when we actually implement it and we're going to do it step by step so don't worry about that besides these cool animations of things appearing and moving out of a screen we're gonna also animate the footer so as you can see when the list is all the way up the footer is displayed here and when we start scrolling a bit the footer disappears to make more room for our flat list and yeah like the same like when these things happen everything is also smooth we are not jumping to like a bigger size but we are slowly animating up and down the same goes when we scroll up our footer appears slowly and it leaves a bit less space for our flat list and lastly in this video we're gonna learn how to dismiss a flat list and move all the items to uh below the screen in order not to see them and to have a clear screen like this and whenever we swipe up we see them back on the screen so I'm pretty excited about that and with that being said let's get started uh okay so we have a plan we kind of understand what we have to do let's take it again like step by step and feature by feature animation by animation and let's animate them where is my code editor uh here it should be all right and my Google Chrome is here no is here before we start let me quickly commit everything okay now we are ready so in the flat list animations I don't have a lot of Snippets but we're going to do it step by step together so the first thing is let's work on the hiding and showing the footer whenever we scroll the list whenever we scroll the list we need to hide and show the footer so how we're gonna do that um as you can see here the logic behind when the footer should be visible and when the footer is not visible depends on how much did we scroll in the list because if we didn't scroll at all and we are all the way up the scroll position is zero then the footer should be visible when we start scrolling and we pass like a fresh very small threshold of like I know five pixels then our footer should be invisible and we should smoothly go from through the items all right so um as I said we need to work with the scroll position for that let's open our notification list let's open our notification list and here a flat list can expect can and here in the flat list we can provide our own scroll event and we can provide a function that will be called every time a flat list Scrolls that function uh we're going to Define using a helper function a helper Hook from animated so let's import animated and red native or animated and the hook that we're interested in is where uh use scroll handle animated scroll handle use animated scroll Handler so using this hook we can Define our Handler that will handle the scroll events Handler equal use animated scroll scroll Handler and here we need to provide uh an object an object that can receive a couple of properties and all of these properties are the events that can happen while we are scrolling one of these events is for example on scroll and where on scroll event um let's do event this on scroll event I can console log the problem is that it has a lot of things so I'm gonna only console log uh one property of this event and that property is called content offset content offset dot y content offset is the value representing how much our content has been scrolled basically the scroll position in our list so now if I send the Handler to the on scroll event if I open up our console the terminal to see the Vlogs and if I start scrolling nothing happens because I oh because I'm running another project let me quickly open back our iOS home yeah my bad let's open iOS this one and if I start scrolling type error these props on scroll is not a function okay these props on scroll is not the function use animated scroll Handler Handler uh oh yeah because of a flat list should be an animated flat list animated dot flat list okay now if I'm gonna scroll I already see how many pixels we scrolled to the bottom so as you can see if I scroll more and more it displays um the amount of yeah amount of scroll that we did if I go back up we get to the zero interesting part is that if we pull down we can get to the minus content offset because actually that's what it happens we move in there in a different direction foreign okay okay so hmm now idea is that uh based on this scroll event hmm uh if or let's um let's grab this into a variable like this I don't need to console log it anymore and we're gonna say if Y is uh less than 10 pixels that means that we're on the top of the screen so here we should have the footer opened however if we Y is is more than 10 pixels we should close the footer uh the problem is that the footer item is not here the footer item is in the parent component in the app.js if you remember here parent component footer this is the footer while I'm here I will remove actually the sliding animation of a header because um every time it updates it runs the slide animation so the way to avoid this would be to memorize this component not to have to re-render it every time our component re-renders so for that reason I'm gonna simply um or should I show you how to change it maybe maybe in the end of a video because I don't I still I want to focus on that on the footer um all right so as I said what we have to do when we want to hide the footer is to move this footer out of the way and to leave a bit more space for our um for our list if you remember we don't want this to to be like to jump from one position to another we want it to be like very smooth from one to an hour so in order to have like values that will help us um run smooth animations on the UI user inter um I remember that I forgot to show you something back there yeah I'm gonna go back to what I was explaining with a footer but what I want to explain here with an on scroll event is is this on scroll event handler will be called as many times as possible uh whenever we scroll through the through the feed but the thing is that we don't need this on scroll event to be run more than 60 times per second in order to have like a 60 FPS animations anything more than 60 times per second calling this Handler will not improve anything because most of the phones have a 60 FPS refresh rate so in order to um limit how many times this on scroll event is being called per a second the maximum time we can provide their uh throttle scroll event throttle and scroll event throttle will receive the foreign will receive 1000 divided by 16 so that's actually uh no 1 000 divided by 60 because we want 60 frames every second so that's actually 16. if I'm not mistaken and just by doing that we make sure to throttle and not unnecessarily call this Handler on on our flat list okay with that being said we can move on uh to the application because here we are working with um footer and we need to think about how we should drive animation for the footer to make it disappear and to make it leave more room for our uh flat list as I said uh we don't want this to be jumpy so we need a value that will drive this animation in a smooth way that value uh we're gonna use them use shared value from react native animated and this use Share value allows us to Define um to define a value that will be on the UI thread and this is going to be much more performant for driving animations Okay so um yeah we're gonna first say we're going to define a value footer visibility visibility use shared value of 1. footer visibility and the footer visibility will be a value that goes from zero to one and based on this footer visibility we're gonna both uh work with opacity and also work with moving it down to give space for the flat list so that's why we have one single value that is going to drive two separate animations and that's why we have it from zero to one because later on we can uh use some math multiplication to get the value that we actually want mapping from one range to another all right so with this footer visibility I can go ahead and Define a style for our footer so animated footer animated footer style equal use animated use animated style this is the function that we are interested in use animated style and here will be the object for our animated Style so what as I said what do we want to animate we want to first of all animate the opacity so the opacity we're gonna send the because opacity is also a value from 0 to 1 we can use directly the footer visibility dot value so when footer visibility is one our opacity is one and vitam is fully visible on the screen and when it is zero our item will not be visible on the screen so let's see if it works um something is not working there use shared value where where is it coming from this is coming from here no it's image background source footer visibility come on is it coming from here no is it coming from here use animated style opacity oh use animated style um in case we are working with with shared values they use animated style should be a function that returns an object not directly an object like this and now it's gonna work but we need to provide this animated footer style to our footer component where is it here animated view it is already an animated view so we simply have to add the second style here animated footer Style at the moment we don't see anything changing but uh based on the value of this footer visibility our footer will appear or disappear so if I put here 0.5 or 0.1 we will barely see it yes we barely see it but we instead of doing it manually here we need to drive this animation when we start moving down so we need this footer visibility property we need to have access to it from our notification list so let's send the footer visibility there through props and in the notification list we're gonna receive the footer visibility here and uh when here we should have a footer open that means that footer visibility dot value value will be equal to one and here the footer visibility dot value will be equal to zero because we need to close it so let's see if it will work it's not going to be animated yet but let's see if at least the logic is there so I scroll down and the footer disappears I scroll back up the footer appears so that means that we successfully mapped an animation to the scroll event of our uh flat list now the last step is to properly animate it because we don't want to jump from visible to not visible we want it to smooth smoothly appear so instead of setting a footer visibility right away to one we can use the width timing to have a slow progression to the visibility and also slow Fade Out when it disappears let's import this with timing from redneck and reanimated with timing and now as you can see it slowly disappears and slowly appears in order to to see it better we can increase the duration of this to one second and then we're gonna be able to see it properly so if I scroll it slowly appears why it's disappearing so fast oh duration one I said duration 1000. slowly disappearing slowly appearing okay now that you see it I'm gonna remove this duration because I think it looks well with the default duration of 300 milliseconds okay it disappears this way it appears perfect uh The Next Step the next step is to besides disappearing besides working with opacity as I said we need to when it's not visible we need to give this available space to our flat list to give this to the flat list we can work with negative margins so for example if I'm gonna say margin margin top is -10 I should double check it on Android to see if margin negative margin works then it moves the elements on the top will have a bit more space and if I'm gonna do margin top 50 then as you can see we almost have a space we remember that our footer has the height of 75 and also margin bottom 10 so probably 85. minus 85 let's double check if that's actually true yes if I put 75 we see very still a little bit of space available there and if I put 85 it right where it should be the problem right now that when it appears we do not give back this space to the footer and the footer is displayed on top of a list so this value should be zero when footer visibility when footer is visible and it should be -1885 when footer is invisible so um for that we can use a interpolate function to map from one range to another and as I said the one range that we are mapping to with oh I interpolate uh the first one is the value that we want to uh use to drive this internal interpolation the value will be the footer visibility.value then we have the input range and then we have output range the input range is what is the range of this footer visibility it's from zero to one as we said so 0 to 1. now the output range is what are the values that we want to map to so when footer visibility is zero our margin top should be -84 85 because we need to give that space to um to the flat list but when the footer visibility is one we want margin top to be zero and just like that if I'm gonna scroll down we see how it smoothly gives back the space and it's dry is driven by the same animation uh footer visibility so if a notification here we're gonna go back to the I'm gonna do Ctrl Z because it's driven by the same shared value both of them will move basically in the same Rhythm like both of them opacity and them you see it's very slow and if I go to top it's very slow both of them because it's 3 000 here I'm gonna remove it and we can see it how cool and snappy it is at the moment boom boom boom boom okay okay no um I think we are done with hiding and showing the footer uh for the visibility footer margin top yup now hide show the notification list or to animate the last visible items which one should we do first to hide and show or to animate the last visible item let's start probably with hide and show because this might be a bit easier for us yeah when we hide and show we will work only with one property which is going to be the translation let me quickly animated footer footer like that now the next step would be whenever we scroll down we want to hide the list uh you might think that hiding the list is moving the whole flat list below and veto is the first step that I tried when implementing this animation because this is the easiest way we take the whole flat list and we with some animated style we move it out of a screen but in that situation our animation like all our items will move with the same speed so this is not exactly what iOS is doing because if we look here When I close down all items move with different speeds I'm not sure if you understand what I'm saying most probably um yeah it doesn't move the whole flat list it moves individual items and as you can see like yeah like we move with different speed to to create this effect of uh appearing so how we're gonna do that we're gonna do that by animating each individual flat list item instead of animating the whole flat list at the same time so we're gonna go in from the notification list to the notification item and here is where we're gonna start working with animating this item to move out of the screen whenever we scroll scroll all the way up to hide them to hide these items so uh what will we need we will need animated from react or enemy native or animated we will definitely need animated Styles so use animated Style uh what else we will most probably need interpolate um okay probably that's that's everything hmm okay foreign so let's go ahead and Define the styles or animated styles animated Style equal use animated style and here let's define the function that will return our object so it will simply return an object and here what will we animate we will animate the position of every single individual item so for that we're gonna work with transform we transform here let's send an object and the yeah we're gonna translate them on uh why so if we translate them like I don't know negative 100 that means that we will all move down so let's go ahead and give this animated style to the first view but for that we need to make it an animated View and the style here perfect uh if I do 100 yes I think it should be positive yeah and it slowly should go down down like this all of them I can do here with timing um 1000 and duration three seconds just for you to see it and let's go ahead and do it like that where are we with timing foreign we are moving but at the same time we are moving all with the same speed um moving with the same speed is not the biggest issue the biggest issue is that we need to um trigger this movement whenever we scroll down and we uh whenever we scroll down and we um yeah like how is it called like scroll down and I don't leave uh the screen alone take your finger out of the screen and when that happens we should move all the items down we are in the notification item so all the scroll events are happening in the notification list so let's go ahead here in the notification list and the same way as we worked with a visibility like footer visibility value that goes from zero to one gradually the same way we're gonna have a visibility for our um for our flat list so list visibility is going to be equal to use shared value and it's gonna start with one it's going to be visible now let's go ahead and send this list visibility to all our notification items so list visibility equal list visibility we should not forget to import your shareware from reanimated and in the notification item let's go ahead and receive here list the the ability now with this list visibility I can um yeah with this list visibility I can drive the translation of every item and the translation of item because list visibility is a value from zero to one we need to remap it to a value from 0 to 500. so for that we're going to use a interpolate we're going to interpolate the list visibility.value value the input range as I said is 0 to 1 and the output range so when list visibility is zero the translation should be 500 at least and when list visibility is one that means that list is visible the translation should be zero save okay it's there now let's change from the notification list item let's change this list visibility to zero and one depending on where we [Music] um where we scroll the list because if I do 0 right now nothing changes there but if I refresh it's there yes it's all the way down okay let's bring them back so where we're gonna do all of these checks we're gonna do these checks um also in this use animated scroll Handler but instead of doing them in their own scroll event we're gonna do them in other events called on begin drag this is going to be an event that is going to be triggered when we start dragging but to hide it we need their own and drag to see where we ended so uh it this event also has like this uh content offset why so when we end the drag motion if then event content offset is less than zero that means that we are dragging in the opposite direction if it's less than zero then what we want to do is we want to change the visibility visibility list visibility dot value is going to be equal to probably with timing to zero we want release to be hidden because we we let the finger outside like when it is zero and it actually works but it doesn't come back we should bring it back when we begin scrolling so when we begin scrolling uh we showed probably do visibility list visibility kind of the same two one but I'm gonna do that only if the list is invisible so only if list visibility.value is equal to zero or is less than one if it's not visible then make sure that it is visible so now if I'm gonna scroll down it's gonna disappear from the screen if I scroll up it's gonna appear on the screen right away in a very smooth way besides the with timing there are other ways of running animations and where is this with spring function that simulates a spring animation so let's change them least visibility to work based on the spring and this way you're gonna see I don't know if you'll enjoy it but it will move a bit differently oh yeah we can see there on the top leg oh but it's it moves up and then slowly comes into the place just like that okay but as I said we are really not that interested in having all the items move with the same speed because at the moment they all kind of move with the same speed right what we're interested in the items on the top should move with a higher speed than the items on the bottom because they have a longer distance to travel oh okay here we're gonna work a bit with foreign we're gonna draw because it's gonna be easier for me to explain here we have it so we have there our list and let me actually draw it so here we have our phone and we have our items come on duplicate I'm not gonna be too perfectionist I'm gonna do it like this thank you and actually it goes all the way below the screen like this okay so every item what we are doing right now is that every item will move 500 pixels below so the first item the first item will move 500 pixels below so it will go here the second one will move 500 pixels below and it will move here the third one again and so on uh every single item will move the same amount of distance on the screen and when an item moves the same amount of distance in the same amount of time that means that they will move with the same speed so that's why we see that they all are moving with the same speed in order to have it that feeling that the top item moves faster we need to either increase the speed uh not we need to increase the speed of the first item so to do that we either have to decrease the time it takes to run the animation where we should uh decrease oh my God I'm lost decrease where where we should either decrease the time it takes to run the animation or we should increase the distance that the element should travel so how we're gonna do that we're gonna instead of moving all of them 500 pixels below we're gonna Define a barrier like a Target position somewhere here and we're gonna try to move all the items to that position so what does that mean it means that this item will come here this item will come here all the way until the last item will come here and even like the items below will come here so in this way for the first item this one we increase the distance that it has to travel so the distance for this item is much more than the distance for this item so when the distance is higher and the time is the same it will feel that it moves much faster to do the same amount of um job so with that being said let's go ahead and instead of moving 500 pixels to the bottom we're gonna move it to a predefined position the predefined position is different like the amount of pixels we need to move is different from for every single item and it depends on the position of an item in the list so that's why we have here the index to know uh which position is this item displayed at and based on the notification height we need we can uh know at what distance it starts at what yeah at what distance it starts it is displayed hmm so what we need to do is uh we're gonna work with a notification height uh multiplied by where let's save it into a variable right so const um start position start position of the element is going to be equal to the notification height multiplied by the index so for the first element where is it let's do 500 here back so for the first element the star Position will be zero because index is zero then the second element the star Position will be equal to 80 because index is one and so on so uh we need to say that yeah 500 pixels minus start position minus start position because that's the distance between the element and the target position if a Target position is 500. uh why it's not it's stopped or what happened there no native splash screen registered oh why you are slow iOS lock screen uh where are we so we said that we want to move the item only the difference between the target position and the its start position basically the distance that it has to travel so now if I'm gonna move it as you saw we kinda stack together so for that reason I'm gonna slow down a bit this animation using the with spring to zero does it have a duration no it probably doesn't have a duration so I'm gonna move a bit to over with timing just to show you what happens with timing zero duration uh five seconds now if I'm gonna move down you see the top items are moving much faster than the bottom items and this is how we get this effect of items moving at different speeds and we kind of stacking all together uh the problem that we are displayed here we are still visible on the screen is coming from the is coming from this value 500. so if we increase this to the Target position if it's 700 then it's going to be much better we don't see it anymore and it comes back up all right looks good already looks good but instead of hardcoding this position 700 um it's better to take the dynamic position of the height of this flat list uh minus the height of basically yeah like the height of the view that renders the items I wouldn't say that is the whole flat list because the header also is part of a flat list so we cannot take the full height of a flat list only the height of the container displaying the items so how do we do that uh well well well well uh we know the height of a footer we know the height of the header that means that we can simply uh use the screen height and subtract these two values so to get the screen height in the notification item we can use them use Dimension hook imported from react native use window dimensions and here in the notification item let's do const height equal a use window dimensions now uh container height container height is equal to height minus the size of our header and if you remember our header has a size of 250 pixels and the container height is also minus the size of the footer 85 pixels so now with container height can go here uh instead of a hard-coded data to go like right away container height minus start position and actually we should add a bit more to The Container height because this way it will go right there like right below the container height because if I am gonna add like I don't know where container height I know plus 10 you're gonna see only 10 pixels of those items no um probably yeah or minus 10. now ready is that to decrease a bit more than the container height so that the items do not show up um when we jump with a spring so we can do like I don't know 50. okay oh no it's about our way around it shouldn't be minus it should be plus so if I do plus I still see the spring animation to the bottom you know what when disappearing let's switch when disappearing let's switch to that timing animation and when appearing only uh spring so now it appears with spring and it goes with timing perfect and it actually doesn't need this plus 50 if it's timing because it's not going to be visible unless like in some weird situations it's too close like it's just there under the footer perfect so uh we have some of the things that we need here we are moving all of them down below another thing is to whenever we are moving them below we should also resize their uh themselves to shrink and to to make it like they moved to the center of a screen so for that we're also going to animate the scale property of our notification item and for that like in the transform array let's add another transform that is going to work with a scale so the scale will be an interpolation of the list visibility value so this visibility always go from 0 to 1 and our scale should go from when the visibility is zero should go probably it shouldn't be zero scale but 0.8 or 0.7 and when the list is visible the scale should be one now they yeah they all shrink and duration two seconds just for you to see it so when we go down they also shrink in size and you can adjust how much it shrinks like based on this field so if it's 0.5 like when we reach the bottom they will be half of their size like this I think 0.5 actually looks also good and the last step is to also work with opacity opacity opacity is another property besides the transform so after we close the array for the transform let's work with the opacity and opacity will be should it be list visibility value because it goes from zero to one so yeah yeah kinda it kind of works and when we go down they also decrease their opacity so with disappearing released I think we are done um hide and show the notification list yeah notification list disappears uh I can remove a duration right now because we are done with the animation so it should look really smooth and fast just like that all right so our last step in this tutorial is to implement the animation of the last item and my computer said that it's too heavy to to do everything that I'm trying to do so animate the last visible item in the list not the last item but the last visible item in the list so in my notification item what are we gonna do start position a start position uh start position foreign [Laughter] okay okay let me think let me think um so yeah let's go ahead and start working on this hmm I am thinking to simplify in order not to get confused I am thinking to comment out this animated Style and to and to kind of disable the animation that is related to the visibility of the list because they will work based on the same properties like opacity scale translate and it's going to be confusing for us like what we are animating the last item were the list visibility so let's comment it out and let's and let's define it one more time and now we're going to work on venomation for the last element in the list and at the end we're gonna merge them together based on some conditions so animated style equal use animated Style and this is gonna be the return an object with some changes to our opacity like at the moment is one but we're gonna work with that so yeah one more thing that I want to do is uh to disable the animation for the footer because that will also impact a lot this last item animation so let's try to simplify the use case as much as possible for everyone to understand and then we will try to merge them together with different animations and see how they perform together so let's go ahead in the notification where in the app.js and if I'm gonna simply uh if I'm gonna simply comment out our footer like this then yeah like it's gonna be much easier for us to to work with this okay so now back to our notification item uh um actually bring it to the top let me bring it here okay so animation animated style okay so the opacity we will also interpolate but we need the value to to interpolate it on so what value will drive the animation for the last item the last item uh the last item will be animated whenever we scroll up and down so the value that will drive that animation will be the scroll y position so let's go ahead in our list and let's um let's define a shared value for the scroll why use shared value where it's going to start at zero we're gonna update it every time we scroll so the first thing we do is scroll y scroll y dot value equal to the Y that we receive from the event and we scroll y we can send to every single notification item let's go scroll y now knowing V scroll why we're gonna have to um to interpolate it to get our desired value so the scroll y will have a very big range so it can go I don't know like from zero to let's say from 0 to 100 not even 100 let's do more like 500. uh and the output output values for our opacity we needed from zero to one here I'm not explaining I let's just go with it and see uh uh scroll Y and we need to scroll y dot value we just need to see something on the screen and then based on that we're gonna start working so as you can see at when the scroll Y is zero our opacity is zero and nothing is visible and when we start scrolling we slowly start uh seeing all of them at the same time um similar to the problem that I explained before in order for the items not to behave simultaneously because at the moment they all behave as one single item they all appear where they all disappear so in order to um detach them from each other uh the same way as we did previously with changing the distance but they have to travel the same way we can adjust the specific ranges when the opacity should go out and should go on based on the index items so this is item let me actually do it one more time uh and I'm gonna do it a bit differently let's not do it that big that's gonna be my phone and these are gonna be my items I'm not gonna have a lot of items I'm gonna have probably three items to explain it come on come on all right so this is item number zero this is item number one number two number three um we know the start position of each item right so this is zero this is uh if we look in our code the start position is notification height which is 80. and divide multiplied by the index in our case I will assume that the height of an item is 100 pixels so I will say that this is 100 this is 200 and this is 300. the start position of items now if you remember our our animations are driven by the scroll position the scroll position I really don't know how to um to simulate it but I think I I know I think I know so at this moment when the the items are here the scroll position crawl equal zero when we scroll down and we see the first item here on the screen I mean the second item here the scroll position s scroll equal to 100. and also the same like below and below now let's go back to scroll 0. hahaha let's look at every single individual item and think when should it drop opacity now actually before that let me think yeah before that let's implement this start positions in our animations that will differentiate when the animation runs for every single individual item so let's go ahead in our project in our here and the scroll wide opacity uh for the start range we're gonna use the star position of an item so here let's do 0 will be start position and uh for the next one we should do start position plus notification height notification height basically this is the next item this is this item and this is the next item oh and what that does for us is if I scroll as you can see the items on the bottom are slowly appearing when they are reached this position what's that position that position is actually the position of a first item so when we are in the position of a first item we are fully visible but the problem is that we don't want to start um their animation when it is in the first position we want to offset it with the height of our container so we shouldn't appear here on the screen they should appear on the on when we reach the bottom of the screen so for that we're gonna add the container height to both of these uh should we add or should we subtract container height um minus container height so now we offset the position when these elements start appearing we offset it by the container height so whenever they are at the bottom here we are fully visible as you can see and this way our scroll animation is already looking good actually I don't know how we landed from the first time uh in this position because in a lot of cases I was um oh my laptop in a lot of cases my animations were running properly but on the top so we were going from the top to the bottom but now as we can see they are actually the way we want them to be foreign I would like to take this start position and the end position I would like to take them in two variables so position one equal this one and position 2 is equal to this one so let's now work with position one and position tool I did that because in the next step we're gonna animate other properties also based on the same position okay and when I talk about other properties is I talk about for example [Music] um let's work with the trans transform or with yeah both of them will be in transformed because we have to work with scale and we have to work with the translate so for that let's define the transform which is an array of multiple transformations and one of them is that Translate y so how much should we translate again we should this should be dependent on the scroll position so scroll y Dot value the input range is going to be the same only the output range is different so when our opacity is zero the translation should be I don't know when the opacity is one the translation should definitely be zero because when vitamin is fully visible I don't I want it to be in the position it is supposed to be but when the item is invisible I want it to be moved a bit so uh but with how much with a notification height notification height let's see okay it doesn't look very good scroll wipe translate why scroll y value I think it's minus notification height oh no no that's that's interesting um oh yeah yeah yeah yeah yeah um the interpolation are the interpolation the way it works it defines how to map two values one value to another value so for example we have a graph and here we have what do we have here the um should I work with scroll position yeah let's do with scroll position so the scroll position starts from zero I'm gonna do with an hour the scroll position starts from zero and it goes all the way to like I know Infinity right um and we need the what for example the transform yes translation but the translation should happen only from the minus notification height which is I don't know foreign [Music] from minus notification height and that means that it's going to be from the bottom this is going to be the translation to zero but it's not here um foreign look if yellow is our scroll position the scroll position can actually be negative as well not only positive but when we Define the interpolation we Define two position position one and position two which are somewhere like I don't know let's say here like and here now we are trying to map these two position to minus notification height which represents the position one so minus notification height is going to be here and it represents our first position and the second value is zero which corresponds to the second clamp position so this is going to be our output value whenever the first value I'm a bit fried I'm a bit fried but it's okay here I said that this is start position and this is the no this is pose one and post two pause one and pose two so when um when our scroll is in pose one the translation is minus notification height minus 100 let's say and when it's in position two when education height is zero but interpolation how it works is yes we gave uh we gave it basically only like this a range but because our scroll position is a continuous thing like it can be from minus something to plus infinity um there are two options to adjust our mapped value and one of these options is to clamp it that basically means that we outside of this range is going to be clamped meaning it's going to be the same like this or we can extend it extending it means that we follow the same trajectory and the problem with our items is that automatically the flat list doesn't clamp but it extends and and as we can see the the items move all the way like there based on the scroll position so they move quite a lot like in when the scroll Position will be -10 then all the items will be moved to I don't know minus 100 or minus 1000 but we don't want to do that we actually want to clamp the position of our translation to these values so if it's lower it's going to be still minus 100 if it's higher it's going to still be uh zero so this is called clamping all right so uh to specify how we want to interpolate to clamp or not we can specify it as the next parameter extrapolation uh extrapolate dot clamp that we can import from here extrapolate we can say extrapolate dot clamp and now as I said like the minimum value will be minus 80. that's our notification height and the maximum value will be zero and this way as you can see the last item seems that it doesn't move right because that's how we wanted it to be if we want to make it still move but a bit slower we can divide this notification height by 2 for example and let's hope that my PC doesn't crash notification hide come on divided by two this will make it move but a bit slower so as you can see the items still move but they move a bit slow the last item still moves but moves a bit slower and I think this is actually much better than I had before because I had it like this and when it is like this then it seems that the last item doesn't move at all and it only appears so let's divide it by two probably it will look a bit better oh my God my PC is so slow do you hear me well guys everything is okay best teacher online thank you very much after Lucas oh my God Lucas Lucas he's here by the way do you want to see him oh my God come on what's going on divided by two yes like this okay that's good uh oh Lucas is here in the chat no I said like come here let people see you okay so um as I said beside the opacity and but the translation we should also work with scale so the scale will be like also this kind of interpolation yeah it's also going to be this kind of interpolation uh based on the scroll value starting from position one position two um and the scale should go from one to zero where is the one and where is zero and probably not even one to zero but one and zero point five so I'm not gonna think where to put which value I'm just gonna Define it and see and as I can see it's not there it should be zero point five and here one extrapolate clamp I said why you are so what happening extrapolate clamp hmm oh not five one sorry that's the problem now okay now it looks better and here you can play with the value of the scale I think 5 is too um too much so I'm gonna do 0.8 and this way it's gonna look much better guys that's uh our animations oh it looks so good perfect perfect um I want another thing I want to for our notification list where we have like some styles for wear I want to see um if we are animating them at the right position because this notification list let's give it style background color red and I think we're not animating it right at the bottom so for that reason uh uh I don't even need the style because I know it's all the way till the bottom so for that reason we should think about moving it a bit for example notification item notification item hide start position let's see position one minus container offset offset oh because we are yeah we think that we have um the footer there so if I'm gonna remove this minus 85 for the footer the container height yeah now it should be better oh it's so good so good all right so as I said um let me go back to this one as I said um now the next step would be to group together the animation of the last item and the animation of all the items when we are trying to hide them so uh if I uncomment this one here animated style tool let's do animated Style two I just had an idea what if I send both of them no I think it will the second one will override the first one so that's not the way to go um the way to go is um based on their list visibility value we should decide what should happen because if list visibility is one that means that the list is visible and we need to Simply animate the last item however if list visibility value is less than one that means that we are animating the whole list not only the last item so for that reason um I'm gonna work with the first one here for example opacity for the opacity we are gonna do let me actually do it like this const opacity um let's do it hmm let's create this object very dynamically so we're gonna do it like this actually no it's much easier I can simply do an if statement and return different yeah as I said the list visibility value if it's equal to one or let's do if it's more than equal to one because if it's a spring then this list visibility might actually get to a bit more than one so if list visibility is more or equal to one that means that we are animating them the list is visible so we are animating the last visible item so for that let's simply return this this thing however otherwise after if ends we can say else animate animate all items to hide them so otherwise we're gonna return this statement will that work so now all of them are here when we scroll the last item is being animated and when we get to the top and then when we close that list they go away and just like that we move back perfect perfect perfect perfect on a real device it's much more smoother like my actual device my actual MacBook is uh slow because as you can see like everything is slow now so we merged together with two animations for the last visible item and for the hiding on them the items now let's put back our footer bear and think about what do we have to do to to work with it um so as you see like the last visible items here is working properly but if I swipe uh it should move um as the footer disappears it should move to the bottom to take out the available space because right now we have like this empty space there at the moment how we're doing is we are simply working with uh in the notification item with this height of um initial height of our footer container but what we are interested in is in the height at the exact adverb current position at the current time I mean because the height of them of a container changes with slowly gradually that means that it's going to be a shared value so in the up.js we already have this footer visibility we already have this margin top which is the interpolation what we have to do is to send this interpolation to as a margin top we can send it to down to our notification list but um yeah let's actually do it so um footer height let's do it like this equal to interpolate footer visibility value 0 1 and let's not do minus but uh plus and actually it should be other way around if we represent it as footer height then uh when the footer is not visible the footer visibility is zero then the height is also zero and when it is visible the height is 85. so with this footer height let's go in our notification list and let's receive it here like this footer height now footer height uh I'm interested what is very uh interpolate giving us back as uh shared value or uh normal number interpolate what does it return s the value of the interpolation from within the output range all right that means that it's not going to work properly because we need a shared value we need a property that will not trigger um JavaScript render so for that what we can do is to use it instead of using a shared value we should use a derived value because this value is derived from the it's not here sorry enough.js use derived value and we need that because our value is based on the footer height equal use derived value is this footer height depends on the footer visibility so let me take this interpolation so this footer height is going to be a function that will interpolate photorevisibility from 0 0 1 to 85. now uh let's give this footer height to the footer height here and this way it's already a shared value now in my notification list we receive this footer height and what should we do we should send it down to our notification item footer height foot or height and then the notification item let's receive this footer height and instead of hard coding this 85 here let's do footer height dot value now it looks like this and if I scroll up it doesn't change at all so let me refresh now it looks like this if I scroll up no it doesn't change let me try in the application to I want to console log I don't know console log footer height dot value hmm container height oh the container height should also be a derived value because it depends on the footer height value which is a shared value so without that it doesn't update automatically so we need um use derived value and that's going to be used derived value and this is going to be the derived value position one what use container height now where we access container height we should do container height dot value container height dot value and come on yes let's see let's see hope we it disappears and now the items move respectively how they're supposed to move except my my computer is very slow foreign come on we are done and I just want to showcase it no default value for what no default value I'm getting some errors uh let me stop console logging no default value and it happens when I scroll down when I release yes no default value let me see probably uh um in the notification item probably the container height I did it in multiple places yeah uh container height well it should be container High Dot value and yeah that's it now it should work and it's smoothly appears behind the footer foreign so uh with that being said our animations are done um I I remember that I promised you to Showcase how to fix one problem so let me quickly do get let me check if I don't have any console logs uh probably we don't have um yeah so let me quickly okay commit and I'm just gonna show you how to fix that issue animated flat list the issue is uh I'm gonna decrease the amount of time it takes for our time to update because every time it updates it re-renders our component and that means that our list header component is being created one more time every time we re-render a component this view is created and because we have an entering animation every time it is recreated it is uh the animation is being run so in order not to recreate this component every time our component renders we can use a use memo hook to memorize the component so uh we're gonna do it here const header equal use memo and we're gonna return this component like this come on it needs uh the second parameter the second dependency array the similar way as a use date hook oh come on work yes like this and now we're gonna simply set with the release header component will be this header and we don't see that animation running any more time but our component is being re-rendered we can see that it's being re-rendered because if I add here seconds you're gonna see it updating supposed to update oh no no no uh oh that's the interesting part because it also depends on the date that is being displayed there yeah like this so every time a day changes we're recreate it but why doesn't it run the animations here if it recreates it all right uh that's good I'm gonna delete the seconds and I'm gonna move back to updating it every minute uh yes this live stream will be uploaded to YouTube so don't worry about that all right so with that being said we fixed velocity issue so let's do git add get commit fix um header being reading um being re rendered ah it's not actually re-render but okay ladies love hello all right all right guys so let's uh have a quick demo if my computer will allow me because we are done here we are done here with a task list yes and we are done here foreign where do we start all right so in this long live stream we managed to render the basic user interface of the lock screen from the iOS 16. then after rendering the basic UI we got into the animations and we started with simple layout animations and whenever we opened the screen our header will jump in very slowly and nicely after that we went into developing some custom animations and the custom animation here is the swipe up to unlock text at the bottom that really nicely moves up we'll play it with a position and we've also played with opacity to make it look this way and the last step in this whole live stream was building them animation for our flat list so we implemented a couple of things here in the flat list to make it look uh good and one of them is the animation of uh hiding the footer whenever we start scrolling this is done in iOS in order to give more space for our list so if I start scrolling you will see that our so if I start scrolling you will see that our footer disappears and the rest of the space is given to our elements here and what I like about this animation is that it doesn't jump um he doesn't jump to having more space it's slowly like um and very smoothly moves there together with the last element so we can see it one more time and here it is now when we are back up our footer slowly appears back on the screen the next animation that we worked on is um hiding the notification list whenever we scroll down and this is a fun animation because we had to animate every single item in this flat list in order for them to move with different speeds because the first item should move much faster than the last item in order to have this effect of stacking everything together not simply moving all their items at the same time so if you see like you there is this effect of all the items governing in the middle uh in the middle bottom of the screen all right after that animation was done we went on animating the last item in the list so as you can see the last item really smoothly appears in the screen we played there with opacity with translation and with um the scale so the last item like really seems that it doesn't go below the screen but it goes behind like the previous items so this is a really nice animation and I hope you enjoyed all of this tutorial thank you for being here with me till the end if you have any questions probably now is the time um and also please let me know Down Below in the comments what other animations would you like me to implement because I really have some interesting ideas to continue this project to add a bit more animations for this lock screen and that's going to be next week on Friday we're going to continue this project with a bit more advanced animations one of the animations that I really want to show you how to do is the animation that is driven by the Survivor um uh by gyroscope gyroscope gyroscope I don't know how it's called sensor so whenever you move a screen like we can drive some animations with that so that's very exciting and uh I can't wait to get into that now uh as I said if you have questions let's uh let's cover them now where we can start our weekend because long live stream three hours 51. Dynamic Island animations yes that's another thing that I want to uh to work on I have it in my list I would love to do that uh my question is um yeah like I need um either a device or a simulator with a dynamic Island but yeah love your work thank you very much thank you we have so many people by the end of this live stream is there a new Simulator for the iPhone 14 on xcode very good question and I have it noted down uh I don't know yet and this is what I have to to research to see if there is a the simulator for iPhone 14 then I'm gonna be able to do some animations for the dynamic Island as well bro very nice flat list implementation thank you thank you all right guys so let's continue our conversation on Discord you can find the link in the description below and if you enjoyed this tutorial and if you are still here by the end please subscribe to my channel uh turn on the notification Bell to be notified when we go live but basically we're going live every single Friday at the same time and we are building exciting projects here together with you guys so um yeah let me know what other animations and what other projects you'd like to see me build in future and we're gonna take them into consideration uh that's it for now guys uh that's it for now and I'm gonna see you next

Channel: notJust․dev

Views: 208,539

Keywords: vadim savin, not just development, notjust.dev, react-native tutorial, react native ui design, react expo, react native live coding, live coding, react native auth, javascript, react tutorial, aws amplify, react native, react native tutorial, javascript tutorial, react native ios 16, react native tutorial for beginners, react native animations, react native animation tutorial, react native advanced animation, react native flatlist animation, react native reanimated 2

Id: H9qTNjWV2ls

Length: 233min 48sec (14028 seconds)

Published: Sat Oct 01 2022