More iOS-ish transitions (#1786)

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 = (

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

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

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;

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