search

rgommezz / react-native-scroll-bottom-sheet

Cross platform scrollable bottom sheet with virtualisation support, native animations at 60 FPS and fully implemented in JS land :fire:
MIT License
1.54k stars 66 forks source link

Use spring instead of timing #4

Closed harterc1 closed 4 years ago

harterc1 commented 4 years ago

You should consider using react-native-reanimated spring instead of timing.

https://software-mansion.github.io/react-native-reanimated/spring.html

You can use the gesture's velocity as a starting velocity so that the bottomsheet snaps to a snap point at a natural speed & momentum -- better user experience.

rgommezz commented 4 years ago

Hi @harterc1,

I already take velocity into account to determine what the next snap point should be, but having a Easing.Linear function probably wasn't the best default of choice since it doesn't feel very natural.

I agree that adding the possibility of having a spring animation driver could come in handy for extending the animations range. Will take a look soon.

In the meantime, you can configure the animation by providing a duration and/or a different easing function, via animationConfig. Have you tried that?

For example, to simulate a spring animation, you could use:

animationConfig: {
    easing: Easing.out(Easing.elastic(bounciness))
}

Here is information about bounciness value

tankers746 commented 4 years ago

I've created a PR for this! https://github.com/rgommezz/react-native-scroll-bottom-sheet/pull/36

rgommezz commented 4 years ago

Thanks to both @tankers746 and @dcoulter45 spring animations support has landed on version 0.7.0! 🚀