React Native Shared Element Transition React Navigation V5 - Episode 2

hey guys and welcome back to my channel this is the second part of a series for shared element transition i was inspired by stanno he created this beautiful parallax slider animation and the shared element transition and i'll show you my way of doing it in react native by using the flat list plus animated api and shared element transition to move the items from a screen to another and animatable in order to create the stagger effect on the details page before jumping into vs code i like to thank you all for supporting this channel especially to education libre ready and christoph for buying me a couple of coffees and to jaiman ali mohammed tinhung foo and david mumber for becoming patreons and gaining access to the private repository and some behind the scenes work which i'm doing and special thanks to echo that he took the exclusive help and i was able to help him out with some shared element issues that he encounter during an app development so if you would like to become a patreon and support this channel the link to it is down in the description and now without further ado let's jump into vs code and start building the second tutorial about shared element transition alrighty guys so we are in this code here and i've created an entry point for the tutorial number two uh this is the first tutorial right and i have here another tutorial number two where we have let me open up the sidebar here we have a travel list and the travel details so basically this is the travel list and this is the travel details and inside the app here the travel list has the same options so i'm i'm applying an opacity for the car style based on the progress what we've done basically in the tutorial number two and the link to it will appear somewhere on the screen if you haven't follow it out and i've grabbed some data for for this tutorial a key i have here a key allocation number of days and an image all the images are grabbed from unsplash and with this data we will display a carousel using flat list we will create this parallax effect and after pressing on an image we will transition to the next screen the image itself plus the the location text here so let's and and also in the theme um i'm exposing a tutorial to specs which is which contains an item width and an item height a radius a spacing and the whole size including the spacing and we will use them for the flat list and also for the detail screen as well so let me close the sidebar here and first thing that i would like to do is to create this parallax slider using flat list so let's go to the travel list here and start by importing the flat list and we'll be using the data as data right we'll have a key extractor of item key we'll render the item grab the item oops okay and here we will return a touchable opacity touchable opacity because we will we can press on this item right for now we don't have any on press but we'll create a style here and the style will have styles dot item container so let me create this here item container and inside this will have an image that will have a source of uri item image and style i like to position this absolute so absolute fill object and then we'll apply a resize mode of cover the reason why i'm not passing a width and the height is because the item container will have a width and a height and this will stretch the entire scene right so because we need the width and the height let's uh import the transition spec so transition spec tutorial to spec sorry so i've grabbed the tutorials pack and let me grab the item from tutorial specs so i'll get the item with item height radius we'll have spacing and we'll have the full size right and let's apply those to the container so width is going to be item width height item height and we'll also give it a margin of spacing now because the image will stretch so we'll have the entire screen right and now i would like to make them horizontal so the horizontal true and also show horizontal indicator is going to be false so we have this slider i'll also like to snap into place so for each particular item so snap to interval is going to be the full size so basically is the item width plus margin uh plus the spacing multiplied by two and if i hit save now it's going to [Music] snap into position and i like to apply a deceleration rate of fast so we will move will snap into place faster right and create this type of slider effect now let's create a text for the item and the text is going to have on item and location apply a special style here so styles location and i will also like to create here a view and another view inside it maybe and text sorry so text and this time we'll display the item number of days and then another text containing the word text and here we'll have style styles number of days and let's grab the same but it's label and style actually this is value for days days label and styles days container nice value and this all right so let's style them uh so we'll have here location right we'll have a days days value and days label so for the location i would like to apply a font size of 30 uh color of white uh font weight of seven eight hundred i like to give it a width so the width is going to be uh like 80 percent of the item width so item width multiplied with 0.8 i like to make the upper key so text transform it's uppercase and i would like to i think it's looking good but i like to position this absolute absolute and i'll give it to top of spacing and bottom of spacing as well left sorry so we'll start from here and now for the days let's position this absolute i like to position it bottom spacing and left spacing i like to give it a width of let's say 52 height 52 border radius of 26 right so half of it i like to give it a background color of tomato tomato okay and justify the content to the center and align items to the center as well and now for the day's value i like to make it font weight 800 color is going to be white and font size of 18. all right and for the label let's copy this one but instead of 18 let's make it even 10. okay so this is looking really nice okay and for the next thing let's let's start by animating the flat list so we'll have we'll convert this into an animated flat list grab the grab the animated from react native here create a scroll x which is a react use ref new animated value starting from 0 and get the current and here on scroll i like to make this an animated event and i'll get from the native event the content of set the x scroll x and for this example i will use the native driver and scroll x sorry all right and i noticed that the initial route is not tutorial number two so tutorial number two so we will jump straight into this screen by default and with this scroll x here i would like to change the uh first change the text position right so we will create this parallax effect but i would also like to scale the image if the active slide it's its index so here let's grab inside the render item we need to grab the index and create an input range and we'll have index minus 1 multiply it with item width item with will have an index actually this is full size right because we snap to interval with full size and index multiplied by full size and item plus one multiplied with full size and with this input range now we can control the translate x position so interpolate the scroll x as the input range as input range and the output range is going to be them with 0 and minus item width and with this scroll x let's apply this to the location container so make this an animated text and along with the styles location i like to pass a transform and translate x uh so this is styles actually and now i'm moving the slides and you see i'm incrementing i'm creating this parallax effect to the text and let's create the scale animation for the image so scale is going to be again scroll x interpolate that as the input range and for the output range i like to make it 1 1.1 and 1 again right and if i convert this into an animated image and pass here the transform transform and i'll scale it i have this beautiful animation here and you see that because i'm scaling the image and i don't have a container for it we are we are we are going above the the item so we need to wrap this into a view so the view will be style sheet absolute field object and will pass an overflow hidden and in this way we are not moving outside of the item wave right and creating this this pretty nice effect and since we are here let's apply also border radius so border radius to the container of radius all right and now let's move to the details screen so for the details here i'll have navigation i'll push to travel list detail and i'll pass the item now it's travel list details sorry about that so this is the name of the next route and i'll go to the next level okay and here inside i like to have a view right which will have the style sheet absolute field object is basically the wrapper for the image so if i go back here and copy the image copy the image styles and apply the styles and also grab from the route grab the item so we'll get the item from route params import the image hit save and now we have a full screen like a full width and height like a stretched image and apply the same thing but for location so in my case the location text let me grab it paste it here underneath i'll also need the location styles so let's create here the styles of styles it's style sheet create and apply the styles and grab the item with and everything from the oops okay and spacing and spacing it's already defined okay let's remove this and hit refresh animated is not defined we don't need this animation anymore so we should be good to go and translate x great all right so we have the position of the location but this time i like to maybe move it move it downwards maybe 100 that looks fine and maybe spacing is going to be spacing multiplied by two okay this looks amazing and let's also now start the shared element transition and for sure element transition we need to wrap this view into a shared element so shared element we need to pass first import it and we need to pass an id and the id it's going to be item item dot key and photo and paste this view inside this and to make this to make this visible we also need to pass the style stylesheet since this is a view we need to pass some styles to it as well and now to grab this item stylesheet and wrap the item from the list details as well so we have this item here and if i go to the previous tutorial into the details i have here this static so let's grab the static close the item and before exporting the travel list details i'll like to apply this shared elements and this time we will not create a dynamic route but instead we'll grab the item from the route because we are passing the item and we'll return here an id so item dot item key photo and i also need the location as well so we will also move the location text so shared element is not defined let's import this shared element and now if i hit refresh it should move the item right for from opposition to another which is looking really really nice and the view here doesn't have an oh border radius of 18 let's say right maybe zero so we will not have any any border and this is looking amazing now let's let's also transition the text so let's grab from the travel list the shared element transition for the this shared element should have a shared element will pass the id of item item key and location all right and apply the same thing for the location here so location is this one and hit save refresh and now we are moving the element right this is looking really nice so if i hit save all right this is looking amazing and let's let's make this uh arrow white white all right this is looking really nice i think that the position of the text from the travel list is not good so let's do multiply it by two yeah i think now it's uh it's better amazing before wrapping up the tutorial i will show you how to animate another list that's going to be visible on the second page using react native animatable so if i go to the travel list here i like to import everything as animatable from react native animatable so here below i'll have i'll have a view containing a text saying activities and i'll apply the same styles as the location so styles location but i will change the font size here so font size is going to be 16 and width is going to be 100 right so we have these activities here oh to the sorry so to the text okay and the style for this one we'll position this absolute and bottom 120 so we'll position this to the bottom of the screen so this is not visible we will see why and left spacing right spacing i'm not sure if we need those but let's stick with it and now let's create here why this is not visible let's start with the background color red all right so this is not visible if i remove the position absolutely put it to the bottom okay and position this is going to be relative right and yeah i think that i'll remove those uh so i'll just remove the location sorry about it so the reason this is not visible is because of this element so we'll make this trans text transform upper case right and font weight is going to be 800 and i think that we can remove now the position and color is going to be white so we have this one here and i'll apply a margin horizontal of spacing great and now i will create a flat list so flat list i'll create here a dummy data so array of let's say eight elements i'll grab the keys key extractor i'll have the item item and here inside the render item i'll get the item and return the view a view i'll call i'll grab an image source it's going to be this this uri so it's just a dummy map image and i'll apply a width actually a style of width 100 and height maybe 70 percent and i'll resize it cover right and down below i'll grab a text saying activity and then number item plus one so we have activity number one we don't need the dollar sign so activity number one number two and so on and for the view itself i like to apply a different style so i'll make the background color white i'll get the padding of spacing so i'll create this nice effect let's apply a width of width multiplied with 0.3 maybe even more so maybe 0.4 it's okay 0.3 and for the flat list here let's make this horizontal show horizontal scroll bar falls right so we make them horizontal and also apply height of width multiplied with 0.6 let's say or even less 0.5 all right and for each item i like to have a margin right of 20. and the whole flat list should have a content container style of padding spacing actually and make this a spacing as well so this is our carousel for each item when this component is going to be mounted i like to animate and with a stagger effect so instead of a view i'll make this an animatable view and this animatable view is accepting a couple of properties one is duration and one it's animation and one it's delay so an animation a duration and a delay so let's start with the animation let's apply a fade in animation the duration in our case is going to be let's say 800 or maybe yeah 500 and the delay here is going to be 400 so this is the transition animation of the routing and here i'll add based on the index another 100 milliseconds and let's grab the index so this way i'll increment the delay based on the index position right and if i hit save now uh i need to close also the tag here no problem so if i hit refresh and go to the tile and now each item will have this stagger effect and if i'm increasing the animation here or the delay so 400 and animation will be 800 milliseconds this will be one by one right so i'll make this 400 maybe even bigger and 100 and the what's nice about this animatable is that you can customize the animation config so i'll have here uh zoom in animation and for the zoom in animation grab here zoom in if you're familiar with the web keyframes this should be familiar to you so zero is the zero percent and one is the 100 right you can also specify a from and two keywords it's exactly how css keyframes are working on the web so uh when this is at zero percent i would like to have an opacity of zero and a scale of zero and at one hundred percent i like to have an opacity of one and a scale of one so now if i hit save go back now when this item will be rendered you see we have this nice zoom in animation with opacity as well and it's really looking really really nice that was it guys thank you so much for staying so long with me i hope that this tutorial was helpful to you and you learn some new tips and tricks here and there and some new techniques that you can apply in your existing projects or future projects of yours if you have any comments or any issues don't hesitate to leave one comment here down below in the comment section i'll do my best to answer and help you out as much as i can also if you have like real issues there is a discord channel down in the description and you can join it and ping me directly there i've created a dedicated channel on it where i'm doing my best to help you out as well don't forget to subscribe smash the ring button and the like button as well if you like this video and other than that see in the next video enjoy it bye you

Channel: Catalin Miron

Views: 32,952

Keywords: catalin miron, 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 example, shared element transition, react native flatlist carousel, react native carousel animation, react navigation v5, React native animatable, react navigation, react native animated api, react native flatlist animation, react native parallax scroll

Id: Zol6ivicuo8

Length: 31min 50sec (1910 seconds)

Published: Wed Sep 16 2020