Skip to content
Browse files

Support custom card style interpolators

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.)


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 {
} 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) :
const interpolator = this.props.cardStyleInterpolator || (isVertical ?
NavigationCardStackStyleInterpolator.forVertical :

const style = interpolator(props);

let panHandlers = null;

0 comments on commit c8a7f9e

Please sign in to comment.
You can’t perform that action at this time.