wip: rewrite based on reanimated

example/App.js

@@ -36,8 +36,8 @@ import { useScreens } from 'react-native-screens';
 I18nManager.forceRTL(false);
 
 const data = [
-  { component: SimpleStack, title: 'Simple', routeName: 'SimpleStack' },
   { component: HeaderPreset, title: 'UIKit Preset', routeName: 'UIKit' },
+  { component: SimpleStack, title: 'Wipe Preset', routeName: 'SimpleStack' },
   { component: ImageStack, title: 'Image', routeName: 'ImageStack' },
   { component: ModalStack, title: 'Modal', routeName: 'ModalStack' },
   { component: FullScreen, title: 'Full Screen', routeName: 'FullScreen' },

example/src/FullScreen.js

@@ -4,7 +4,7 @@ import { createStackNavigator } from 'react-navigation-stack';
 
 class Screen extends React.Component {
   static navigationOptions = {
-    header: null,
+    header: () => null,
   };
 
   render() {

example/src/HeaderBackgrounds.js

@@ -19,7 +19,7 @@ function createHeaderBackgroundExample(options = {}) {
         navigationOptions: {
           headerTitle: 'Login Screen',
           headerTintColor: '#fff',
-          headerBackground: (
+          headerBackground: () => (
             <View style={{ flex: 1, backgroundColor: '#FF0066' }} />
           ),
         },
@@ -38,7 +38,7 @@ function createHeaderBackgroundExample(options = {}) {
         navigationOptions: {
           headerTitle: 'Games Screen',
           headerTintColor: '#fff',
-          headerBackground: (
+          headerBackground: () => (
             <View style={{ flex: 1, backgroundColor: '#3388FF' }} />
           ),
         },

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;

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')} />
     ),
   });

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,
   }
 );

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,26 @@ 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: ({ positions: { current }, layout, closing }) => {
+      const translateY = interpolate(current, {
+        inputRange: [0, 1],
+        outputRange: [multiply(layout.height, 0.08), 0],
+      });
 
-        const opacity = position.interpolate({
-          inputRange: [index - 1, index],
-          outputRange: [0, 1],
-        });
+      const opacity = cond(
+        closing,
+        current,
+        interpolate(current, {
+          inputRange: [0, 0.5, 0.9, 1],
+          outputRange: [0, 0.25, 0.7, 1],
+        })
+      );
 
-        return { opacity };
-      },
-    }),
+      return {
+        cardStyle: {
+          opacity,
+        },
+      };
+    },
   }
 );

package.json

@@ -63,7 +63,8 @@
     "react": "16.5.0",
     "react-dom": "16.5.0",
     "react-native": "~0.57.7",
-    "react-native-gesture-handler": "^1.1.0",
+    "react-native-gesture-handler": "^1.2.1",
+    "react-native-reanimated": "^1.0.1",
     "react-native-screens": "^1.0.0-alpha.22",
     "react-test-renderer": "16.5.0",
     "release-it": "^11.0.0",
@@ -76,6 +77,7 @@
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "^1.0.0",
+    "react-native-reanimated": "^1.0.0",
     "react-native-screens": "^1.0.0 || ^1.0.0-alpha"
   },
   "jest": {

src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -0,0 +1,140 @@
+import Animated from 'react-native-reanimated';
+import { CardInterpolationProps, CardInterpolatedStyle } from '../types';
+
+const { cond, multiply, interpolate } = Animated;
+
+/**
+ * Standard iOS-style slide in from the right.
+ */
+export function forHorizontalIOS({
+  positions: { current, next },
+  layout,
+}: CardInterpolationProps): CardInterpolatedStyle {
+  const translateFocused = interpolate(current, {
+    inputRange: [0, 1],
+    outputRange: [layout.width, 0],
+  });
+  const translateUnfocused = next
+    ? interpolate(next, {
+        inputRange: [0, 1],
+        outputRange: [0, multiply(layout.width, -0.3)],
+      })
+    : 0;
+
+  const opacity = interpolate(current, {
+    inputRange: [0, 1],
+    outputRange: [0, 0.07],
+  });
+
+  const shadowOpacity = interpolate(current, {
+    inputRange: [0, 1],
+    outputRange: [0, 0.3],
+  });
+
+  return {
+    cardStyle: {
+      backgroundColor: '#eee',
+      transform: [
+        // Translation for the animation of the current card
+        { translateX: translateFocused },
+        // Translation for the animation of the card on top of this
+        { translateX: translateUnfocused },
+      ],
+      shadowOpacity,
+    },
+    overlayStyle: { opacity },
+  };
+}
+
+/**
+ * Standard iOS-style slide in from the bottom (used for modals).
+ */
+export function forVerticalIOS({
+  positions: { current },
+  layout,
+}: CardInterpolationProps): CardInterpolatedStyle {
+  const translateY = interpolate(current, {
+    inputRange: [0, 1],
+    outputRange: [layout.height, 0],
+  });
+
+  return {
+    cardStyle: {
+      backgroundColor: '#eee',
+      transform: [
+        // Translation for the animation of the current card
+        { translateY },
+      ],
+    },
+  };
+}
+
+/**
+ * Standard Android-style fade in from the bottom for Android Oreo.
+ */
+export function forFadeFromBottomAndroid({
+  positions: { current },
+  layout,
+  closing,
+}: CardInterpolationProps): CardInterpolatedStyle {
+  const translateY = interpolate(current, {
+    inputRange: [0, 1],
+    outputRange: [multiply(layout.height, 0.08), 0],
+  });
+
+  const opacity = cond(
+    closing,
+    current,
+    interpolate(current, {
+      inputRange: [0, 0.5, 0.9, 1],
+      outputRange: [0, 0.25, 0.7, 1],
+    })
+  );
+
+  return {
+    cardStyle: {
+      opacity,
+      transform: [{ translateY }],
+    },
+  };
+}
+
+/**
+ * Standard Android-style wipe from the bottom for Android Pie.
+ */
+export function forWipeFromBottomAndroid({
+  positions: { current, next },
+  layout,
+}: CardInterpolationProps): CardInterpolatedStyle {
+  const containerTranslateY = interpolate(current, {
+    inputRange: [0, 1],
+    outputRange: [layout.height, 0],
+  });
+  const cardTranslateYFocused = interpolate(current, {
+    inputRange: [0, 1],
+    outputRange: [multiply(layout.height, 95.9 / 100, -1), 0],
+  });
+  const cardTranslateYUnfocused = next
+    ? interpolate(next, {
+        inputRange: [0, 1],
+        outputRange: [0, multiply(layout.height, 2 / 100, -1)],
+      })
+    : 0;
+  const overlayOpacity = interpolate(current, {
+    inputRange: [0, 0.36, 1],
+    outputRange: [0, 0.1, 0.1],
+  });
+
+  return {
+    containerStyle: {
+      transform: [{ translateY: containerTranslateY }],
+    },
+    cardStyle: {
+      transform: [
+        { translateY: cardTranslateYFocused },
+        { translateY: cardTranslateYUnfocused },
+      ],
+    },
+    overlayStyle: { opacity: overlayOpacity },
+  };
+}