search

software-mansion / react-native-reanimated

React Native's Animated library reimplemented
https://docs.swmansion.com/react-native-reanimated/
MIT License
8.97k stars 1.3k forks source link

react-native-scroll-bottom-sheet crashes if using Reanimated v2 #1037

Closed ferrannp closed 4 years ago

ferrannp commented 4 years ago

Description

I created a repo https://github.com/ferrannp/bottom-sheet-reanimated2-example and followed https://docs.swmansion.com/react-native-reanimated/docs/next/migration/. The component still crashes (works well in latest v1).

Full issue is here https://github.com/rgommezz/react-native-scroll-bottom-sheet/issues/33.

I thought it might be good to have this issue too as it might happen in other libraries? I was told to ping you @jakub-gonet. Let me know if it is ok.

Steps To Reproduce

Just run (for iOS): https://github.com/ferrannp/bottom-sheet-reanimated2-example . I didn't try on Android (reanimated not linked).

Expected behavior

To work as in Reanimated v1.

Actual behavior

The library is crashing.

jakub-gonet commented 4 years ago

Thanks for the detailed report!

Next time please include error message as well. Your issue is connected to partially migrating from v1 to v2, you missed rename of Easing to EasingNode. Try changing your patch to one below:

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..a0169d6 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,

and FYI, we released v2 alpha-4, you may want to check it out, it fixes some problems.

Cheers!

ferrannp commented 4 years ago

Thank you! with alpha 4 and patching Easing worked. I was actually confused at some point with Easing because my IDE was telling me it was not exported... Looks like was types from TS: https://github.com/software-mansion/react-native-reanimated/blob/master/react-native-reanimated.d.ts not exported. Thank you again for the help!

jakub-gonet commented 4 years ago

I see, thanks for mentioning that.