Custom Bottom Sheet using React Native Pan Responder
In this video we are going to create a custom bottom sheet with 3 snap points using pan responder api from react native and use the interpolate method to update our bottomsheet height on a drag gesture. We are also going to add spring animation with bouncy effect when we want to cancel the animation.
Final Code Github Repo - github.com/Monisankarnath/Rea...
Timecodes
0:00 - Intro
00:28 - Initial Setup
02:04 - Project Start
04:09 - Pan Responder
08:05 - Interpolate
12:22 - Spring Animation
14:56 - Drag Threshold
#technology #react #learning
Пікірлер: 7
bro convert some basic or complex design from figma to react native using reanimated .
@monisankarnath
Жыл бұрын
It can be done brother, but the thing is it is not practical. Customer or user wants something easy to use without any complex understanding requirement. I will be posting the same animation using Reanimated though, wait for it 🤘
@arupde6320
Жыл бұрын
@@monisankarnath baat toh sahi bol rahe ho . its not practical . But still try .
@monisankarnath
Жыл бұрын
yup will try that :)
@lfatx
Жыл бұрын
Actually I'd also prefer a panhandlers only version
Next time, kindly write the code from scratch?
@monisankarnath
Жыл бұрын
Thanks for your suggestion brother. This has a simple setup, u can check the GitHub code as well 😀