From 8b509dd525cb62ef531e2dfbfd58cfda6d470905 Mon Sep 17 00:00:00 2001
From: Brent Vatne <brentvatne@gmail.com>
Date: Thu, 11 Oct 2018 17:04:23 -0700
Subject: [PATCH] Add options to opt-in/out of card overlay and shadow

---
 packages/stack/example/src/SimpleStack.js     |  4 +++
 .../stack/src/views/StackView/StackView.js    | 33 +++++++++++++++----
 .../src/views/StackView/StackViewLayout.js    |  2 ++
 .../StackView/StackViewStyleInterpolator.js   | 26 ++++++++-------
 packages/stack/src/views/Transitioner.js      |  3 +-
 5 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/packages/stack/example/src/SimpleStack.js b/packages/stack/example/src/SimpleStack.js
index 1cc3cda8..68b40f00 100644
--- a/packages/stack/example/src/SimpleStack.js
+++ b/packages/stack/example/src/SimpleStack.js
@@ -68,5 +68,9 @@ export default createStackNavigator(
   },
   {
     initialRouteName: 'List',
+
+    // these are the defaults
+    cardShadowEnabled: true,
+    cardOverlayEnabled: false,
   }
 );
diff --git a/packages/stack/src/views/StackView/StackView.js b/packages/stack/src/views/StackView/StackView.js
index 57e28f24..a3a2c45e 100644
--- a/packages/stack/src/views/StackView/StackView.js
+++ b/packages/stack/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}
diff --git a/packages/stack/src/views/StackView/StackViewLayout.js b/packages/stack/src/views/StackView/StackViewLayout.js
index 5132b3eb..cfdc938d 100644
--- a/packages/stack/src/views/StackView/StackViewLayout.js
+++ b/packages/stack/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,
       });
diff --git a/packages/stack/src/views/StackView/StackViewStyleInterpolator.js b/packages/stack/src/views/StackView/StackViewStyleInterpolator.js
index 74ff71d4..0e3a7bf1 100644
--- a/packages/stack/src/views/StackView/StackViewStyleInterpolator.js
+++ b/packages/stack/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 }],
diff --git a/packages/stack/src/views/Transitioner.js b/packages/stack/src/views/Transitioner.js
index f8f9be80..0e0b1d78 100644
--- a/packages/stack/src/views/Transitioner.js
+++ b/packages/stack/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,
   };
 }