feat: added Reanimated v2 compatibility

Author: gorhom

example/src/components/CustomView.tsx

@@ -1,10 +1,16 @@
 import React from 'react';
 import { View, Text, StyleSheet, Alert, ViewStyle } from 'react-native';
-import Animated, { interpolate, Extrapolate } from 'react-native-reanimated';
+import Animated, { Extrapolate } from 'react-native-reanimated';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { PageContentProps } from '@gorhom/paper-onboarding';
 import { TouchableOpacityProps } from 'react-native';
 
+const {
+  interpolate: interpolateV1,
+  interpolateNode: interpolateV2,
+} = require('react-native-reanimated');
+const interpolate = interpolateV2 || interpolateV1;
+
 const AnimatedTouchableOpacity: React.FC<
   Animated.AnimateProps<ViewStyle, TouchableOpacityProps>
 > = Animated.createAnimatedComponent(TouchableOpacity) as any;

src/PaperOnboarding.tsx

@@ -2,7 +2,12 @@ import React, { useMemo, useRef, useCallback, memo, useState } from 'react';
 import { Dimensions, Insets, LayoutChangeEvent } from 'react-native';
 import { usePanGestureHandler, useValue } from 'react-native-redash';
 import { PanGestureHandler } from 'react-native-gesture-handler';
-import Animated from 'react-native-reanimated';
+import Animated, {
+  add,
+  useCode,
+  onChange,
+  call,
+} from 'react-native-reanimated';
 import Background from './components/background';
 import Page from './components/page';
 import IndicatorsContainer from './components/indicatorsContainer';
@@ -32,7 +37,11 @@ Animated.addWhitelistedUIProps({
   pointerEvents: true,
 });
 
-const { interpolate, add, useCode, onChange, call } = Animated;
+const {
+  interpolate: interpolateV1,
+  interpolateNode: interpolateV2,
+} = require('react-native-reanimated');
+const interpolate = interpolateV2 || interpolateV1;
 
 const PaperOnboardingComponent = ({
   data,

src/components/background/Background.tsx

@@ -2,8 +2,8 @@ import React, { memo, useMemo } from 'react';
 import Svg from 'react-native-svg';
 import BackgroundCircle from '../backgroundCircle';
 import { calculateRectangleCircleRadius } from '../../utils/math';
-import { BackgroundProps } from '../../types';
 import { styles } from './styles';
+import type { BackgroundProps } from '../../types';
 
 const BackgroundComponent = ({
   animatedIndex,

src/components/backgroundCircle/BackgroundCircle.tsx

@@ -1,12 +1,14 @@
 import React, { memo } from 'react';
 import { ViewStyle } from 'react-native';
 import { Circle, CircleProps } from 'react-native-svg';
-import Animated, {
-  interpolate,
-  add,
-  Extrapolate,
-} from 'react-native-reanimated';
-import { BackgroundCircleProps } from '../../types';
+import Animated, { add, Extrapolate } from 'react-native-reanimated';
+import type { BackgroundCircleProps } from '../../types';
+
+const {
+  interpolate: interpolateV1,
+  interpolateNode: interpolateV2,
+} = require('react-native-reanimated');
+const interpolate = interpolateV2 || interpolateV1;
 
 const AnimatedCircle = Animated.createAnimatedComponent(
   Circle

src/components/closeButton/CloseButton.tsx

@@ -1,11 +1,9 @@
 import React, { useMemo, memo, useRef } from 'react';
 import { Text, TouchableOpacity } from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, { round } from 'react-native-reanimated';
 import { useValues, get } from 'react-native-redash';
-import { CloseButtonProps } from '../../types';
 import { styles } from './styles';
-
-const { round } = Animated;
+import type { CloseButtonProps } from '../../types';
 
 export const CloseButtonComponent = ({
   data,

src/components/indicator/Indicator.tsx

@@ -1,11 +1,15 @@
 import React, { useMemo, useCallback, memo } from 'react';
 import { ViewStyle } from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, { Extrapolate } from 'react-native-reanimated';
 import { Svg, Circle, CircleProps } from 'react-native-svg';
-import { IndicatorProps } from '../../types';
 import { styles } from './styles';
+import type { IndicatorProps } from '../../types';
 
-const { interpolate, Extrapolate } = Animated;
+const {
+  interpolate: interpolateV1,
+  interpolateNode: interpolateV2,
+} = require('react-native-reanimated');
+const interpolate = interpolateV2 || interpolateV1;
 
 const AnimatedCircle = Animated.createAnimatedComponent(
   Circle

src/components/indicatorsContainer/IndicatorsContainer.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo, useCallback, memo } from 'react';
 import Animated from 'react-native-reanimated';
 import Indicator from '../indicator';
-import { IndicatorsContainerProps } from '../../types';
 import { styles } from './styles';
+import type { IndicatorsContainerProps } from '../../types';
 
 const IndicatorsContainerComponent = ({
   data,

src/components/page/Page.tsx

@@ -1,10 +1,14 @@
 import React, { useMemo, useCallback, memo } from 'react';
-import Animated from 'react-native-reanimated';
+import Animated, { Extrapolate } from 'react-native-reanimated';
 import PageContent from '../pageContent/PageContent';
-import { PageProps } from '../../types';
 import { styles } from './styles';
+import type { PageProps } from '../../types';
 
-const { interpolate, Extrapolate } = Animated;
+const {
+  interpolate: interpolateV1,
+  interpolateNode: interpolateV2,
+} = require('react-native-reanimated');
+const interpolate = interpolateV2 || interpolateV1;
 
 const PageComponent = ({
   index,

src/components/pageContent/PageContent.tsx

@@ -1,10 +1,14 @@
 import React, { useMemo, memo } from 'react';
 import { Text, Dimensions } from 'react-native';
-import Animated from 'react-native-reanimated';
-import { PageContentProps } from '../../types';
+import Animated, { Extrapolate } from 'react-native-reanimated';
 import { styles } from './styles';
+import type { PageContentProps } from '../../types';
 
-const { interpolate, Extrapolate } = Animated;
+const {
+  interpolate: interpolateV1,
+  interpolateNode: interpolateV2,
+} = require('react-native-reanimated');
+const interpolate = interpolateV2 || interpolateV1;
 
 const SCREEN_HEIGHT = Dimensions.get('window').height;
 

src/useTiming.ts

@@ -1,8 +1,5 @@
-import Animated, { Easing, sub } from 'react-native-reanimated';
-import { State } from 'react-native-gesture-handler';
-import { useClock, useValue } from 'react-native-redash';
-
-const {
+import Animated, {
+  sub,
   add,
   or,
   block,
@@ -16,10 +13,23 @@ const {
   startClock,
   lessThan,
   greaterThan,
-  interpolate,
   abs,
   timing,
-} = Animated;
+} from 'react-native-reanimated';
+import { State } from 'react-native-gesture-handler';
+import { useClock, useValue } from 'react-native-redash';
+
+const {
+  interpolate: interpolateV1,
+  interpolateNode: interpolateV2,
+} = require('react-native-reanimated');
+const interpolate = interpolateV2 || interpolateV1;
+
+const {
+  Easing: EasingV1,
+  EasingNode: EasingV2,
+} = require('react-native-reanimated');
+const Easing = EasingV2 || EasingV1;
 
 interface useTimingProps {
   value: Animated.Adaptable<number>;