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

  • @arupde6320
    @arupde6320 Жыл бұрын

    bro convert some basic or complex design from figma to react native using reanimated .

  • @monisankarnath

    @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

    @arupde6320

    Жыл бұрын

    @@monisankarnath baat toh sahi bol rahe ho . its not practical . But still try .

  • @monisankarnath

    @monisankarnath

    Жыл бұрын

    yup will try that :)

  • @lfatx

    @lfatx

    Жыл бұрын

    Actually I'd also prefer a panhandlers only version

  • @olubiyioluga1584
    @olubiyioluga1584 Жыл бұрын

    Next time, kindly write the code from scratch?

  • @monisankarnath

    @monisankarnath

    Жыл бұрын

    Thanks for your suggestion brother. This has a simple setup, u can check the GitHub code as well 😀