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 { /** * 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 { _renderScene(props: NavigationSceneRendererProps): React.Element { 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;