From 59a85fabb2a74c753c1ea9fb770867204793cdb2 Mon Sep 17 00:00:00 2001
From: Stefan Roex <stefanroex@gmail.com>
Date: Fri, 23 Jun 2017 05:24:43 +0200
Subject: [PATCH] More iOS-ish transitions (#1786)

---
 packages/react-navigation/src/TypeDefinition.js    |  3 +++
 packages/react-navigation/src/views/Card.js        |  4 ++--
 packages/react-navigation/src/views/CardStack.js   | 14 +++++++++++---
 .../src/views/CardStackStyleInterpolator.js        |  8 ++++----
 .../src/views/TransitionConfigs.js                 |  6 ++++++
 5 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/packages/react-navigation/src/TypeDefinition.js b/packages/react-navigation/src/TypeDefinition.js
index 6c6ff93c..a4502397 100644
--- a/packages/react-navigation/src/TypeDefinition.js
+++ b/packages/react-navigation/src/TypeDefinition.js
@@ -420,6 +420,9 @@ export type TransitionConfig = {
   // How to animate position and opacity of the screen
   // based on the value generated by the transitionSpec
   screenInterpolator?: (props: NavigationSceneRendererProps) => Object,
+  // The style of the container. Useful when a scene doesn't have
+  // 100% opacity and the underlying container is visible.
+  containerStyle?: Style,
 };
 
 export type NavigationAnimationSetter = (
diff --git a/packages/react-navigation/src/views/Card.js b/packages/react-navigation/src/views/Card.js
index 7b4d4980..65876b20 100644
--- a/packages/react-navigation/src/views/Card.js
+++ b/packages/react-navigation/src/views/Card.js
@@ -44,8 +44,8 @@ const styles = StyleSheet.create({
     right: 0,
     shadowColor: 'black',
     shadowOffset: { width: 0, height: 0 },
-    shadowOpacity: 0.4,
-    shadowRadius: 10,
+    shadowOpacity: 0.2,
+    shadowRadius: 5,
     top: 0,
   },
 });
diff --git a/packages/react-navigation/src/views/CardStack.js b/packages/react-navigation/src/views/CardStack.js
index 2c96cef6..9d589c1f 100644
--- a/packages/react-navigation/src/views/CardStack.js
+++ b/packages/react-navigation/src/views/CardStack.js
@@ -358,9 +358,13 @@ class CardStack extends Component {
       : Platform.OS === 'ios';
 
     const handlers = gesturesEnabled ? responder.panHandlers : {};
+    const containerStyle = [
+      styles.container,
+      this._getTransitionConfig().containerStyle,
+    ];
 
     return (
-      <View {...handlers} style={styles.container}>
+      <View {...handlers} style={containerStyle}>
         <View style={styles.scenes}>
           {scenes.map((s: *) => this._renderCard(s))}
         </View>
@@ -409,16 +413,20 @@ class CardStack extends Component {
     );
   }
 
-  _renderCard = (scene: NavigationScene): React.Element<*> => {
+  _getTransitionConfig = () => {
     const isModal = this.props.mode === 'modal';
 
     /* $FlowFixMe */
-    const { screenInterpolator } = TransitionConfigs.getTransitionConfig(
+    return TransitionConfigs.getTransitionConfig(
       this.props.transitionConfig,
       {},
       {},
       isModal
     );
+  };
+
+  _renderCard = (scene: NavigationScene): React.Element<*> => {
+    const { screenInterpolator } = this._getTransitionConfig();
     const style =
       screenInterpolator && screenInterpolator({ ...this.props, scene });
 
diff --git a/packages/react-navigation/src/views/CardStackStyleInterpolator.js b/packages/react-navigation/src/views/CardStackStyleInterpolator.js
index 6c97af32..7e4c9baa 100644
--- a/packages/react-navigation/src/views/CardStackStyleInterpolator.js
+++ b/packages/react-navigation/src/views/CardStackStyleInterpolator.js
@@ -50,8 +50,8 @@ function forHorizontal(props: NavigationSceneRendererProps): Object {
 
   const width = layout.initWidth;
   const outputRange = I18nManager.isRTL
-    ? ([-width, 0, 10]: Array<number>)
-    : ([width, 0, -10]: Array<number>);
+    ? ([-width, 0, width * 0.3]: Array<number>)
+    : ([width, 0, width * -0.3]: Array<number>);
 
   // Add [index - 1, index - 0.99] to the interpolated opacity for screen transition.
   // This makes the screen's shadow to disappear smoothly.
@@ -63,7 +63,7 @@ function forHorizontal(props: NavigationSceneRendererProps): Object {
       index + 0.99,
       index + 1,
     ]: Array<number>),
-    outputRange: ([0, 1, 1, 0.3, 0]: Array<number>),
+    outputRange: ([0, 1, 1, 0.85, 0]: Array<number>),
   });
 
   const translateY = 0;
@@ -99,7 +99,7 @@ function forVertical(props: NavigationSceneRendererProps): Object {
       index + 0.99,
       index + 1,
     ]: Array<number>),
-    outputRange: ([0, 1, 1, 0.3, 0]: Array<number>),
+    outputRange: ([0, 1, 1, 0.85, 0]: Array<number>),
   });
 
   const translateX = 0;
diff --git a/packages/react-navigation/src/views/TransitionConfigs.js b/packages/react-navigation/src/views/TransitionConfigs.js
index 97a68a29..5661ee3f 100644
--- a/packages/react-navigation/src/views/TransitionConfigs.js
+++ b/packages/react-navigation/src/views/TransitionConfigs.js
@@ -27,12 +27,18 @@ const IOSTransitionSpec = ({
 const SlideFromRightIOS = ({
   transitionSpec: IOSTransitionSpec,
   screenInterpolator: CardStackStyleInterpolator.forHorizontal,
+  containerStyle: {
+    backgroundColor: '#000',
+  },
 }: TransitionConfig);
 
 // Standard iOS navigation transition for modals
 const ModalSlideFromBottomIOS = ({
   transitionSpec: IOSTransitionSpec,
   screenInterpolator: CardStackStyleInterpolator.forVertical,
+  containerStyle: {
+    backgroundColor: '#000',
+  },
 }: TransitionConfig);
 
 // Standard Android navigation transition when opening an Activity