React Native Shared Element Transition React Navigation V5 - Episode 8

hey guys and welcome back to my channel this is episode 8 of 10 react native shared element transitions and that is inspired by outcrowd they've built this beautiful ui plus a shared demand transition and some animations on the detail screen and i'll show you my way of doing it in reagnative by using the shared element transition plus animatable to animate the mounting and unmounting of the components plus i'll show you a little trick as you can see like the transition from the initial screen to the second screen there is a bottom sheet which is actually animated so i will also show you how to create this type of effect which is also shared element transition by the way which is applied from the initial screen to the second screen so let's play the intro jump straight into vs code and start building this shared element transition and the animations shall we all righty guys so we are in this code here i've already created the entry point for the episode 8 we have here dummy list and i've also created a details page for it and i already prepared the data so let me walk you through what we have so far we have here a list of colors and some images and i've grabbed uh the images from flatikon.com they have these beautiful kawaii packs so thank you so much flat icon for the icons by the way you can also check it out the link in the description of this video if you'd like to also use them but please give credit to the author and down below i have some details icon collection those icons will be used in the details screen on the details screen where we will show some different categories and finally we have here the the main data that we will be displaying into a flat list that contains the color name job title and some categories that again we will be displaying them on the second page so let's go here to the salon list like this is the main entry point right start creating the list and for that i'll be using a flat list so here i'll have a flat list import the flat list from reagnative right we'll have the data cell on we'll have a key extractor of item item key then we'll render the item get the item and here return touchable opacity right great password damion press for now we'll be populating it in a minute and here we'll have a view that will have a flex one and we'll also give a padding of spacing and here inside we'll have a dummy view for the background image that will also share between screen so a view so style it's going to be styles.bg now we will have a text right that's going to display the item and then the name the same item and job title hit save here so we have those items right and finally an image and the image will have a source of uri item image image and we'll also pass a style of styles image and image is not defined let me import it great and all right so reef reload and go to tutorial the reason why the image is not visible is because we did not set any weapon or height so it's zero by default and now looking at this bg i would like to also apply a different color or maybe right so item color and i know for sure that this is going to actually you know what this is going to stretch the entire stylesheet absolute fill object right and along with it will pass the background image but also a border radius of 16. great now let's style the items but first i like to detachable opacity to give a style of margin bottom of spacing great and let's give a fixed height for the for the item itself so i'll pass here a content container style of padding it's going to be spacing right so we create this beautiful line and i've said that we need to specify a fixed height so height is going to be item height and the reason for that is because the image will be positioned absolute and we don't have any the item is not going to take into account the image height so let me go here above and create the item height is going to be height multiplied to it 18 let's say height is not defined import height so 80 80 18 of the screen height and also wrap this transfer this as a uh area view so we have a safe area view instead of a view so we can create this space above great now let's go to the styles and we'll have this one should be style styles name and job title right so we'll have name job title and then an image and for the name i would like to have it a font weight of 700 and the font size of maybe 18. yeah that looks good and for the job i'll have a font size of 11 maybe all right and an opacity of 0.7 0.7 great and for the image i'll pass uh the wiffles item size item item height multiplied by point let's say 0.8 apply the same for height resize mode of contain all right and position this absolute it at bottom zero and right spacing so we align them here right okay so so far i think this is this is it for the item now let's apply a navigation system to the on press so navigation navigate to salon list details and paste the item now if we go to the salon here remove the text we don't need it so first let's grab the dummy background image along with the image and extend everything mostly item is not defined okay let's get it from the route so route and then here we'll have an item from route params okay and i think that we also need to import the image okay so we have those guys here and another thing which i've actually forgotten i've mentioned in the beginning of this video is that we'll have a dummy like a bottom sheet that's going to also be shared between screens initially on the first screen it's not going to be visible but on the second screen it's going to contain some informations and let's create it here so outside of the flat list i'll have a view and i'll give this style of styles bg and the bg will have this so let me go back okay so i'll have here position this absolute i'll apply a width of width height of height so both imported right and if i'm giving a background color of red you'll see that it's going to fill the entire screen which is amazing but this time i would like to move it downwards so transform translate y is going to be height so it's not going to be visible half of the screen you'll see here and let's also apply some border radius of 32 so we have this guy and now we can move it outside of the view and now this this background we would also like to have it uh here inside the the detail screen but this time we'll have a content inside it which is really nice so content right and if i'm going back i can actually grab the whole styles so styles here also for the name and for the image so for the name and we'll apply a different font size and item height is not defined so let me export the item height and inside the details screen imported from what's the name salon list great so width is not defined okay let me import width width and height okay width and height okay now moving to the second screen let's define this background color should take a third of the screen height so i'll get here a constant top header height which is height multiplied with 0.3 okay and this top header height i can apply to the to the background so height is top header height great and also remove the border we don't need and now we would like to move this this icon or this image here right so the styles for the image instead of button 0 is going to be top top header height but i will also like to decrement it by item height great so it's going to start directly from the bottom and let's apply the same for the item itself first remove the job description and for the name i'll be positioning it absolute and top is going to be top header height and i'll shift it above so minus spacing multiply it by two or maybe by four okay and also a left of spacing multiplied by two okay this is look looking really good i think that i can do like this so it's it's starting from here and now let's see where is the bg right so bg if i'm translating it like this right it's here but uh initially i would like to to have it starting from from this edge so instead of translating it directly like this we'll have top header height and notice that the the background is not taking into account the border radius so now if i'm going to to the top header i like to add the border radius 32 so it's going to start from here all right this is looking really good and additional to the bg i like to give it a padding of spacing so we will have this beautiful container and a padding top of 32 maybe plus spacing right because we'll also like to include the spacing itself great and now for the remain part let's create the three dots here and we'll be using the details icon so if i'm going here inside this content i'll have a view and i'll iterate over the details i can map item or detail and i'll also need the index so i'll return here a view that's going to contain an ant design and icon right the name is going to be detail icon let's apply a size of maybe 16. we'll be playing around with it and the color and apply a key of detail dot icon and oops so we'll have here and the index alright so we have this beautiful icon all right and i like to modify the the style so flex direction is going to be row okay and now i like to justify the content space evenly so i have this and for the inner style i like to apply styles of background color it's going to be item that color it's actually detailed right detail that color i'll apply a big padding or maybe a height of 64 with 64. even maybe less so 36 i think 42 42 is looking good and a border radius of uh 26. i was doing the math in my head so all right i think that i'll stick with 64. so it's better it's more visible right and i'll increase the font size here of 24 and i will align the align the items to the center and justify the content of the center great so this is looking really nice i think that thinking down the font size a little great and maybe we can add a different color to it no i think white is better also remove the red because we don't need it so red background color red and background color should be white instead amazing and now inside the data we have some categories right so let's iterate over that and create uh another view so actually here inside the view we can pass a scroll view so the scroll view is not defined so scroll view okay if i'm going to the second page all right this is looking really nice and another view here i'll have another view which will contain the categories for for each item right so i'll iterate over categories so item.categories i'll map i'll get a category and here i'll say return of you pass the key as category key and each category is going to have a text right so we have this title so category.title and now each category has a sub category right so subcategory so i'll have here another a map category subcuts map subcut and here i'll also need the index and return view that's going to contain a view for the dot dummy one and the text and we'll have a sub cut and more or less i think that's it right all right so for the for the title i'll say styles title this row should be a row so flex direction row and for the dummy view here i'll say a height of maybe six with six border radius 3 background color is going to be gold all right so we have this beautiful dot here and i'll apply a margin right of spacing divide by 2. even more maybe spacing and also increase the size just a little so 10 10 and 5. i think it's too much maybe eight all right it looks better and for the flex row i would like to align the items to the center beautiful the missing part is to style this style styles sub category subtitle okay so we'll have some styles here so we'll have a title and a subtitle so the title is going to have a font weight of 700 font size of maybe 18 styles style okay so we have this list here and i like to give a margin bottom of spacing okay and the subtitle should have a font size maybe of 14 15 and also increase just a little bit the font size here okay amazing and now if i'm going i think the this is looking really good and maybe apply a different opacity here points eight okay actually 14 looks better and let's give it a breathing room here to the items so this guy should have a margin bottom of spacing divide by two so we create a space between those and each category should have uh let's say margin vertical of spacing all right and this we can move it inside just a little so this view is going to have a margin left of spacing all right this is looking really really nice and the view that's containing those i should also have some [Music] margin vertical maybe of spacing okay and maybe a margin bottom of spacing multiplied by 2 plus 32 okay so we create this effect here i think that this should be enough okay so it's equal size all right and now let's let's start animating those and we'll be using the animatable for that so let's import animatable from react native animatable and also create a duration which is 400 and let's define what items should be animatable so those three views should be animatable so we'll have this animatable dataview animated on that view and which one the view here so each additional view from inside so those views should be animatable as well and for the those three buttons i like to apply bounce in effect so here i like to have an animation of bounce in so they'll bounce but i'll delay this with duration duration plus index multiplied with uh 100 right so we'll have here kind of like a stagger animation okay and now let's apply the same for oops for the animation here but this time i like to have a in top let's fade in up all right and you see it's they they moved but i like to delay them as well so it's going to be duration plus index multiplied with 100 right so here and index we can grab it from the category so we have this uh this delay but this time i think that i will increase it differently and i will also like to add um like more to it so i think it's maybe duration multiplied by two so i i'll like to wait more for this animation to happen you see all right so this is looking really nice so far and the last part is to actually do the shared element transition so if i'm going to the salon list here i like to grab the item into a share the element transition so wrap it all right and pass the id was item item key and then name do the same for the dummy background so shared element but it's background actually can be bg directly do the same for the image image and also wrap this background and this time we don't need a key but we can directly specify the general that bg alrighty so now let's fix the styles the view for the background should have absolute field the image should have the same styles right all right and i think that's it right now let's let's move to the to the other screen so for the general i'll have this background this is where the magic happens so as you can see i'm wrapping the entire view that contains the scrollable which is like really really nice so this entire view is going to be a scrollable is is going to be shared and it contains more information right so import shared element now let's go back uh create this wrap also the name and also the image so name image and we had the background right so the background the background great so let's see if there are missing styles not really so everything is looking good i think that i will move just a little bit the image so the top i'll say plus let's say 10 so i'll move just a little bit so you'll not see the bottom okay now let's go to a previous tutorial and copy the shared elements so now we've connected the pages but now we also need to inform the shared element transition right hey those are the elements that you should be move moving so long these details i have here the photography copy copy this code all right so we will have the uh how is it it's called it's uh the bg write the name then we'll have the image and then we will have the general bg hit save and refresh and now all the elements should be also moved from a screen to another so let's see all right so this is looking really good okay there are some styles that we need to fix so the let's fix first the style the style is going to be we should position this absolute so the night name is going to be positioned absolute and now we have the job title should have a margin top of 32 maybe even less so it's 18 18 okay and now we we fix the styles i think the rest is looking really good all right guys so that was it uh thank you so much for thanks along with me i hope that you've learned something new and you can apply it in your existing projects or project if you have any issues or any problems please don't hesitate to leave a comment down below i'll do my best to answer all of them and help you out as much as i can also don't forget to subscribe and smash the like button or double smash the dislike button i'll see you in the next video thank you so much bye you

Channel: Catalin Miron

Views: 35,608

Keywords: catalin miron, react navigation v5, react native shared element navigation, react native shared element react navigation 5, react native shared element github, react native shared element transition, react native shared element expo, shared element transition, react native shared element example, react native masonry, react native animated api, react native carousel animation, React native flatlist animation, react native tutorial, React native expo

Id: tC7egqnpYSY

Length: 30min 40sec (1840 seconds)

Published: Tue Oct 20 2020