Upgrade reanimated (#5200)

* Upgrade reanimated to fix crash

* Fix type errors from reanimated upgrade

* lint

* Fix HourglassAnimation

* Revert "move nft fetching logic to graphql worker (#5421)"

This reverts commit fff25a6.

* Bump reanimated to v3.7.1

* Improve animation frame rates

I suspect the request for 120fps is being rejected, so instead this requests a range of 80-120fps, with a preferred frame rate of 80fps — any higher than 80fps resulted in a lower frame rate, presumably because the request was rejected

This should improve frame rates for all animations throughout the app

* Fix android build - remove old reanimated shim

* Fix lint error, AnimateProps deprecation warning

---------

Co-authored-by: Christian Baroni <7061887+christianbaroni@users.noreply.github.com>
Co-authored-by: Ben Goldberg <bengoldberg@rainbow.me>

ios/Podfile.lock

@@ -814,35 +814,10 @@ PODS:
     - React-Core
   - RNReactNativeHapticFeedback (1.11.0):
     - React-Core
-  - RNReanimated (3.4.2):
-    - DoubleConversion
-    - FBLazyVector
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCTRequired
-    - RCTTypeSafety
-    - React-callinvoker
+  - RNReanimated (3.7.1):
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core
-    - React-Core/DevSupport
-    - React-Core/RCTWebSocket
-    - React-CoreModules
-    - React-cxxreact
-    - React-hermes
-    - React-jsi
-    - React-jsiexecutor
-    - React-jsinspector
-    - React-RCTActionSheet
-    - React-RCTAnimation
-    - React-RCTAppDelegate
-    - React-RCTBlob
-    - React-RCTImage
-    - React-RCTLinking
-    - React-RCTNetwork
-    - React-RCTSettings
-    - React-RCTText
     - ReactCommon/turbomodule/core
-    - Yoga
   - RNScreens (3.23.0):
     - React-Core
     - React-RCTImage
@@ -1470,7 +1445,7 @@ SPEC CHECKSUMS:
   RNOS: 31db6fa4a197d179afbba9e6b4d28d450a7f250b
   RNPermissions: 4e3714e18afe7141d000beae3755e5b5fb2f5e05
   RNReactNativeHapticFeedback: 653a8c126a0f5e88ce15ffe280b3ff37e1fbb285
-  RNReanimated: 726395a2fa2f04cea340274ba57a4e659bc0d9c1
+  RNReanimated: 43675f1f0e704abe8ebf953fd79b00e66302cda2
   RNScreens: 6a8a3c6b808aa48dca1780df7b73ea524f602c63
   RNSentry: fbbdcd7213058e3de5fbaa452b25a06a16b4b382
   RNShare: eaee3dd5a06dad397c7d3b14762007035c5de405

package.json

@@ -244,7 +244,7 @@
     "react-native-quick-md5": "3.0.3",
     "react-native-radial-gradient": "rainbow-me/react-native-radial-gradient#b99ab59d27dba70364ef516bd5193c37657ba95c",
     "react-native-randombytes": "3.5.3",
-    "react-native-reanimated": "3.4.2",
+    "react-native-reanimated": "3.7.1",
     "react-native-redash": "16.3.0",
     "react-native-restart": "0.0.22",
     "react-native-safe-area-context": "4.5.3",

patches/react-native-reanimated+3.7.1.patch

@@ -0,0 +1,21 @@
+diff --git a/node_modules/react-native-reanimated/.DS_Store b/node_modules/react-native-reanimated/.DS_Store
+new file mode 100644
+index 0000000..928aae8
+Binary files /dev/null and b/node_modules/react-native-reanimated/.DS_Store differ
+diff --git a/node_modules/react-native-reanimated/apple/REANodesManager.mm b/node_modules/react-native-reanimated/apple/REANodesManager.mm
+index ed36c99..0156141 100644
+--- a/node_modules/react-native-reanimated/apple/REANodesManager.mm
++++ b/node_modules/react-native-reanimated/apple/REANodesManager.mm
+@@ -176,7 +176,11 @@ - (READisplayLink *)getDisplayLink
+   if (!_displayLink) {
+     _displayLink = [READisplayLink displayLinkWithTarget:self selector:@selector(onAnimationFrame:)];
+ #if !TARGET_OS_OSX
+-    _displayLink.preferredFramesPerSecond = 120; // will fallback to 60 fps for devices without Pro Motion display
++    if (@available(iOS 15.0, *)) {
++      _displayLink.preferredFrameRateRange = CAFrameRateRangeMake(80, 120, 80);
++    } else {
++      _displayLink.preferredFramesPerSecond = 120; // will fallback to 60 fps for devices without Pro Motion display
++    }
+ #endif
+     [_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
+   }

shim.js

@@ -3,13 +3,13 @@ import 'react-native-url-polyfill/auto';
 import '@ethersproject/shims';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import ReactNative from 'react-native';
-import Animated from 'react-native-reanimated';
 import Storage from 'react-native-storage';
 // import { debugLayoutAnimations } from './src/config/debug';
 import { mmkvStorageBackend } from '@/handlers/localstorage/mmkvStorageBackend';
 import toLocaleStringPolyfill from '@/helpers/toLocaleStringPolyfill';
 import logger from '@/utils/logger';
 import 'fast-text-encoding';
+import globalVariables from './globalVariables';
 
 if (typeof BigInt === 'undefined') global.BigInt = require('big-integer');
 
@@ -33,8 +33,6 @@ if (ReactNative.Keyboard.removeEventListener) {
   ReactNative.Keyboard.removeListener = ReactNative.Keyboard.removeEventListener;
 }
 
-ReactNative.Platform.OS === 'ios' && Animated.addWhitelistedNativeProps({ d: true });
-
 const storage = new Storage({
   defaultExpires: null,
   size: 10000,
@@ -46,33 +44,13 @@ if (ReactNative.Platform.OS === 'android') {
   ReactNative.UIManager.setLayoutAnimationEnabledExperimental?.(true);
 }
 
-if (!global.__reanimatedModuleProxy && !ReactNative.TurboModuleRegistry.get('NativeReanimated')) {
-  global.__reanimatedModuleProxy = {
-    __shimmed: true,
-    installCoreFunctions() {},
-    makeMutable(init) {
-      return { value: init };
-    },
-    makeRemote() {},
-    makeShareable() {
-      return () => {};
-    },
-    registerEventHandler() {},
-    startMapper() {},
-    stopMapper() {},
-    unregisterEventHandler() {},
-  };
-}
-
 global.storage = storage;
 
-// shimming for reanimated need to happen before importing globalVariables.js
-// eslint-disable-next-line import/no-commonjs
-for (const variable of Object.entries(require('./globalVariables').default)) {
-  Object.defineProperty(global, variable[0], {
-    get: () => variable[1],
+for (const [key, value] of Object.entries(globalVariables)) {
+  Object.defineProperty(global, key, {
+    get: () => value,
     set: () => {
-      logger.sentry(`Trying to override internal Rainbow var ${variable[0]}`);
+      logger.sentry(`Trying to override internal Rainbow var ${key}`);
     },
   });
 }

src/components/animations/ButtonPressAnimation/ButtonPressAnimation.android.tsx

@@ -6,7 +6,7 @@ import { createNativeWrapper, NativeViewGestureHandlerGestureEvent, RawButtonPro
 import { PureNativeButton } from 'react-native-gesture-handler/src/components/GestureButtons';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import Animated, {
-  AnimateProps,
+  AnimatedProps,
   Easing,
   runOnJS,
   useAnimatedGestureHandler,
@@ -49,7 +49,7 @@ const ZoomableRawButton = requireNativeComponent<
 
 const ZoomableButton = createNativeWrapper(ZoomableRawButton);
 
-const AnimatedRawButton = createNativeWrapper<AnimateProps<PropsWithChildren<RawButtonProps>>>(
+const AnimatedRawButton = createNativeWrapper<AnimatedProps<PropsWithChildren<RawButtonProps>>>(
   Animated.createAnimatedComponent(PureNativeButton),
   {
     shouldActivateOnStart: true,
@@ -129,7 +129,7 @@ const ScaleButton = ({
   return (
     <View style={[sx.overflow, wrapperStyle]} testID={testID}>
       <View style={{ margin: -overflowMargin }}>
-        <AnimatedRawButton hitSlop={-overflowMargin} onGestureEvent={gestureHandler} rippleColor={transparentColor} style={sx.overflow}>
+        <AnimatedRawButton hitSlop={-overflowMargin} onGestureEvent={gestureHandler} rippleColor={transparentColor}>
           <View style={sx.transparentBackground}>
             <View style={{ padding: overflowMargin }}>
               <Animated.View style={[sz, contentContainerStyle]}>{children}</Animated.View>
@@ -180,7 +180,7 @@ const SimpleScaleButton = ({
 
   // we won't guess if there are any animated styles in there but we can
   // not render the Animated.View if we don't use that prop at all
-  const Wrapper = contentContainerStyle ? Animated.View : View;
+  const Wrapper: React.ComponentType<any> = contentContainerStyle ? Animated.View : View;
   // hack to lay out BottomTab buttons normally instead of being stacked on top of each other
   const [overflowMarginHelper, setOverflowMargin] = useState(overflowMargin);
   const layoutHelper = () => setOverflowMargin(overflowMargin - 1);

src/components/animations/HourglassAnimation.tsx

@@ -27,7 +27,7 @@ export default function HourglassAnimation() {
   );
 
   const offsetSandMask = useDerivedValue(() =>
-    withRepeat(withSequence(withTiming(0, sandConfig), withTiming(34, sandConfig), withTiming(0, sandConfig)), -1)
+    withRepeat(withSequence(withTiming(0, sandConfig), withTiming(34, sandConfig), withTiming(0, sandConfig)), -1, true)
   );
 
   const animatedRotationStyles = useAnimatedStyle(() => ({
@@ -58,6 +58,7 @@ export default function HourglassAnimation() {
                 d="M73.173,6 L73.173,37.356 L72.389,42.825 L73.173,48.295 L73.173,79.65 L47,79.65 L47,47.752 L49.095,42.825 L47,37.898 L47,6 L73.173,6 Z M60.389,33.872 C58.972,33.872 55.698,36.856 50.569,42.825 C55.698,48.795 58.972,51.779 60.389,51.779 C61.762,51.779 65.134,48.794 70.505,42.825 C65.134,36.857 61.762,33.872 60.389,33.872 Z"
                 fill={accentColor}
                 id="hourglass-sand-mask"
+                // @ts-ignore
                 style={animatedSandStyles}
                 transform="translate(0, 0)"
               />

src/react-native-animated-charts/src/charts/linear/ChartPath.tsx

@@ -331,7 +331,7 @@ const ChartPathInner = React.memo(
     });
 
     return (
-      // @ts-expect-error We use an old version of RNGH which doesn't support React 18 types well
+      // @ts-ignore
       <LongPressGestureHandler
         enabled={gestureEnabled}
         maxDist={100000}
@@ -349,11 +349,11 @@ const ChartPathInner = React.memo(
             viewBox={`0 0 ${width} ${height}`}
           >
             <AnimatedPath
-              // @ts-expect-error
               animatedProps={animatedProps}
               stroke={stroke}
               strokeWidth={strokeWidth}
               strokeLinecap="round"
+              // @ts-ignore
               style={pathAnimatedStyles}
               {...props}
             />