Add options to opt-in/out of card overlay and shadow

example/src/SimpleStack.js

@@ -68,5 +68,9 @@ export default createStackNavigator(
   },
   {
     initialRouteName: 'List',
+
+    // these are the defaults
+    cardShadowEnabled: true,
+    cardOverlayEnabled: false,
   }
 );

src/views/StackView/StackView.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NativeModules } from 'react-native';
+import { Platform, NativeModules } from 'react-native';
 
 import { StackActions } from 'react-navigation';
 import StackViewLayout from './StackViewLayout';
@@ -9,13 +9,16 @@ import TransitionConfigs from './StackViewTransitionConfigs';
 const NativeAnimatedModule =
   NativeModules && NativeModules.NativeAnimatedModule;
 
-class StackView extends React.Component {
-  static defaultProps = {
-    navigationConfig: {
-      mode: 'card',
-    },
-  };
+// NOTE(brentvatne): this was previously in defaultProps, but that is deceiving
+// because the entire object will be clobbered by navigationConfig that is
+// passed in.
+const DefaultNavigationConfig = {
+  mode: 'card',
+  cardShadowEnabled: true,
+  cardcardOverlayEnabled: false,
+};
 
+class StackView extends React.Component {
   render() {
     return (
       <Transitioner
@@ -68,11 +71,27 @@ class StackView extends React.Component {
     };
   };
 
+  _getShadowEnabled = () => {
+    const { navigationConfig } = this.props;
+    return navigationConfig && navigationConfig.hasOwnProperty('cardShadowEnabled')
+      ? navigationConfig.cardShadowEnabled
+      : DefaultNavigationConfig.cardShadowEnabled;
+  };
+
+  _getCardOverlayEnabled = () => {
+    const { navigationConfig } = this.props;
+    return navigationConfig && navigationConfig.hasOwnProperty('cardOverlayEnabled')
+      ? navigationConfig.cardOverlayEnabled
+      : DefaultNavigationConfig.cardOverlayEnabled;
+  };
+
   _render = (transitionProps, lastTransitionProps) => {
     const { screenProps, navigationConfig } = this.props;
     return (
       <StackViewLayout
         {...navigationConfig}
+        shadowEnabled={this._getShadowEnabled()}
+        cardOverlayEnabled={this._getCardOverlayEnabled()}
         onGestureBegin={this.props.onGestureBegin}
         onGestureCanceled={this.props.onGestureCanceled}
         onGestureEnd={this.props.onGestureEnd}

src/views/StackView/StackViewLayout.js

@@ -714,6 +714,8 @@ class StackViewLayout extends React.Component {
       screenInterpolator &&
       screenInterpolator({
         ...this.props.transitionProps,
+        shadowEnabled: this.props.shadowEnabled,
+        cardOverlayEnabled: this.props.cardOverlayEnabled,
         position: this._getPosition(),
         scene,
       });

src/views/StackView/StackViewStyleInterpolator.js

@@ -59,19 +59,21 @@ function forHorizontal(props) {
     extrapolate: 'clamp',
   });
 
-  // TODO: add flag to disable shadow
-  const shadowOpacity = position.interpolate({
-    inputRange: [first, index, last],
-    outputRange: [0, 0.7, 0],
-    extrapolate: 'clamp',
-  });
+  const shadowOpacity = props.shadowEnabled
+    ? position.interpolate({
+        inputRange: [first, index, last],
+        outputRange: [0, 0.7, 0],
+        extrapolate: 'clamp',
+      })
+    : null;
 
-  // TODO: disable overlay by default, add flag to enable
-  let overlayOpacity = position.interpolate({
-    inputRange: [index, last - 0.5, last, last + EPS],
-    outputRange: [0, 0.07, 0.07, 0],
-    extrapolate: 'clamp',
-  });
+  let overlayOpacity = props.cardOverlayEnabled
+    ? position.interpolate({
+        inputRange: [index, last - 0.5, last, last + EPS],
+        outputRange: [0, 0.07, 0.07, 0],
+        extrapolate: 'clamp',
+      })
+    : null;
 
   return {
     transform: [{ translateX }],

src/views/Transitioner.js

@@ -243,7 +243,7 @@ class Transitioner extends React.Component {
 }
 
 function buildTransitionProps(props, state) {
-  const { navigation } = props;
+  const { navigation, options } = props;
 
   const { layout, position, scenes } = state;
 
@@ -257,6 +257,7 @@ function buildTransitionProps(props, state) {
     position,
     scenes,
     scene,
+    options,
     index: scene.index,
   };
 }