Update version of react-native-reanimated to 2.4.0 (#1821)

* Update versions of react-native-reanimated and react-native-gesture-handler

* Update reanimated to 2.3.1

* Fix exposed issue with interpolateColors can't handle undefined values

* Bumped reanimated to 2.4.0

* Fix TabController on Android

Swipe the carousel, label does not change color.

* Fix tests (workarounds)

* Remove expect errors

* Change function name

See https://github.com/software-mansion/react-native-reanimated/pull/2792/files

* Remove setup which seems to be no longer needed

* Revert to old function (for users who use older versions of reanimated)

* Change to noop

* Allow overriding onMomentumScrollEnd

* Fix types

Co-authored-by: Ethan Sharabi <[email protected]>
Co-authored-by: Miki Leib <[email protected]>
(cherry picked from commit 1a8a07a)

Author: 3 people

generatedTypes/src/components/tabController/PageCarousel.d.ts

@@ -1,10 +1,9 @@
 /// <reference types="react" />
+import { ScrollViewProps } from 'react-native';
 /**
  * @description: TabController's Page Carousel
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
  * @notes: You must pass `asCarousel` flag to TabController and render your TabPages inside a PageCarousel
  */
-declare function PageCarousel({ ...props }: {
-    [x: string]: any;
-}): JSX.Element;
+declare function PageCarousel(props: ScrollViewProps): JSX.Element;
 export default PageCarousel;

generatedTypes/src/incubator/TransitionView/useAnimatedTranslator.d.ts

@@ -8,11 +8,11 @@ export default function useAnimatedTranslator(props: TranslatorProps): {
     init: (to: {
         x: number;
         y: number;
-    }, animationDirection: TransitionViewDirection, callback: (isFinished: boolean) => void) => void;
+    }, animationDirection: TransitionViewDirection, callback: (isFinished?: boolean | undefined) => void) => void;
     animate: (to: {
         x: number;
         y: number;
-    }, animationDirection: TransitionViewDirection, callback: (isFinished: boolean) => void) => void;
+    }, animationDirection: TransitionViewDirection, callback: (isFinished?: boolean | undefined) => void) => void;
     animatedStyle: {
         transform: ({
             translateX: number;

generatedTypes/src/incubator/TransitionView/useAnimationEndNotifier.d.ts

@@ -6,6 +6,6 @@ export interface AnimationNotifierEndProps {
     onAnimationEnd?: (animationType: TransitionViewAnimationType) => void;
 }
 export default function useAnimationEndNotifier(props: AnimationNotifierEndProps): {
-    onEnterAnimationEnd: (isFinished: boolean) => void;
-    onExitAnimationEnd: (isFinished: boolean) => void;
+    onEnterAnimationEnd: (isFinished?: boolean | undefined) => void;
+    onExitAnimationEnd: (isFinished?: boolean | undefined) => void;
 };

jest-setup.js

@@ -1,14 +1,17 @@
 import {NativeModules, AccessibilityInfo} from 'react-native';
 
-require('./node_modules/react-native-reanimated/src/reanimated2/jestUtils').setUpTests();
-
 NativeModules.StatusBarManager = {getHeight: jest.fn()};
 jest.spyOn(AccessibilityInfo, 'isScreenReaderEnabled').mockImplementation(() => new Promise.resolve(false));
 
 // mock native modules
 jest.mock('@react-native-community/blur', () => {});
 jest.mock('@react-native-community/netinfo', () => {});
-jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));
+// TODO: Adding here a todo for package.json: need to remove moduleNameMapper, see this: https://github.com/software-mansion/react-native-reanimated/issues/1196
+jest.mock('react-native-reanimated', () => {
+  const reactNativeReanimated = require('react-native-reanimated/mock');
+  reactNativeReanimated.interpolateColor = jest.fn(v => v); // TODO: See this https://github.com/software-mansion/react-native-reanimated/issues/2749
+  return reactNativeReanimated;
+});
 global.__reanimatedWorkletInit = jest.fn();
 jest.mock('react-native-gesture-handler', () => {});
 jest.mock('@react-native-picker/picker', () => ({Picker: {Item: {}}}));

package.json

@@ -104,7 +104,7 @@
     "react-native-keyboard-tracking-view": "^5.6.1",
     "react-native-linear-gradient": "2.5.6",
     "react-native-navigation": "^7.19.1",
-    "react-native-reanimated": "2.2.4",
+    "react-native-reanimated": "2.4.0",
     "react-native-shimmer-placeholder": "^2.0.6",
     "react-native-svg": "^12.1.0",
     "react-native-svg-transformer": "^0.14.3",
@@ -133,6 +133,9 @@
     "setupFiles": [
       "./jest-setup.js"
     ],
+    "moduleNameMapper": {
+      "^react-native-reanimated$": "<rootDir>/node_modules/react-native-reanimated/src/Animated.js"
+    },
     "transform": {
       "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
     }

src/components/segmentedControl/index.tsx

@@ -7,6 +7,7 @@ import Reanimated, {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
+  WithTimingConfig,
   runOnJS
 } from 'react-native-reanimated';
 import {Colors, BorderRadiuses, Spacings} from '../../style';
@@ -16,8 +17,9 @@ import Segment, {SegmentedControlItemProps as SegmentProps} from './segment';
 import {useOrientation} from 'hooks';
 
 const BORDER_WIDTH = 1;
-const TIMING_CONFIG = {
+const TIMING_CONFIG: WithTimingConfig = {
   duration: 300,
+  // @ts-expect-error TODO: change this to bezierFn or to the new implementation
   easing: Easing.bezier(0.33, 1, 0.68, 1)
 };
 

src/components/tabController/PageCarousel.tsx

@@ -1,4 +1,5 @@
 import React, {useCallback, useContext, useMemo, useEffect} from 'react';
+import {NativeSyntheticEvent, NativeScrollEvent, ScrollViewProps} from 'react-native';
 import TabBarContext from './TabBarContext';
 import Reanimated, {
   runOnJS,
@@ -16,7 +17,8 @@ const FIX_RTL = Constants.isRTL && Constants.isAndroid;
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
  * @notes: You must pass `asCarousel` flag to TabController and render your TabPages inside a PageCarousel
  */
-function PageCarousel({...props}) {
+function PageCarousel(props: ScrollViewProps) {
+  const {onMomentumScrollEnd, ...others} = props;
   const carousel = useAnimatedRef<Reanimated.ScrollView>();
   const {
     itemsCount,
@@ -73,7 +75,6 @@ function PageCarousel({...props}) {
     }
 
     const actualIndex = FIX_RTL ? itemsCount - index - 1 : index;
-    // @ts-expect-error
     carousel.current?.scrollTo({x: actualIndex * pageWidth, animated: false});
   },
   [pageWidth, itemsCount]);
@@ -88,13 +89,16 @@ function PageCarousel({...props}) {
   });
 
   useEffect(() => {
-    // @ts-expect-error
     carousel.current?.scrollTo({x: currentPage.value * pageWidth, animated: false});
   }, [pageWidth]);
 
+  const handleOnMomentumScrollEnd = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    onMomentumScrollEnd?.(event);
+  }, [onMomentumScrollEnd]);
+
   return (
     <Reanimated.ScrollView
-      {...props}
+      {...others}
       ref={carousel}
       horizontal
       pagingEnabled
@@ -103,6 +107,7 @@ function PageCarousel({...props}) {
       scrollEventThrottle={16}
       contentOffset={initialOffset} // iOS only
       onLayout={scrollToInitial} // Android only
+      onMomentumScrollEnd={handleOnMomentumScrollEnd} // TODO: workaround for useAnimatedScrollHandler.onMomentumEnd not being called (https://github.com/software-mansion/react-native-reanimated/issues/2735)
     />
   );
 }

src/incubator/TouchableOpacity.tsx

@@ -135,7 +135,9 @@ function TouchableOpacity(props: Props) {
     const scale = interpolate(isActive.value, [0, 1], [1, activeScale]);
 
     return {
-      backgroundColor: interpolateColor(isActive.value, [0, 1], [backgroundColor, activeColor]),
+      backgroundColor: !feedbackColor
+        ? backgroundColor
+        : interpolateColor(isActive.value, [0, 1], [backgroundColor, activeColor]),
       opacity,
       transform: [{scale}]
     };

src/incubator/TransitionView/useAnimatedTranslator.ts

@@ -22,7 +22,7 @@ export default function useAnimatedTranslator(props: TranslatorProps) {
 
   const init = useCallback((to: {x: number; y: number},
     animationDirection: TransitionViewDirection,
-    callback: (isFinished: boolean) => void) => {
+    callback: (isFinished?: boolean) => void) => {
     'worklet';
     // @ts-expect-error
     if ([TransitionViewDirectionEnum.LEFT, TransitionViewDirectionEnum.RIGHT].includes(animationDirection)) {
@@ -39,7 +39,7 @@ export default function useAnimatedTranslator(props: TranslatorProps) {
 
   const animate = useCallback((to: {x: number; y: number},
     animationDirection: TransitionViewDirection,
-    callback: (isFinished: boolean) => void) => {
+    callback: (isFinished?: boolean) => void) => {
     'worklet';
     // @ts-expect-error
     if ([TransitionViewDirectionEnum.LEFT, TransitionViewDirectionEnum.RIGHT].includes(animationDirection)) {

src/incubator/TransitionView/useAnimationEndNotifier.ts

@@ -13,15 +13,15 @@ export interface AnimationNotifierEndProps {
 export default function useAnimationEndNotifier(props: AnimationNotifierEndProps) {
   const {onAnimationEnd} = props;
 
-  const onEnterAnimationEnd = useCallback((isFinished: boolean) => {
+  const onEnterAnimationEnd = useCallback((isFinished?: boolean) => {
     'worklet';
     if (onAnimationEnd && isFinished) {
       runOnJS(onAnimationEnd)('enter');
     }
   },
   [onAnimationEnd]);
 
-  const onExitAnimationEnd = useCallback((isFinished: boolean) => {
+  const onExitAnimationEnd = useCallback((isFinished?: boolean) => {
     'worklet';
     if (onAnimationEnd && isFinished) {
       runOnJS(onAnimationEnd)('exit');

src/incubator/panView/index.tsx

@@ -111,7 +111,7 @@ const PanView = (props: Props) => {
     translationY.value = result.y;
   };
 
-  const dismiss = useCallback((isFinished: boolean) => {
+  const dismiss = useCallback((isFinished?: boolean) => {
     'worklet';
     if (isFinished && waitingForDismiss.value && onDismiss) {
       waitingForDismiss.value = false;