React Native Shared Element Transition React Navigation V5 - Episode 7

hey guys and welcome back to my channel this is episode 7 of 10 shared element transition series which i would like to record here on youtube i was inspired by dave and he created this beautiful ui and a shared element transition along with some nice animations and i will show you my way of doing it in react native by using the shared element transition plus animatable and animated api from react native this tutorial is going to be different and i would like to start everything from scratch and i will show you how to build those tabs the list the carousel and everything plus how to animate on the details screen the subcategories for each image and how to stagger the text after entering the second screen so i received lots of comments about please build everything from scratch because i would like to also learn the ui and how you are actually building using flexbox and i decided that this is a tutorial where i will introduce you some ui parts and how you can actually style those lists so lots of things are going on and thank you all for the suggestions and feedback i receive a lot of comments from you so let's play the intro and jump straight into vs code and start building everything from scratch shall we alrighty guys so we are in vs code here and i have the data i have an entry point for tutorial number seven nothing is visible on the screen and i've created a food list which is the initial screen and then food list details that's going to basically be the second screen right after pressing on a button there and i also have some data that we will work with so let me walk you through through the data itself uh i have some icons that are grabbed from flat icon the link to to the the whole pack is down in the description if you'd like to follow up so thank you so much flat icon for the pack for those uh elements and i have here i grabbed the data so we have some data right and then we have some colors and a list of tabs and the list of tabs i just hard coded today chips fish the burger coffee drinks have breakfast and and then i map i iterate over this data and i'm creating the uh the data for the flat list the carousel itself that's going to share some elements to the second screen and i have here a subtype i'm using faker to get the data i also have a price sub categories that i will be using on the detail screen to animate the transitions for for the diagonal and then i have a list here of popular foods which is basically the list underneath this carousel where we display the a small image a title a rating plus the price and let's start by building going to the food list here and start building the tabs and use the state to actually select the the tab itself so first i like to create here some state so i'll say selected tab and set selected tab and react use state and i'll start from tabs the first one right it's going to be the selected so first we'll create the tabs then we will create the featured food and then we will create the carousel the main carousel and afterwards we will move to the details screen so for the selected tabs like the the list from the top we'll have a scroll view or let's do a flat list actually a flat list and here we will have the data is going to be the tabs the key extractor is going to be item and item or maybe we can do item and index and we'll say here item and then the index right will have a render item and here we'll get the item itself right and we'll display a view inside the view will have a text basically this is the pill so let's style let's apply a different style so for the view we'll have styles of peel and for the text we'll have a style of styles peel text and inside we will display the item so we have this list beautiful and we would like to make it horizontal right so horizontal and we would like to show horizontal indicator to false and now let's uh let's wrap this view into a touchable opacity because we will also like to set the selected tab with the selected one right so on press we will say set the selected tab with the item hit save and now for the pill itself i like to also pass some styles so the background color in case the selected tab is equal to the item maybe it's better to just rename this to be a tab because it makes more sense right if this is true we would like to make this orange otherwise we'll make this transparent transparent so now so the peel actually this is a list of styles this is item and item a stab sorry because item it's like the argument which flat list is sending right but i would like to remap it to to a tab uh because the naming convention makes more sense and let's apply the same styles for the peel text but this time if it's selected tab i like to make it white otherwise i'll like to make it let's say black and this is complaining okay the color is going to be this one right so now i press on a button it's going to set the selected tab and it's going to change the styles beautiful now let's go to the to the styles and style the peel so peel peel text and i'll also like to say here for the peel i like to give it a padding of spacing so padding horizontal and padding vertical is going to be spacing divided by two so we create some breeding room here i like to make this uh rounded so let's say 12 the border radius and then for the text itself i like to make it font weight 700 so it's bold and i like to if i'm going to the flat list now and apply a style of background color red you'll see that this is going to stretch the entire screen and we like to just avoid it and and make it as it is like the the inner the children right and to do that we need to pass here flex grow of zero so now it's uh making this style and for the content container style so the inner style is going to have a padding of spacing all right so we styled those items and now it's move let's move to the featured food so we have this list here where we would like to display the image rating and price and the where it is and the the type right so we'll have here let's go to the flat list create another flat list here flat list so i'll have data popular food i'll have a key extractor item and item.key and then a render item is going to take that item and display something right so we will return here view and how this is going to work will split the the views so the the the main view is going to have a flex direction of row so style flex direction of row and here inside we'll have three different views so view for the image so image let's import image and the source is going to be uri item dot image and apply a style so styles that popular image then we'll have another view which will contain the type and the rating so here i'll have a text containing the item type hit save so we have this and down below we'll have another view that will contain the rating name and the icon so i'll have here on and design and design i'll give this a name of i think it's star let's say a size of 16 a color of orange and a style of margin right of spacing divided by two right and down below we'll have another text with item and here we can pass the rating all right hit save so we have this view here and let's make this flex direction row so both the the star and the text will be on the same row and now the missing part is to display the to display the the price so down below we have an image right the first column second column it's a view containing the type the star and and the rating and then we'll have another text containing the price so we'll have here a text containing the item price great and now let's give it this style so styles popular item price and i'll have this popular item image actually or without the the item i think it's it can be without the item so popular price popular image and the rating actually i can do it in line here so font weight is going to be 700 and for the heading i'll say style styles popular type right or popular name type is better so let's go to the styles so have a popular type popular image and then a popular price and for the it was expecting a comma so it's it should be directly the style so for the image let's apply a 74 height width okay we'll apply a resize mode of contain and we will give a margin right of spacing so creating a breeding room here and for the popular type we will have a font weight of 7 800 right we'll increase the font size or font size it's going to be 20 even less i think it's so it's actually maybe 18 or 16. a 16 it's looking good and for the price i like to align itself to flex end or actually you know what the price should actually be font weight again 800 right and i would like to center everything so to center everything i'll go here to the item and align items to the center so now everything will be aligned and i like to give to the view where we have this lasagna so this view i like to make this flex one so we will split everything right this is going to have this is going to take the uh the entire space of like the available space right and now the missing part this item should also have a spacing or padding of spacing great so we have this beautiful ui here and i can also remove the show vertical scroll indicator to false all right and now let's in between them let's actually uh display the carousel right so we will have another flat list and the data this time is going to be this default data right so we'll have here we will import food as default data go here the data is going to be food we will have a key extractor key extractor is going to be item and item key and then we will render the item getting the item and we will render touchable opacity because we will know that on pressing on the item will transition to the next screen right so we will have a damion press here nothing for now and here inside will have a view so let's style the inner parts so we will have here a view that will contain the text for the type so item type [Music] and another text containing the [Music] item how it it was the name so subtype subtype okay and i like to give this a different style so the styles is going to uh have this cell width and cell height so if i'm going to the to the item itself i like to have a width of cell width and the height of cell height actually this this style should be applied to the to the touchable opacity and style is going to be flex 1 for the inner part right and i'll also like to display an image so image is going to have a source of uri item image and style is going to be styles image and here is going to be style styles type and let's apply the same for the subtype so sub type oops okay save it so this is not visible so let's uh this uh this scroll should have scroll enabled false and now let's let's wrap the whole the whole safe area view so go here into a scroll view hit save and now we will have everything scrollable right inside and for the flat list this is not a visible let's apply here flex one and background color red and the height of 100 okay so now this is visible and the reason we forgot is to actually return something from the flat list and we don't need the background color red we don't need a width and height okay that was a dummy mistake and for the uh each item we'll uh have a background color this is actually uh background color should be here so we will create a dummy view and apply a style background color it's item color and we will position this absolute so stylesheet absolute fill object and then we pass the other item so we have this beautiful design here and let's apply a border radius of 16 great and now the whole item should have a padding of spacing so we create some breeding room and now let's style the type and subtype so we'll have here type subtype the image right and for the type i'll have a font weight of 800 font size is going to be let's say 18. maybe even more 20 22 k22 and for the subtype we'll have a font size of let's say 14 maybe 12 all right and we'll apply a different opacity so opacity is going to be 0.8 so not that visible and for the image we'll have a width of item cell multiplied with 0.7 let's say height the same right so we display this in the middle and actually to display this in the middle we need to self align its center and resize mode is going to be contain reposition this absolute and to display properly the items i'll display those to the center so we have the popular food and the touchable and i'll line uh actually justify the content to the center great and now this view uh that's containing the subtitle the type and the subtype should be positioned absolute and we'll give it a top of spacing and right spacing left spacing and top spacing great so we have these items and for the item cell let's apply a margin of spacing great and this should be horizontal show horizontal scroll is going to be false oops false alright so now we have this list which is looking really nice but i would like to actually snap into place so i'll create here a snap to interval and the snap to interval is going to be full size and if i'm going to the top here the full size is going to be the cell width plus spacing multiplied by 2. and the reason for the spacing multiplied by 2 is because the item has some margins right left and right so now this should snap into place and snap to interval using this one to make this carousel style we need to pass the deceleration rate off fast so it is going to snap really fast into place all righty so this looks really nice and what we would like to do next is to go to the detail screen and share the image the background color and the text right so here i like to navigation so when you press on the the button so navigate to food list details it's called right details and pass the item now if we go to the item details grab the item so we'll have the route here and the item will take it from route params and first let's display the background image so if i'm going back we have this beautiful view here paste it here right so we have this view uh amazing now let's go and take the view that's containing actually everything so the view and the image so we have a view for the type and subtype and the image also import the image and go to a screen here copy the styles for the image subtype and type i have here the images and the cell width we will export the cell with right from the sell food and import here cell with from food list is going to go to the second screen which is great and i like to remove this food text because we don't need it but this time the the view it's going to be positioned differently so we will move this even more at the top left maybe multiply it by uh oops by two right so we move this here and the image itself should be positioned differently so position top and the top is going to be height divided by two minus [Music] let's say height divided height is not defined so let's say high divided by two not really so [Music] let's apply here maybe 0.2 i think this looks better but this time i would like to increase the size so 0.9 and 0.9 okay so we increased the size and so we have the background we have the image and we have the text and we can also display the inner items here we will have a view we have here inside the items we have some subcategories and let's iterate over the subcategories so we'll have subcategories item that subcategories we will map and we'll get what we have here we have the data okay so we will get the item sub category right and here we will return a view containing the image with a source of uri sub category image and here we need to pass a key so sub category.key great and for this one i like to make this pretty small so let's pass a width of 32 height 32 and resize mode is going to be contained so we have those images here right and uh what can we do now the view itself should have a flex direction of row great and i like to justify the content space evenly so we will space those evenly and now i would like to move this top is going to be height multiplied with 0.3 actually what was the item size i think that i think that i will wrap everything like both the view and the image into a view and what i would like to do here with the image let's remove the position absolute right and on the item itself so we have the item the image i like to give it let's see how this is looking red okay and for the sub categories let's remove the top create great and the image should have a margin bottom of let's say spacing multiplied by four okay and now move the whole the whole container here so we have margin top here of height multiply it 0.2 or even less all right this is looking really nice and i can actually give a little breathing room to the image itself so image instead of margin bottom i like to have a margin vertical of spacing multiplied by two by four all right actually a margin bottom it's okay so we have this one let's remove the red okay and for each item i would like to display the uh background color so style here is going to have a background color category full color we'll have a padding of spacing this is this should be item full color okay that makes sense and now i like to have a border radius 50 so it's rounded and i'll have here a text right so here i'll create a view of item price great and i'll also have a text of item description great and this guy should have a padding of spacing and now let's create some breeding room uh for the subcategories so i'll have here a margin bottom of spacing multiplied to three okay and here inside for the item price i'll style this properly so i'll have a font size of 32 font weight of 700 and margin bottom of spacing divide byte great and now the description should be font size maybe 14 line height of 20 if we go to fish we have this beautiful ui right and now let's let's start the animation for those items and for that we will use the animatable so let's start by import animatable from react native animator and here i'll define some animations so animation is going to be at keyframe 0 and keyframe 1 will have an opacity of 0 and translate y of let's say 100 and opacity 1 of translate y of 0. okay and i will apply this animation to the price and the description here so if i'm going here instead of for text i like to have on animatable text so animatable text i'll have one use native driver through animation is going to be animation delay it's going to be duration i'll create immediately the duration so the duration here it's plus 100 plus and the duration i'm going to the top constitution is going to be 400 so this is going to appear like using this this beautiful ui and notice that the opacity in our case is not going to work so let's remove the opacity but instead apply a different color so color is going to be rgba00.1 7.7 so decrease the opacity now this should be the animated to the stagger and we would also like to animate those items here so now if i'm looking at the full color i think the this is like too too bright so let's decrease the opacity here with seven seven maybe or 99 okay that's looking even better and what i would like to do now is to create those animations and to do that i'll need to create here make animation that's going to be translate y is going to accept the translate y is going to return 0 is going to be translate y it's going to be [Music] translate y and translate x is going to be let's say zero for now and that one translate y at zero and slate x to the zero as well let's define this create animation and instead so in the first place let's modify this with minus 100 reversed so it's from the translate y is going to be minus 100 and the translate x is going to be the from amazing because both of them will start from this line right but this will start from uh x minus uh 100 this is going to be x0 and this is going to be x minus 100 so let's define the animations so const animations we'll create the animation with 100 then create animation with zero and create animation minus 100 and now if i go to the subcategories where we map we have here an animatable view right animation animations and the index we have an iteration count let's say 10 so this is going to animate right so let's go you see they are animating like that don't forget to use the native driver for this and actually you know what let's move the this a little bit more to the top so they will start from the center i would like to make this image to be above the items and in order to do that we need to go here to the image so image style and apply a z index of two so this will be on top of the of the item and now looking at it the translate can be like this okay and also play around with the opacity so opacity is going to be zero and opacity one also play around with the opacity great this is looking good and iteration count eat the ration count let's remove this and we will delay with the duration so duration and now if i go now it's going to animate this and the text should wait more longer right so let's say 300 and 400 now this will play the animation and also wait for this okay now that we have all the elements now it's time to move to the shared element so go to the food and apply the shared element to some elements right and i would like to move the this view here so grab this into a shared element let's import this and i'll have here an id of item item key and then meta right i'll copy this and paste to the image itself right so i'll have here an image and i'll also like to move this background color and wrap this not this one but instead the shared element with the id and do here a bg right and apply the same to the food styles so where we have the bg we have the image here so first grab the image shared import the shared element so this is image [Music] we will have this view which is having this meta key right and same for the bg so pg now we've connected the pages and let's fix the styles so the [Music] meta should have style of stylesheet absolute fill object right now this item is not visible anymore and this should also have a style of stylesheet absolute fill object right and the image itself should have the same so where we have the image should have the same style as the image itself the view mainly because the shared element it's actually a view underneath right so we can pass the status so now we've connected the items now let's also fix the styles for the the rest of the items so we have those items here okay and i think the spacing top it's too big okay this is looking good and now let's let's create the shared elements so if i go to a previous tutorial and grab the shared elements here so we have shared elements close the tab we have a food list details and shared elements we get the item from the params route params but we have the meta and pg right hit refresh go to the seventh episode and now the items should be moved properly okay so the item is moved okay so one more thing about this uh tutorial is if you take it if you're taking a look at the image itself there is this background transparent or i don't know this is not really fluid right and in order to fix this uh you see here where we define the shared elements we have a list of ids right and this is actually really important and the order actually matters so if i move the image to be the last refresh here and go to the tutorial you'll now see that those z indexes will be image will have the bigger bigger z index so now if i uh if i transition you see there is no background or that type of flickering between the screens so play around with the order and if you have an image for example it should be the last one defined here in the list so this is just a small tip that i would like to i wanted to tell you before wrapping up the tutorial so thank you so much guys for staying so long with me i hope that you've learned how to style how to share the to share different elements from a screen to another and how to animate uh multiple types of elements on the screen by the way if you have any issues or any uh while doing this type of animations 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 if you'd like to become a patron and have access to all the shared element transitions plus a bonus one the link to how to become a patreon is down in the description other than that see you in the next video and enjoy it bye

Channel: Catalin Miron

Views: 23,408

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

Id: dFEHETyuXWY

Length: 42min 11sec (2531 seconds)

Published: Tue Oct 13 2020