Create Instagram/Airbnb style Navigation with React Native Reanimated V3

hello react native developers welcome back to my channel so today what we are going to build is we are going to build a Instagram style navigation where we when we have a list of ports and when we click on the post we open the tail View and we can just use our gestures to your fingers to go back to the screen we can scale the down scale down the detail screen we can move it to the X and Y value and then we can go back to the post screen so let me show you how it will work let me go back to this in where we were and now so as you can see we have the list of posts where we have three columns and now when I open this it will open like this like it opens in the Instagram and when we scroll our finger or we move our finger it will look like this and when we drop it it will go back to the same place where it was so this is what we are going to build today so let's get started here I have already created some components here which is the image the post screen and then we have the detail screen and now we are going to implement that animation and shared element animation with this screen this both screen so what I have what I have did in this is in the app.js I have defined a navigation container and then a stack Navigator which is with we have two screens which is the post and details and then in the post we have a flat list which is showing the images in three columns and then in the detailed view what we have is we just are showing an MS here and we are going to use the react natively animated version 3.0 in this so let's get started first thing I want to show you is in the post we are going to make all the views to animated View let's import animated from react native animated and wrap this image to animated.ms and we are also going to wrap this animator Dot because when we are animating the the whole screen of the tail view then we also going to maintain the background of that detail screen inside this Ms View I will show you back so now I have defined the animated view in this and what I'm going to do is I am going to define the share transition tag and this will be item dot ID to string plus whatever the random number or random string you want to attach because I also want to add some share tag to this animated View and this will be item Dot ID toasting and we are not going to add this one here because this is the main View so now our this view is ready and we can save this till now nothing is new it's the same also what I am going to do is I am going to disable the header for this retail post detail View and it will be shown here only so now we have the image and this tail View let's reload it and also in the detail screen what I'm I'm going to use the same transition tag for the view and for the image so let's jump into here and this will be animated Dot View let's first import the animated animated and also let's make this animated dot image and we are going to accept the ID and we will add the tags here that will be adding to string and for this it was plus one ID wrote to string plus one so now as we have configured this error element with this now it will look like this yeah so we have we can already see that we have the anime smooth animation which is like when we click the post and it zooms into the post it zooms into the image like this like this is looking beautiful and now what we are going to do is I'm going to add pan gesture Handler to this screen so when we move our fingers like swipe down or swipe left or right then it will scale down the screen and also when we scale down to at some level then we will go back to the screen and that will make the whole animation look great so let's start with the react native gesture hanger let me import this import react native gesture Handler and we are going to import two things from here one is the gesture detector and the second is gesture only and now we are going to wrap this whole component with the gesture detector and after that we are going to define the gesture we are going to Define pan gesture for this specific screen now let's do that gesture is equal to gesture and let's define const gesture gesture dot pan and now we are going to add two functions which one is the on update whenever we are doing some update on the gesture when gesture is hitting so it will update and we get the values and the second is when the series ended on end like this dot on end also we are going to Define animated style which we are going to use for animating the animated View let's do that animated style is will is going to we are going to import use animated style from the react native react Nativity animated use animated Style and it will return an object and let's use this it will be an array and then animator Style so now our almost done with the gesture Handler we have integrated gesture Handler and we can now start defining the actions like how we can do it first we are going to do the translate X and Translate Y so let's define those two variables translate X is equal to it will be say animated value which is going to be 0 and same for the trans fat y and after that we are going to animate it so translate export value will be value dot translate X I am downgrading it to 0.80 because when we are moving our fingers too fast then we can move it so much down like we can't see the screen so I'm just making sure that we make we saw something on the screen whenever our screen is in the bottom part of the screen and same for the Translate Y Translate Y Dot value it will be value Dot Translate Y into 0.8 I think we have some issue okay this is the issue we added something else and now we are good now let's define it in the animated style transform first is translate X that will be translate x dot value and second is the Translate Y it will be same also we want to make sure that when our gestures and ended we make the translate X and Translate Y to the same position where it was so how we can do it translate x dot value with timing it will be 0 and duration will be 300 milliseconds same for the Translate Y and if we do this let's try to run this now as you can see when I'm moving my mouse with this we can see the image is moving I'm moving it to right if to left and we can see and it is also going back but there is one problem with this like when we are doing this we can't see the previous screen we can't see all the posts which are there so how we can do this let's define the stack Navigator as a model and then we can see the previous screen so how we do this presentation style will be transparent model if you do this we can see the previous screen it is not showing Let me refresh it so if I refresh this and I open this post you can see I can I can see the previous post screen but still there is actually like when we are opening our post we don't want to see it but only we want to see when we are moving go to when we are moving it and when we are going back so how we can do this we can Define the background color and the opacity and when we are going back then we are going to use the opacity to zero so let's define the opacity constant opacity it will be your sale value one initially it will be 1 and we are going to downgrade it to 0 when we are going back so when we are going back when the Translate Y dot value is greater than 100 so how we can do this Translate Y dot value it is greater than 50. we are using 50 now and I am going to run on the JS thread because it is a JavaScript function and it will not run on the worklet of the gesture animation so when we are going back we want to make sure opacity not value is 0. and now let's set in the style so background color will be interpolate color opacity dot value in its input is 0 or 1 and then output will be if it is 0 then we want it transparent if it is 1 then we are going to show the byte see how we just now we can see that right now opacity is one we can see the white background and when we are going back we can see like divide background is hidden and we are just going nicely to the back post screen but there are still some issues with this screen is this is not working let me reload this that first we have to add some border radius to make it look good border various will be 20 and we are also going to use overflow hidden because Ms when we do the Border radius for the upper part and we are using image then it overflows and we can't see the board radius so we have to use the Overflow hidden if we do this then we can see the Border radius is looking good but still we have one thing which is left in this which is scaling it down to a level where we can see like something is going and we can go back and how we can do this let's define the scale use saved value scale first it will be one and the minimum we are going to use is 0.9 because if we do more than that then it will not look good it will look very small in the screen so let's do that so on update first I'm going to calculate the distance of the finger we are moving on the pan gesture Handler so how we can do that we are going to use the math dot square root and it will be valued or translation X into valuable translation X Plus translation Y into value dot translation y so if we do this we can calculate the distance how much we move our finger over our Mouse and then we are going to use the scale to use the minimum and maximum value so how we can do the scale value then it will be math dot name net dot next a little bit distance by 100 and 1 and minimum we want to use it 0.9 after doing this we can set the scale dot value to scale value we can do it with timing and duration will be hundred as we are not using any scale right now we have to pass it in a transform scale scale load value if we do this and I think we are complete with the code let's see the result we open this this is opening nicely and then when we are going it down it is scaling to down and we can see our screen but we still have one issue with this like when we are moving our finger below 50 pixels then it is staying there it is not going back to the where it was so how we can do that we have to add the else condition here else to have this and we also have to scale Dot value to wait timing one duration will be 300. so if we do this then it will go back to the position where it was it is going back and it is going back to the pause screen so now we are good so that's all for this video guys if you learned something please do subscribe to my channel and also do comment if you have any questions thank you so much

Channel: Amit Khatkar - Untangle Code

Views: 7,303

Keywords: react native, react native reanimated, react native gesture handler, react native navigation, react native instagram navigation, instagram navigation guide, instagram modal, react native tutorial, react native animations

Id: jvIuZrLgbMw

Length: 15min 21sec (921 seconds)

Published: Fri Apr 28 2023