Snapchat Shared Transitions - “Can it be done in React Native?”

hello react native developers welcome to can it be react native in this episode we are looking at what is arguably the most important primitive to give this feeling of delightfulness to the users of your app thank you [Music] guys i hope you are well william here recording from beautiful switzerland in this week's episode we are looking at the snapchat shared transitions so here i have a list of stories i can tap on one drag the story around and as i move the story the scale is a bit different and i can snap back here or into position and i am pretty excited about this video because shared transitions can really dramatically improve the level of delightfulness of your apps and they are now really a commodity in react native they are extremely easy to do and they used to not be possible to do at all in react native at least not in a performance manner so i'm really happy that now we have a great primitive we can play with and that really makes your app look and feel incredible and this primitive is the shared element library from ein which is and there is there are two libraries the library that deals with the main functionality of building a shared transition and then on top of that we have the react navigation shared element library which builds on top of it and that does all the boilerplate that needs to be done if you want to integrate shared transition with react navigation and this library in version 3.0 works with react navigation v5 and it just does a lot of boilerplate you will have to do if you were to use the raw library directly i've played with the raw library directly and i can tell you that if you want to do the integration yourself with your navigation it's a lot of work so this is just great that this has been done for us via the react navigation shared element library so incre again incredible community work uh without these community libraries and the support also of expo and other players in the community we wouldn't have so i'm thinking about svg reanimated we wouldn't have these essential primitives that allow react native app to look and feel incredible and so quickly the way shared element transitions work in react native so we have here two screens so the screen with the list of stories and the screen with the story open and by defining the shared elements and which ids so here there is an id linked to this story so so the library knows from which element to which element transition and when we go back as well so what the library does is that on press it will overlay this view so it's going to calculate the size of the shared element and also it's a visual overlay on top of the view transition to the end view so this is done while it's overlaid on top of the screen and then below the new view is gonna appear the overlay here is gonna disappear and so for the user it's gonna look like magic it's going to the shared transition is going to look perfect so if we go back to the phone here so this is how we're going to implement the share transition to go from the thumbnail to the full story and then we're going to add the pan gesture handler so that when we move the story around we translate the story we also change its scale and then when we release the gesture we're going to calculate the snap point to know if we go back to the original position or we go back to the full screen view like this but what do you guys think can it be like react native let's have a look guys before we get started one thing if you're interested to learn the fundamentals of gestures and animations in react native i hope that you will check out my online course at start react native.dev my goal with this course is to provide you with all the tools and knowledge necessary in order to build incredible user experiences that will run at 60fps even on low-end devices reanimated2 is now in release candidate so get ready i have already quite some lessons for reanimated2 i'm in the process of updating the course to a full version so if you're interested to learn the fundamentals i hope that you will check it out at start react native.dev we are into vs code now and i have a boilerplate project which you can download from the video description in case you want to code along with this example i have a stack navigator with two screens the snapshot screen which is this list view that you see here and the story screen which is the screen that opens when i click on one item from the list and we're gonna do this in two steps first we're gonna set up the shared transition to go from one image of the list to the full view and back and the second step we're gonna set up the gestures and animations to work like on the snapchat app and to set up the shared transition step one we're gonna instead of using a stack navigator we're gonna use a shared element stack navigator we're gonna in each of our screens tell a shared element navigation to where are our shared elements and which ideas they have and finally in story we need to tell so when we go back from stories we need to tell to which element we need to do the shunt transition to because in snapchat all these elements in the listview can potentially be shared elements so when we go back we need to tell him to which story we're coming back from so let's start with creating the stack navigator and i think that would be create shared element stack navigator from react navigation shared element so this is good and we can i mean the order of in which we're gonna do this doesn't matter so here in story what we want to do is to specify when we go back to which elements in the list we need to to do to build the share transition so we can use a prop here called shared elements we get i think the wood as parameter the router and we can simply return an array with the id of the story so we know where we come back to so i think it will be root.param dot story.id so if we go in the snapshot component it's a list in the scroll view we have stories from nail and when we press on one story here so to know which story we we display we pass story as parameter of the navigation and so here we can tell him to which story we need to go back to now we need to to specify to the library which elements are the share transitions so in the list view each thumbnail is a shared element so we can do here shared element and id is the idea of the story so story.id so this is in the list view and then in the screen where we have a single story so in the story screen we can i guess set it up here shared element id is story dot id and i think because this is wrapped into a view we're gonna need to also propagate the flex so let's have a look and let me here disable the gesture of the navigator [Music] so that didn't work let me reload so here we do and we cannot exit because i just disabled the gesture that actually looks good let me do it one more time okay maybe i should enable the gesture for now that looks good so we do have some opacity but we can fix this we do have the shared transition now let's do the gesture and animation so [Music] this is a story component so we're gonna wrap it with a gesture handler oh sorry a pan gesture handler and a single child of a channel needs to be an animated view so i'm going to transform this into an animated view and we need to create our gesture and so on gesture event and to create our gesture handler using rainmate 2 we're going to use use animated gesture under and so let me import it let me import it here let me import animated so let me create two animation values translate x translate y and because we're going to be able to move the card around so i'm going to create translate text is used shared value and translate y which is also use shell value and just to test we can do on active get the translation x translation y value oh we add it here in the completion and we can do translate x dot value equals translation x and translate why the value equals translation y and we can create a style that is using these values just to see if it works so we can create style use animated style and i can return transform oops translate x translate x dot value translate y translate why the value and let's pass the style we can add the flex here flex 1 so i can pass style here directly up so now i can move it around that's nice of course if i stop nothing happens so let's deal with the gesture when we release so on end and i'm gonna need the velocity x velocity y to do the spring so we need to check if we when we release the gesture there are two positions possible either we spring the anime the image back to full screen or either we go back and we let the shared transition deal with doing the transition from the current state of the screen to the previous screen so to detect if we go back or not we calculate the snap point if we're snapping to the top of the screen we just spring to translate x and translate y to be zero if not we just do navigation dot go back so let's create um go back and to know if we go back we calculate the snap point where we're snapping redash is providing us a utility function to let us know where the value is going so it's called snap point we pass the value here it's going to be translation y and we are looking vertically we pass the velocity velocity y and the snap points are either zero top of the screen or bottom height and we go back if the snap point is height so let me import snap point if we go back we just do navigation go back and we let the shared element library take care of everything else if not we spring so translate x dot value equals weave spring to zero and we pass the velocity as parameter to configure the spring so that would be velocity equals velocity x and we do the same for y okay should i so you see here it springs nicely back to the top and if i close yeah pretty cool right so we have a strange opacity transition when we start but we can go back nicely um something is off with the shared transition i'm wondering i know what is what is wrong i think this is the issue because here it the library does a special processing if it's an image and here i think it doesn't detect but the shared element is an image because of because there are childs in between and i am tempted to put it here in order to improve the way the transition works however so does it mean container probably i should add style flex one here so that the image displays properly so already much better yes perfect but as you can tell there's some things we need to to improve first you see here this shouldn't appear when i'm moving this card around this should have some border radius and on the snapshot app the more you go down the more the story gets smaller i guess to indicate intuitively that you know when snapping to the bottom position it will go back here so let's uh massage the octopus let's do these things um so we go back in story let's do the border radius so we want some border radius when the position is active so is gesture active boolean value default force onstart we set it to true um on end we set it to force and we can create a style so let's call it border style which is a use animated style um sorry border regis we can do like a transition to it and we go so if the gesture is active we go to 24 if not zero things should be good and we can pass it to the image so this becomes an animated dot image if it's a video we can pass it here also and this becomes an animated video let me create animated video so animated video equals animated create animated component video okay pretty cool now works as well with the video now let's hide the image here in the background so if we go here so the thumbnail oops sorry about that we're gonna add a state for the opacity so opacity set opacity when we click we're gonna set it to zero default value is one of course it's visible and then when the focus is found again we set it we reset it to one so use state zero no one let me just fix here the import so default value is one when we press here we set it to zero maybe i should put it here after opacity we pass i'm wondering where should i apply the style here i mean i guess doesn't matter to which element [Music] and when the focus is found again i think we have use focus effect yes is what we want [Music] and do we get we don't know if it's focused or not can we do navigation is focused if navigation is focused is it a method or a function it's a function then we can set opacity back to one so let's have a look [Music] you die no okay it's working so i press and you see in the background you don't see the image we have nice border radius and i can snap back to the top and here it snaps nicely into position isn't that cool so we just forgot a small thing here is that when we move the image around we need to scale down the image and so here we can interpolate a scale value so we can interpolate based on the translation translate y and so we go from zero to height and at zero the scale is one at height the scale is let's say zero five this we can configure and we want to clamp meaning we don't want to go above and below one and zero five and so we can apply the scale here in the transform let me import extrapolate so i'm gonna apply the scale here let's have a look so you see now it uh scales down nicely but what you cannot see because you cannot see my finger but obviously because of the scale my finger this is where my finger is right now so it doesn't follow the card anymore so we can just because here the translation is based on the scale of one right so we can just multiply by scale so to keep the finger so if it's 0 5 we translate only by alf so that will keep the finger on the view yes perfect so now my my finger is following the view and so let me just reload again because i saw the background was visible so i tap yeah works nicely the card follows the position of my finger and i release so just a small edit i forgot to add the scale transformation guys i hope you enjoyed this example as you've seen these shared element transitions are quite easy now to implement in react native and just to think that a while back these were almost impossible to do in not possible to do in a performant manner and they can really dramatically improve the level of delightfulness in your apps and i am so glad that now these are a commodity in react native this is the last video that we are recording into this room i am moving out next week hopefully i will find a nice new setup and the schedule of videos won't be too disrupted so i am looking forward to talk to you soon and until next time happy hacking [Music] [Applause] you

Channel: William Candillon

Views: 26,478

Keywords: React, React Native, Can it be done In React Native?, Animations, Gestures, TypeScript, JavaScript

Id: NJZfRXs7nZs

Length: 25min 27sec (1527 seconds)

Published: Tue Dec 01 2020