refactor: rewrite based on reanimated

packages/stack/example/src/HeaderBackgrounds.js

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { StyleSheet, View, Text } from 'react-native';
-import { createStackNavigator } from 'react-navigation-stack';
+import Animated from 'react-native-reanimated';
+import {
+  createStackNavigator,
+  TransitionPresets,
+  HeaderStyleInterpolators,
+} from 'react-navigation-stack';
 
 function createHeaderBackgroundExample(options = {}) {
   return createStackNavigator(
@@ -19,7 +24,7 @@ function createHeaderBackgroundExample(options = {}) {
         navigationOptions: {
           headerTitle: 'Login Screen',
           headerTintColor: '#fff',
-          headerBackground: (
+          headerBackground: () => (
             <View style={{ flex: 1, backgroundColor: '#FF0066' }} />
           ),
         },
@@ -38,7 +43,7 @@ function createHeaderBackgroundExample(options = {}) {
         navigationOptions: {
           headerTitle: 'Games Screen',
           headerTintColor: '#fff',
-          headerBackground: (
+          headerBackground: () => (
             <View style={{ flex: 1, backgroundColor: '#3388FF' }} />
           ),
         },
@@ -90,11 +95,11 @@ function createHeaderBackgroundExample(options = {}) {
   );
 }
 export const HeaderBackgroundDefault = createHeaderBackgroundExample();
-export const HeaderBackgroundTranslate = createHeaderBackgroundExample({
-  headerBackgroundTransitionPreset: 'translate',
-});
+
 export const HeaderBackgroundFade = createHeaderBackgroundExample({
-  headerBackgroundTransitionPreset: 'fade',
+  ...TransitionPresets.SlideFromRightIOS,
+  headerStyleInterpolator: HeaderStyleInterpolators.forFade,
+  headerMode: 'float',
 });
 
 const styles = StyleSheet.create({

packages/stack/example/src/HeaderPreset.js

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { Button, StatusBar } from 'react-native';
 import { SafeAreaView } from '@react-navigation/native';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  TransitionPresets,
+} from 'react-navigation-stack';
 
 class HomeScreen extends React.Component {
   static navigationOptions = {
@@ -100,9 +103,7 @@ const StackWithHeaderPreset = createStackNavigator(
     ScreenWithNoHeader: ScreenWithNoHeader,
     ScreenWithLongTitle: ScreenWithLongTitle,
   },
-  {
-    headerTransitionPreset: 'uikit',
-  }
+  TransitionPresets.SlideFromRightIOS
 );
 
 export default StackWithHeaderPreset;

packages/stack/example/src/ImageStack.js

@@ -7,7 +7,7 @@ class ListScreen extends React.Component {
   static navigationOptions = ({ navigation }) => ({
     title: 'Image list',
     headerBackTitle: 'Back',
-    headerLeft: (
+    headerLeft: () => (
       <Button title="Back" onPress={() => navigation.navigate('Home')} />
     ),
   });

packages/stack/example/src/SimpleStack.js

@@ -1,7 +1,10 @@
 import * as React from 'react';
 import { Dimensions, Button, View, Text } from 'react-native';
 import { withNavigation } from '@react-navigation/core';
-import { createStackNavigator } from 'react-navigation-stack';
+import {
+  createStackNavigator,
+  TransitionPresets,
+} from 'react-navigation-stack';
 
 const Buttons = withNavigation(props => (
   <React.Fragment>
@@ -148,11 +151,7 @@ export default createStackNavigator(
   },
   {
     initialRouteName: 'List',
-
-    // these are the defaults
-    cardShadowEnabled: true,
-    cardOverlayEnabled: false,
-
-    // headerTransitionPreset: 'uikit',
+    headerMode: 'screen',
+    ...TransitionPresets.WipeFromBottomAndroid,
   }
 );

packages/stack/example/src/TransparentStack.js

@@ -1,6 +1,9 @@
 import * as React from 'react';
-import { Animated, Button, Easing, View, Text } from 'react-native';
+import { Button, View, Text } from 'react-native';
 import { createStackNavigator } from 'react-navigation-stack';
+import Animated from 'react-native-reanimated';
+
+const { interpolate, multiply, cond } = Animated;
 
 class ListScreen extends React.Component {
   render() {
@@ -78,23 +81,21 @@ export default createStackNavigator(
     navigationOptions: {
       gesturesEnabled: false,
     },
-    transitionConfig: () => ({
-      transitionSpec: {
-        duration: 300,
-        easing: Easing.inOut(Easing.ease),
-        timing: Animated.timing,
-      },
-      screenInterpolator: sceneProps => {
-        const { position, scene } = sceneProps;
-        const { index } = scene;
+    cardStyleInterpolator: ({ progress: { current }, closing }) => {
+      const opacity = cond(
+        closing,
+        current,
+        interpolate(current, {
+          inputRange: [0, 0.5, 0.9, 1],
+          outputRange: [0, 0.25, 0.7, 1],
+        })
+      );
 
-        const opacity = position.interpolate({
-          inputRange: [index - 1, index],
-          outputRange: [0, 1],
-        });
-
-        return { opacity };
-      },
-    }),
+      return {
+        cardStyle: {
+          opacity,
+        },
+      };
+    },
   }
 );