Creating a BottomSheet Backdrop in React Native

what's up mobile devs I hope everything is going well today I want to share with you the part 2 of the tutorial related to the bottom machine to be honest at first I didn't plan to continue this tutorial but so many of you request me to add the backdrop on it in the first tutorial the backdrop seemed almost useless since the background behind the card was dark but clearly by changing the background color using white the problem is quite obvious although it seems trivial from my perspective there are some very useful Concepts behind the creating the backdrop I take this opportunity to tell you that a few months ago I created a patreon account where I actively share the source code of really special animations in react native using skia and reanimated I would like to sincerely thank my patrons who have supported me and motivated me to be more active on YouTube as well if you want to stay updated you can follow me on Twitter where I post previews of the patreon animations that said we can finally go ahead and get our hands dirty so basically here you can see that I've opened the product that was already available at the end of the previous tutorial of the part one I've simply updated the Xbox Decay to the version 48 and I've updated even the react native version Handler packager and the reanimated package to the latest versions available so fortunately the code is basically the same nothing has changed the two packages of course have some updates but nothing on the apis so right now in order to understand better what is the current missing part let's try to update here the background color and let's update the background color of the button so right now you can see of course that there is something that isn't working anymore so or at least it is working but it's quite different as what we are expecting there is definitely here missing in the backdrop View so let's also update the status bar so right here just to keep things clean but basically the problem is almost the same so we are not able to see in the backdrop view under under the bottom shadow so let's start to add here simply a reactive View so let's import you from react native and let's define here a simple view let's type should absolute field object and with this background color introduce 0.4 so this background color is almost black with an opacity of 0.4 and I've used absolute fill object in order to cover all the screen so right now the backdrop is of course available but the problem is that we are not able to we are not able to toggle the button so right now basically I'm tapping on the button but the the top has been totally cached by the backdrop View so in order to unhandle the the top events the gestures and the interruption basically we can simply use the pointer events property and we can set it to none so let's reload here you can see that everything is working basically as before and backdrop is available so there are other few issues that we need to cover of course the first of all we don't want to we don't want to see the backdrop when the when the card is uh not visible so in this specific use case we don't want to see of course the backdrop in this case we want to see it and in order to manage this uh this thing of course we need to animate the opacity of the viewer and in order to animate we always need to use the animated view so animated of course is imported by react native pre animated so here let's define the reanimated backdrop Style and for now let's simply use the use animated style and let's return basically nothing let's pass this laptop style to the style and let's try to understand what we need to change right here so of course we are going to play with the opacity but we need to understand how to set the opacity value so here the backdrop is of course available but is a totally invisible so basically fortunately from the previous tutorial we have we still have the active shared value and the active Share value tells us if the card is visible or not so basically if the card is visible we want the T opacity of the backdrop is equal to zero otherwise we want that the backdrop is equal to one so actually it is the opposite so if the card is visible we want to see the backdrop with the opacity but one otherwise we want to set it to equal to zero so here you can see that the condition is correct so of course we want to to have a smooth transition and in order to have a smooth transition we simply need to apply the with timing I order function from reanimated so you can see that right now everything is working perfectly so um there's still a simple issue that we need to solve that is not that is not the trivial actually so basically by tapping on the button we are able to have the nice behavior but by tapping on the backdrop right now nothing is happening and the point is that we want to dismiss we want to dismiss this card while tapping on the backdrop so in order to handle this use case we need to implement here the untouched start callback on the animated View and we want basically to scroll to zero so we want to close we want to dismiss the important so that's interesting enough that the untouched start callback is not firing and that's quite obvious since we have first pointer events equal to none so by forcing it back to Auto as it was at the beginning we can see that the the untouched start is firing nicely so how can we solve the problem basically we cannot force the pointer events to Auto otherwise the button will not be clickable at the beginning and we're not we cannot force Point pointer events equals To None otherwise the untouched start will not be cooled and the bottom sheet will not be dismissed so basically we want to change these pointer events property dynamically referring to the active.value but the point is that the active.value is not simply a JavaScript value available with a used State hook but it is actually a shared value from reanimated so basically we cannot do something like that right something where we can use this type of condition of course it will not work so in order to manage these uh this property we have a similar hooking react native in our reanimated similar to the use and Method style that is related to the props and this Hook is called the use animated props so let's define here the reanimate the backdrop props with use animated props and here let's return to events with the active.value so basically if the card is active if the bottom sheet is visible we want to be able to catch all the top on the backdrop so we want to set the auto Behavior otherwise we want to be able to interact with the components that are under the back curve so we want to set back the pointer events equal to none so we can do that and we simply need to pass this reanimated Vector props to the animated props so right now typescript with complain since the type is not perfect so we are simply going to close our eyes and we are going to set the object equal to any of titanium so as you can see right now everything is working totally smoothly so of course this transition was needed the backdrop is super useful and this approach this pattern is uh it happens in a lot of different use cases in animations so that was definitely a missing piece inside this uh this tutorial so hopefully the explanation was clear thanks a lot for staying with me all this time to check out this tutorial if you like this type of animations this kind of a tutorial feel free to subscribe to the to the channel and if you have some suggestions for future videos feel free to suggest me these uh video so these animations in the section below

Channel: Reactiive

Views: 11,205

Keywords: react native, reanimated, animations, react native animations, app development, gestures

Id: hfsBArfvK74

Length: 10min 2sec (602 seconds)

Published: Fri May 05 2023