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 <Daniel.Winkler@medel.com>
Co-authored-by: Mo Gorhom <gorhom@me.com>

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 → 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,

src/presets/flashy/constants.ts

@@ -1,4 +1,5 @@
-import Animated, { Easing } from 'react-native-reanimated';
+import type Animated from 'react-native-reanimated';
+import { Easing } from '../../utilities';
 
 const DEFAULT_ITEM_ANIMATION_EASING: Animated.EasingFunction = Easing.out(
   Easing.exp

src/presets/flashy/item/FlashyTabBarItem.tsx

@@ -4,14 +4,19 @@ import Animated from 'react-native-reanimated';
 // @ts-ignore 😞
 import MaskedView from '@react-native-community/masked-view';
 import { Svg, Circle, SvgProps, CircleProps } from 'react-native-svg';
-import { useValues, transformOrigin, toRad } from 'react-native-redash';
+import {
+  useValues,
+  transformOrigin,
+  toRad,
+} from 'react-native-redash/lib/module/v1';
 // @ts-ignore 😞
 import isEqual from 'lodash.isequal';
 import {
   DEFAULT_INDICATOR_VISIBILITY,
   DEFAULT_INDICATOR_SIZE,
   DEFAULT_INDICATOR_COLOR,
 } from '../constants';
+import { interpolate } from '../../../utilities';
 import type { FlashyTabBarItemProps } from '../types';
 import { styles } from './styles';
 
@@ -25,7 +30,7 @@ const AnimatedCircle = Animated.createAnimatedComponent(
   any
 >;
 
-const { add, interpolate, sub, max, divide, multiply, Extrapolate } = Animated;
+const { add, sub, max, divide, multiply, Extrapolate } = Animated;
 
 const FlashyTabBarItemComponent = ({
   animatedFocus,

src/presets/material/MaterialTabBar.tsx

@@ -26,8 +26,9 @@ import {
 import {
   useTabBarItemFocusTransition,
   useTabBarItemSpacing,
+  useStableCallback,
 } from '../../hooks';
-import { noop, useStableCallback } from '../../utilities';
+import { noop } from '../../utilities';
 import type { TabBarViewProps } from '../../types';
 import type { MaterialTabBarConfig, MaterialTabBarItemConfig } from './types';
 import { styles } from './styles';

src/presets/material/constants.ts

@@ -1,4 +1,5 @@
-import Animated, { Easing } from 'react-native-reanimated';
+import type Animated from 'react-native-reanimated';
+import { Easing } from '../../utilities';
 
 const DEFAULT_ITEM_ANIMATION_EASING: Animated.EasingFunction = Easing.out(
   Easing.exp

src/presets/material/item/MaterialTabBarItem.tsx

@@ -1,14 +1,15 @@
 import React, { useMemo, memo, useCallback } from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import Animated from 'react-native-reanimated';
-import { transformOrigin, useValue } from 'react-native-redash';
+import { transformOrigin, useValue } from 'react-native-redash/lib/module/v1';
 // @ts-ignore 😞
 import isEqual from 'lodash.isequal';
-import { useStableCallback } from '../../../utilities';
+import { useStableCallback } from '../../../hooks';
+import { interpolate } from '../../../utilities';
 import type { MaterialTabBarItemProps } from '../types';
 import { styles } from './styles';
 
-const { interpolate, divide, Extrapolate } = Animated;
+const { divide, Extrapolate } = Animated;
 
 const MaterialTabBarItemComponent = (props: MaterialTabBarItemProps) => {
   // props

src/presets/material/ripple/MaterialTabBarRipple.tsx

@@ -2,7 +2,6 @@ import React, { memo, useMemo, useRef } from 'react';
 import { LayoutRectangle, Dimensions, processColor } from 'react-native';
 import Svg, { SvgProps, Circle } from 'react-native-svg';
 import Animated, {
-  interpolate,
   useCode,
   call,
   add,
@@ -17,7 +16,8 @@ import Animated, {
 } from 'react-native-reanimated';
 // @ts-ignore 😞
 import isEqual from 'lodash.isequal';
-import { useValues, get, useValue } from 'react-native-redash';
+import { useValues, get, useValue } from 'react-native-redash/lib/module/v1';
+import { interpolate } from '../../../utilities';
 import type { MaterialTabBarItemConfig } from '../types';
 import { styles } from './styles';
 

src/utilities/index.ts

@@ -0,0 +1,2 @@
+export { noop } from './noop';
+export { Easing, interpolate } from './reanimated';

src/utilities/noop.ts

@@ -0,0 +1 @@
+export const noop = () => {};

src/utilities/reanimated.ts

@@ -0,0 +1,13 @@
+const {
+  Easing: EasingV1,
+  EasingNode: EasingV2,
+} = require('react-native-reanimated');
+
+export const Easing = EasingV2 || EasingV1;
+
+const {
+  interpolate: interpolateV1,
+  interpolateNode: interpolateV2,
+} = require('react-native-reanimated');
+
+export const interpolate = interpolateV2 || interpolateV1;

tsconfig.json

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@gorhom/animated-tabbar": ["./src/index"]
+      "@gorhom/animated-tabbar": ["./src/index"],
+      "react-native-redash/lib/module/v1":["./node_modules/react-native-redash/lib/typescript/v1/index.d.ts"]
     },
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,