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.55k stars 67 forks source link

Compatibility with Reanimated alpha v2 #33

Closed ferrannp closed 4 years ago

ferrannp commented 4 years ago

Current Behavior

Expected Behavior

How to reproduce

Solution: Need to support interpolateNode instead of interpolate and EasingNode instead of Easing.

Your Environment

package version
react-native-scroll-bottom-sheet 0.6.2
react-native 0.62.2
react-native-gesture-handler 1.7.0
react-native-reanimated 2.0.0-alpha.3
ferrannp commented 4 years ago

I was able to make it work with react-native-reanimated: 2.0.0-alpha.4 and also patching the library like:

diff --git a/node_modules/react-native-scroll-bottom-sheet/src/index.tsx b/node_modules/react-native-scroll-bottom-sheet/src/index.tsx
index c4dbcce..98a53e2 100644
--- a/node_modules/react-native-scroll-bottom-sheet/src/index.tsx
+++ b/node_modules/react-native-scroll-bottom-sheet/src/index.tsx
@@ -20,13 +20,13 @@ import Animated, {
   Clock,
   clockRunning,
   cond,
-  Easing,
+  EasingNode as Easing,
   eq,
   event,
   Extrapolate,
   greaterOrEq,
   greaterThan,
-  interpolate,
+  interpolateNode as interpolate,
   multiply,
   not,
   onChange,

You might one to do something similar to https://github.com/react-navigation/react-navigation/blob/8468c46cab01fe3bf0cf8a0ab978d16f4e78aca0/packages/drawer/src/views/Overlay.tsx#L5-L14 to support Reanimated 2 out of the box.