Use reanimatedv2 API in our components (#1224)

* Use reanimatedv2 API in our components

* ignore ts error correctly

Author: ethanshar

generatedTypes/components/view/index.d.ts

@@ -10,6 +10,10 @@ export interface ViewProps extends Omit<RNViewProps, 'style'>, ContainerModifier
      * Use Animate.View as a container
      */
     animated?: boolean;
+    /**
+      * Use Animate.View (from react-native-reanimated) as a container
+     */
+    reanimated?: boolean;
     /**
      * Turn off accessibility for this view and its nested children
      */

src/components/sharedTransition/SharedArea.js

@@ -1,12 +1,16 @@
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import Animated, {Easing} from 'react-native-reanimated';
+import Animated, {Easing as _Easing, EasingNode} from 'react-native-reanimated';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import TouchableOpacity from '../touchableOpacity';
 import {Colors} from '../../style';
 import ShareTransitionContext from './ShareTransitionContext';
 
+const {interpolate: _interpolate, interpolateNode} = Animated;
+const Easing = EasingNode || _Easing;
+const interpolate = interpolateNode || _interpolate;
+
 class SharedArea extends Component {
   displayName = 'IGNORE';
   static propTypes = {
@@ -37,14 +41,14 @@ class SharedArea extends Component {
     return {
       ...StyleSheet.absoluteFillObject,
       backgroundColor: Colors.white,
-      opacity: Animated.interpolate(this.transition, {inputRange: [0, 1], outputRange: [0, 1]})
+      opacity: interpolate(this.transition, {inputRange: [0, 1], outputRange: [0, 1]})
     };
   }
 
   getDetailsStyle() {
     return {
       ...StyleSheet.absoluteFillObject,
-      opacity: Animated.interpolate(this.transition, {inputRange: [90, 100], outputRange: [0, 1]})
+      opacity: interpolate(this.transition, {inputRange: [90, 100], outputRange: [0, 1]})
     };
   }
 
@@ -53,19 +57,19 @@ class SharedArea extends Component {
     if (sourceLayout && this.transition) {
       return {
         position: 'absolute',
-        width: Animated.interpolate(this.transition, {
+        width: interpolate(this.transition, {
           inputRange: [0, 100],
           outputRange: [sourceLayout.width, targetLayout.width]
         }),
-        height: Animated.interpolate(this.transition, {
+        height: interpolate(this.transition, {
           inputRange: [0, 100],
           outputRange: [sourceLayout.height, targetLayout.height]
         }),
-        top: Animated.interpolate(this.transition, {
+        top: interpolate(this.transition, {
           inputRange: [0, 100],
           outputRange: [sourceLayout.y, targetLayout.y]
         }),
-        left: Animated.interpolate(this.transition, {
+        left: interpolate(this.transition, {
           inputRange: [0, 100],
           outputRange: [sourceLayout.x, targetLayout.x]
         })

src/components/tabController/TabBar.tsx

@@ -16,7 +16,9 @@ import FadedScrollView from './FadedScrollView';
 
 import {useScrollToItem} from '../../hooks';
 
-const {Code, Value, interpolate, block, set} = Reanimated;
+// @ts-expect-error
+const {Code, Value, interpolate: _interpolate, interpolateNode, block, set} = Reanimated;
+const interpolate = interpolateNode || _interpolate;
 
 const DEFAULT_HEIGHT = 48;
 const INDICATOR_INSET = Spacings.s4;

src/components/tabController/TabBarItem.tsx

@@ -259,6 +259,7 @@ export default class TabBarItem extends PureComponent<Props> {
         {icon && (
           <Reanimated.Image
             source={icon}
+            // @ts-ignore reanimated2
             style={[!_.isUndefined(label) && styles.tabItemIconWithLabel, this.getIconStyle()]}
           />
         )}

src/components/tabController/index.tsx

@@ -1,7 +1,8 @@
 // TODO: support commented props
 import React, {Component} from 'react';
 import _ from 'lodash';
-import Reanimated, {Easing} from 'react-native-reanimated';
+// @ts-expect-error
+import Reanimated, {Easing as _Easing, EasingNode} from 'react-native-reanimated';
 import {State} from 'react-native-gesture-handler';
 import {timing, fract, between} from 'react-native-redash';
 import {Constants} from '../../helpers';
@@ -32,11 +33,16 @@ const {
   Value,
   block,
   onChange,
-  interpolate,
+  interpolate: _interpolate,
+  // @ts-expect-error
+  interpolateNode,
   round,
   multiply
 } = Reanimated;
 
+const Easing = EasingNode || _Easing;
+const interpolate = interpolateNode || _interpolate;
+
 export interface TabControllerProps {
   /**
    * The list of tab bar items
@@ -193,6 +199,7 @@ class TabController extends Component<TabControllerProps, StateProps> {
             cond(neq(currentPage, toPage), [
               set(isAnimating, 1),
               set(currentPage,
+                // @ts-ignore reanimated2
                 timing({clock, from: fromPage, to: toPage, duration: 280, easing: Easing.bezier(0.34, 1.3, 0.64, 1)}))
             ]),
             // Set isAnimating flag off

src/components/view/index.tsx

@@ -1,5 +1,6 @@
 import React, {PureComponent} from 'react';
 import {View as RNView, SafeAreaView, Animated, ViewProps as RNViewProps, StyleProp, ViewStyle} from 'react-native';
+import Reanimated from 'react-native-reanimated';
 import {
   asBaseComponent,
   forwardRef,
@@ -9,6 +10,7 @@ import {
 } from '../../commons/new';
 import Constants from '../../helpers/Constants';
 
+
 export interface ViewProps extends Omit<RNViewProps, 'style'>, ContainerModifiers {
   /**
    * If true, will render as SafeAreaView
@@ -18,6 +20,10 @@ export interface ViewProps extends Omit<RNViewProps, 'style'>, ContainerModifier
    * Use Animate.View as a container
    */
   animated?: boolean;
+  /**
+    * Use Animate.View (from react-native-reanimated) as a container
+   */
+  reanimated?: boolean;
   /**
    * Turn off accessibility for this view and its nested children
    */
@@ -62,7 +68,9 @@ class View extends PureComponent<PropsTypes, ViewState> {
     super(props);
 
     this.Container = props.useSafeArea && Constants.isIOS ? SafeAreaView : RNView;
-    if (props.animated) {
+    if (props.reanimated) {
+      this.Container = Reanimated.createAnimatedComponent(this.Container);
+    } else if (props.animated) {
       this.Container = Animated.createAnimatedComponent(this.Container);
     }
 

src/incubator/TouchableOpacity.tsx

@@ -2,7 +2,8 @@
 import React, {PureComponent} from 'react';
 import {processColor, StyleSheet, LayoutChangeEvent} from 'react-native';
 import _ from 'lodash';
-import Reanimated, {Easing} from 'react-native-reanimated';
+// @ts-expect-error
+import Reanimated, {Easing as _Easing, EasingNode} from 'react-native-reanimated';
 import {TapGestureHandler, LongPressGestureHandler, State, LongPressGestureHandlerGestureEvent} from 'react-native-gesture-handler';
 import {asBaseComponent, forwardRef, BaseComponentInjectedProps, ForwardRefInjectedProps} from '../commons/new';
 import {ViewProps} from '../components/view';
@@ -15,7 +16,9 @@ const {
   or,
   eq,
   neq,
-  interpolate,
+  interpolate: _interpolate,
+  // @ts-expect-error
+  interpolateNode,
   Extrapolate,
   Value,
   call,
@@ -27,6 +30,9 @@ const {
   stopClock
 } = Reanimated;
 
+const Easing = EasingNode || _Easing;
+const interpolate = interpolateNode || _interpolate;
+
 export type TouchableOpacityProps = {
   /**
    * Background color

src/incubator/WheelPicker/Item.tsx

@@ -59,8 +59,10 @@ export default ({
       key={index}
       center
       onPress={selectItem}
+      // @ts-ignore reanimated2
       index={index}
     >
+      {/* @ts-ignore reanimated2*/}
       <AnimatedText text60R style={{color, ...style}}>
         {text}
       </AnimatedText>

src/incubator/WheelPicker/index.tsx

@@ -107,6 +107,7 @@ const WheelPicker = ({items, itemHeight = 48, activeTextColor, inactiveTextColor
       <View width={250} height={height} br20>
         <AnimatedFlatList
           data={items}
+          // @ts-ignore reanimated2
           keyExtractor={keyExtractor}
           scrollEventThrottle={100}
           onScroll={onScroll}