refactor: migrate to animated

Author: satya164

.circleci/config.yml

@@ -22,7 +22,7 @@ jobs:
             - v1-dependencies-example-
       - run: |
           yarn install --frozen-lockfile --cwd example
-          yarn install --frozen-lockfile
+          yarn install --frozen-lockfile --ignore-scripts
           yarn sync
       - save_cache:
           key: v1-dependencies-{{ checksum "yarn.lock" }}

example/.eslintrc

@@ -8,7 +8,6 @@
           'expo-asset',
           'react-navigation-stack',
           'react-native-gesture-handler',
-          'react-native-reanimated',
           'react-native-vector-icons',
         ],
     },

example/package.json

@@ -20,7 +20,7 @@
     "react-native-gesture-handler": "~1.5.0",
     "react-native-maps": "0.26.1",
     "react-native-paper": "^2.15.2",
-    "react-native-reanimated": "~1.4.0",
+    "react-native-reanimated": "^1.4.0",
     "react-native-safe-area-context": "0.6.0",
     "react-native-unimodules": "^0.7.0-rc.1",
     "react-native-web": "^0.11.4",

example/src/DragLimitedToModal.tsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import { View, Text, StyleSheet, Dimensions } from 'react-native';
-import Animated from 'react-native-reanimated';
 import { NavigationStackScreenComponent } from 'react-navigation-stack';
 
 const HEIGHT = Dimensions.get('screen').height;
 
