refactor: migrate to animated

packages/stack/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],
     });

packages/stack/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],
   });

packages/stack/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],
                 })

packages/stack/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],
         });