Permalink
Browse files

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 #11082

Differential Revision: D4362540

Pulled By: ericvicenti

fbshipit-source-id: 2ebd0047c147ac3d6c43ce880661c99de8fd0880
  • Loading branch information...
dingbat authored and facebook-github-bot committed Dec 22, 2016
1 parent 5927646 commit c8a7f9e2d1618b5feea68915b5e2e4f12247ceed
Showing with 19 additions and 6 deletions.
  1. +19 −6 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;

0 comments on commit c8a7f9e

Please sign in to comment.