From c8a7f9e2d1618b5feea68915b5e2e4f12247ceed Mon Sep 17 00:00:00 2001
From: Dan Hassin <danhassin@mac.com>
Date: Thu, 22 Dec 2016 11:00:29 -0800
Subject: [PATCH] Support custom card style interpolators

Summary:
Transition animations are not very customizable right now with NavigationExperimental, unless I am missing something big. This PR allows NavigationCardStack to receive the `horizontalCardStyleInterpolator` and `verticalCardStyleInterpolator` props to override the default interpolators.

See the gif, transition animation changes from the default one (with scale) to a custom one (without scale) when passing in a custom interpolator. (The custom interpolator is an exact copy of the one in `NavigationCardStackStyleInterpolator.forHorizontal`, minus the scale transform.)

![cmz0gagoec](https://cloud.githubusercontent.com/assets/1389312/20552499/af33667c-b119-11e6-97e7-bea9986a58e0.gif)

Let me know if there's a robust way to test, but I couldn't find anything.

**To address**
The new `canUseNativeDriver` function on NavigationCardStackStyleInterpolator, which returns `true`, is dependent on the interpolator, so custom interpolators may need to falsify this. Didn't include it on the first pass since I wasn
Closes https://github.com/facebook/react-native/pull/11082

Differential Revision: D4362540

Pulled By: ericvicenti

fbshipit-source-id: 2ebd0047c147ac3d6c43ce880661c99de8fd0880
---
 .../NavigationCardStack.js                    | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js b/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js
index 28032f94f..a50e2c36d 100644
--- a/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js
+++ b/Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js
@@ -50,6 +50,7 @@ import type {
   NavigationSceneRenderer,
   NavigationSceneRendererProps,
   NavigationTransitionProps,
+  NavigationStyleInterpolator,
 } from 'NavigationTypeDefinition';
 
 import type {
@@ -65,12 +66,13 @@ type Props = {
   cardStyle?: any,
   style: any,
   gestureResponseDistance?: ?number,
-  enableGestures: ?boolean
+  enableGestures: ?boolean,
+  cardStyleInterpolator?: ?NavigationStyleInterpolator,
 };
 
 type DefaultProps = {
   direction: NavigationGestureDirection,
-  enableGestures: boolean
+  enableGestures: boolean,
 };
 
 /**
@@ -141,10 +143,19 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
 
     /**
      * The distance from the edge of the card which gesture response can start
-     * for. Defaults value is `30`.
+     * for. Default value is `30`.
      */
     gestureResponseDistance: PropTypes.number,
 
+    /**
+     * An interpolator function that is passed an object parameter of type
+     * NavigationSceneRendererProps and should return a style object to apply to
+     * the transitioning navigation card.
+     *
+     * Default interpolator transitions translateX, scale, and opacity.
+     */
+    cardStyleInterpolator: PropTypes.func,
+
     /**
      * Enable gestures. Default value is true.
      *
@@ -264,9 +275,11 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
   _renderScene(props: NavigationSceneRendererProps): React.Element<any> {
     const isVertical = this.props.direction === 'vertical';
 
-    const style = isVertical ?
-      NavigationCardStackStyleInterpolator.forVertical(props) :
-      NavigationCardStackStyleInterpolator.forHorizontal(props);
+    const interpolator = this.props.cardStyleInterpolator || (isVertical ?
+      NavigationCardStackStyleInterpolator.forVertical :
+      NavigationCardStackStyleInterpolator.forHorizontal);
+
+    const style = interpolator(props);
 
     let panHandlers = null;