-const { interpolate } = Animated;
-
 const DragLimitedToModal: NavigationStackScreenComponent = () => (
   <View style={styles.modal}>
     <Text style={styles.text}>Adjusts to the size of text</Text>
@@ -18,7 +15,7 @@ DragLimitedToModal.navigationOptions = {
   gestureDirection: 'vertical',
   gestureResponseDistance: { vertical: HEIGHT },
   cardStyleInterpolator: ({ current }) => {
-    const translateY = interpolate(current.progress, {
+    const translateY = current.progress.interpolate({
       inputRange: [0, 1],
       outputRange: [HEIGHT, 0],
     });

example/src/ModalStack.tsx

@@ -13,9 +13,6 @@ import {
   NavigationStackScreenProps,
   StackCardStyleInterpolator,
 } from 'react-navigation-stack';
-import Animated from 'react-native-reanimated';
-
-const { interpolate } = Animated;
 
 const gestureResponseDistance = {
   vertical: Dimensions.get('window').height,
@@ -25,7 +22,7 @@ const forVerticalInvertedIOS: StackCardStyleInterpolator = ({
   current: { progress },
   layouts: { screen },
 }) => {
-  const translateY = interpolate(progress, {
+  const translateY = progress.interpolate({
     inputRange: [0, 1],
     outputRange: [-screen.height, 0],
   });

example/src/StackAnimationConsumerStack.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Button, View } from 'react-native';
-import Animated from 'react-native-reanimated';
+import { Animated, Button, View } from 'react-native';
 import {
   createStackNavigator,
   NavigationStackScreenProps,
@@ -27,12 +26,12 @@ const ListScreen = (props: NavigationStackScreenProps) => (
 const AnotherScreen = () => (
   <StackCardAnimationContext.Consumer>
     {value => {
-      const fontSize = value
-        ? Animated.interpolate(value.current.progress, {
+      const scale = value
+        ? value.current.progress.interpolate({
             inputRange: [0, 1],
-            outputRange: [8, 32],
+            outputRange: [0.25, 1],
           })
-        : 32;
+        : 1;
 
       return (
         <View
@@ -44,7 +43,11 @@ const AnotherScreen = () => (
           }}
         >
           <Animated.Text
-            style={{ fontSize, opacity: value ? value.current.progress : 1 }}
+            style={{
+              fontSize: 32,
+              opacity: value ? value.current.progress : 1,
+              transform: [{ scale }],
+            }}
           >
             Animates on progress
           </Animated.Text>
@@ -69,7 +72,7 @@ const YetAnotherScreen = () => (
           style={{
             fontSize: 24,
             opacity: value
-              ? Animated.interpolate(value.swiping, {
+              ? value.swiping.interpolate({
                   inputRange: [0, 1],
                   outputRange: [1, 0],
                 })
@@ -86,7 +89,7 @@ const YetAnotherScreen = () => (
           style={{
             fontSize: 24,
             opacity: value
-              ? Animated.interpolate(value.closing, {
+              ? value.closing.interpolate({
                   inputRange: [0, 1],
                   outputRange: [1, 0],
                 })

example/src/TransparentStack.tsx

@@ -4,7 +4,6 @@ import {
   createStackNavigator,
   NavigationStackScreenComponent,
 } from 'react-navigation-stack';
-import Animated from 'react-native-reanimated';
 
 const ListScreen: NavigationStackScreenComponent = function(props) {
   return (
@@ -75,7 +74,7 @@ export default createStackNavigator(
       cardStyle: { backgroundColor: 'transparent' },
       gestureEnabled: false,
       cardStyleInterpolator: ({ current: { progress } }) => {
-        const opacity = Animated.interpolate(progress, {
+        const opacity = progress.interpolate({
           inputRange: [0, 0.5, 0.9, 1],
           outputRange: [0, 0.25, 0.7, 1],
         });

example/yarn.lock

@@ -9985,7 +9985,7 @@ react-native-paper@^2.15.2:
     react-lifecycles-compat "^3.0.4"
     react-native-safe-area-view "^0.12.0"
 
-react-native-reanimated@~1.4.0:
+react-native-reanimated@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.4.0.tgz#7f1acbf9be08492d834f512700570978052be2f9"
   integrity sha512-tO7nSNNP+iRLVbkcSS5GXyDBb7tSI02+XuRL3/S39EAr35rnvUy2JfeLUQG+fWSObJjnMVhasUDEUwlENk8IXw==

jest-setup.js

@@ -33,7 +33,3 @@ jest.mock('react-native-gesture-handler', () => ({
     END: 5,
   },
 }));
-
-jest.mock('react-native-reanimated', () =>
-  require('react-native-reanimated/mock')
-);

package.json

@@ -19,7 +19,7 @@
     "prerelease": "yarn sync",
     "release": "release-it",
     "example": "yarn --cwd example",
-    "bootstrap": "yarn example && yarn && yarn sync",
+    "bootstrap": "yarn example && yarn --ignore-scripts && yarn sync",
     "sync": "bash scripts/sync-stack.sh",
     "patch": "diff -ruN node_modules/@react-navigation/stack/src src/vendor > scripts/stack.patch; printf ''"
   },
@@ -50,7 +50,7 @@
     "@expo/vector-icons": "^10.0.6",
     "@react-native-community/bob": "^0.7.0",
     "@react-native-community/masked-view": "^0.1.5",
-    "@react-navigation/stack": "^5.0.0-alpha.45",
+    "@react-navigation/stack": "^5.0.0-alpha.48",
     "@release-it/conventional-changelog": "^1.1.0",
     "@types/color": "^3.0.0",
     "@types/jest": "^24.0.23",
@@ -68,7 +68,6 @@
     "react-dom": "~16.9.0",
     "react-native": "~0.61.4",
     "react-native-gesture-handler": "^1.5.2",
-    "react-native-reanimated": "^1.4.0",
     "react-native-safe-area-context": "^0.6.1",
     "react-native-screens": "^1.0.0-alpha.23",
     "react-navigation": "^4.0.10",
@@ -82,7 +81,6 @@
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "^1.0.0",
-    "react-native-reanimated": "^1.3.0-alpha",
     "react-native-safe-area-context": "^0.3.3",
     "react-native-screens": "^1.0.0 || ^1.0.0-alpha || ^2.0.0-alpha",
     "react-navigation": "^4.0.7"