feat: added Reanimated v2 compatibility (by @danielwinkler)

* feat(rna2): allow rn reanimated v2 peer dependency

* chore: refactor code

* chore: updated redash for example

Co-authored-by: Daniel Winkler <[email protected]>
Co-authored-by: Mo Gorhom <[email protected]>

Author: 3 people

example/package.json

@@ -19,7 +19,7 @@
     "react-native": "0.63.3",
     "react-native-gesture-handler": "^1.8.0",
     "react-native-reanimated": "1.13.1",
-    "react-native-redash": "^14.2.4",
+    "react-native-redash": "^15.7.3",
     "react-native-safe-area-context": "^3.1.8",
     "react-native-screens": "^2.11.0",
     "react-native-svg": "^12.1.0"

package.json

@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "lodash.isequal": "^4.5.0",
-    "react-native-redash": "^14.2.1"
+    "react-native-redash": "15.7.3"
   },
   "devDependencies": {
     "@commitlint/cli": "^9.1.1",

src/AnimatedTabBar.tsx

@@ -2,20 +2,19 @@ import React, { useMemo, useCallback, useEffect, useRef } from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import { useSafeArea } from 'react-native-safe-area-context';
 import { AnimatedTabBarView } from './AnimatedTabBarView';
-import { useStableCallback } from './utilities';
-import { useTabBarVisibility } from './hooks';
+import { interpolate } from './utilities';
+import { useTabBarVisibility, useStableCallback } from './hooks';
 import type { PresetEnum } from './presets';
 import type { AnimatedTabBarProps } from './types';
 import Animated, {
-  interpolate,
   Extrapolate,
   useCode,
   cond,
   eq,
   call,
   onChange,
 } from 'react-native-reanimated';
-import { useValue } from 'react-native-redash';
+import { useValue } from 'react-native-redash/lib/module/v1';
 
 interface Route {
   name: string;

src/AnimatedTabBarView.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useEffect, useRef } from 'react';
 import Animated from 'react-native-reanimated';
-import { useValue } from 'react-native-redash';
+import { useValue } from 'react-native-redash/lib/module/v1';
 import Presets, { PresetEnum } from './presets';
 import type { AnimatedTabBarViewProps } from './types';
 

src/components/rawButton/RawButton.tsx

@@ -11,8 +11,8 @@ import {
   TapGestureHandler,
   LongPressGestureHandler,
 } from 'react-native-gesture-handler';
-import { useValue, useGestureHandler } from 'react-native-redash';
-import { useStableCallback } from '../../utilities';
+import { useValue, useGestureHandler } from 'react-native-redash/lib/module/v1';
+import { useStableCallback } from '../../hooks';
 
 const { useCode, cond, onChange, eq } = Animated;
 

src/hooks/index.ts

@@ -1,3 +1,4 @@
 export { useTabBarVisibility } from './useTabBarVisibility';
 export { useTabBarItemFocusTransition } from './useTabBarItemFocusTransition';
 export { useTabBarItemSpacing } from './useTabBarItemSpacing';
+export { useStableCallback } from './useStableCallback';

src/utilities.ts renamed to src/hooks/useStableCallback.ts

@@ -1,12 +1,11 @@
 import { useRef, useCallback, useEffect } from 'react';
 
-export const noop = () => {};
+type Callback = (...args: any[]) => any;
 
 /**
  * Provide a stable version of useCallback
  * https://gist.github.com/JakeCoxon/c7ebf6e6496f8468226fd36b596e1985
  */
-type Callback = (...args: any[]) => any;
 export const useStableCallback = (callback: Callback) => {
   const callbackRef = useRef<Callback>();
   const memoCallback = useCallback(

src/hooks/useTabBarVisibility.ts

@@ -10,9 +10,9 @@ import Animated, {
   clockRunning,
   startClock,
   timing,
-  Easing,
 } from 'react-native-reanimated';
-import { useClock, useValue } from 'react-native-redash';
+import { useClock, useValue } from 'react-native-redash/lib/module/v1';
+import { Easing } from '../utilities';
 
 export const useTabBarVisibility = (shouldShowTabBar: boolean) => {
   const _shouldShowTabBar = useValue(shouldShowTabBar ? 1 : 0);

src/presets/bubble/constants.ts

@@ -1,8 +1,6 @@
-import Animated, { Easing } from 'react-native-reanimated';
+import { Easing } from '../../utilities';
 
-const DEFAULT_ITEM_ANIMATION_EASING: Animated.EasingFunction = Easing.out(
-  Easing.exp
-);
+const DEFAULT_ITEM_ANIMATION_EASING = Easing.out(Easing.exp);
 const DEFAULT_ITEM_ANIMATION_DURATION = 500;
 const DEFAULT_ITEM_INNER_SPACE = 12;
 const DEFAULT_ITEM_OUTER_SPACE = 12;

src/presets/bubble/item/BubbleTabBarItem.tsx

@@ -1,13 +1,14 @@
 import React, { useMemo, memo } from 'react';
 import { View, Text, LayoutChangeEvent } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { interpolateColor, useValue } from 'react-native-redash';
+import { interpolateColor, useValue } from 'react-native-redash/lib/module/v1';
 // @ts-ignore 😞
 import isEqual from 'lodash.isequal';
+import { interpolate } from '../../../utilities';
 import type { BubbleTabBarItemProps } from '../types';
 import { styles } from './styles';
 
-const { add, interpolate } = Animated;
+const { add } = Animated;
 
 const BubbleTabBarItemComponent = ({
   animatedFocus,