From b5a60e329a6db3197174ef75b02591fa321afd96 Mon Sep 17 00:00:00 2001 From: Neo Date: Mon, 24 Apr 2017 20:31:44 +0800 Subject: [PATCH] Add support for custom transitionConfig (#1187) * Fix transitionConfig regression * Fix flow * Add doc * Update StackNavigator.md * Update StackNavigator.md * Update CardStackTransitioner.js * Update TypeDefinition.js --- .../docs/api/navigators/StackNavigator.md | 1 + packages/react-navigation/src/TypeDefinition.js | 12 ++++++++++++ .../src/navigators/StackNavigator.js | 2 ++ packages/react-navigation/src/views/CardStack.js | 3 +-- .../src/views/CardStackTransitioner.js | 7 ++++--- .../react-navigation/src/views/TransitionConfigs.js | 13 +------------ 6 files changed, 21 insertions(+), 17 deletions(-) diff --git a/packages/react-navigation/docs/api/navigators/StackNavigator.md b/packages/react-navigation/docs/api/navigators/StackNavigator.md index 56fcdcb9..c7cdc6fb 100644 --- a/packages/react-navigation/docs/api/navigators/StackNavigator.md +++ b/packages/react-navigation/docs/api/navigators/StackNavigator.md @@ -85,6 +85,7 @@ Visual options: - `screen` - Each screen has a header attached to it and the header fades in and out together with the screen. This is a common pattern on Android. - `none` - No header will be rendered. - `cardStyle` - Use this prop to override or extend the default style for an individual card in stack. +- `transitionConfig` - Function to return an object that overrides default screen transitions. - `onTransitionStart` - Function to be invoked when the card transition animation is about to start. - `onTransitionEnd` - Function to be invoked once the card transition animation completes. diff --git a/packages/react-navigation/src/TypeDefinition.js b/packages/react-navigation/src/TypeDefinition.js index 35916beb..e7200c10 100644 --- a/packages/react-navigation/src/TypeDefinition.js +++ b/packages/react-navigation/src/TypeDefinition.js @@ -209,6 +209,7 @@ export type NavigationStackViewConfig = { headerMode?: HeaderMode, headerComponent?: ReactClass>, cardStyle?: Style, + transitionConfig?: () => TransitionConfig, onTransitionStart?: () => void, onTransitionEnd?: () => void, }; @@ -401,6 +402,17 @@ export type NavigationTransitionSpec = { timing?: (value: AnimatedValue, config: any) => any, }; +/** + * Describes a visual transition from one screen to another. + */ +export type TransitionConfig = { + // The basics properties of the animation, such as duration and easing + transitionSpec?: NavigationTransitionSpec, + // How to animate position and opacity of the screen + // based on the value generated by the transitionSpec + screenInterpolator?: (props: NavigationSceneRendererProps) => Object, +}; + export type NavigationAnimationSetter = ( position: AnimatedValue, newState: NavigationState, diff --git a/packages/react-navigation/src/navigators/StackNavigator.js b/packages/react-navigation/src/navigators/StackNavigator.js index d7b446f1..9ebffeea 100644 --- a/packages/react-navigation/src/navigators/StackNavigator.js +++ b/packages/react-navigation/src/navigators/StackNavigator.js @@ -30,6 +30,7 @@ export default ( headerMode, mode, cardStyle, + transitionConfig, onTransitionStart, onTransitionEnd, navigationOptions, @@ -55,6 +56,7 @@ export default ( headerMode={headerMode} mode={mode} cardStyle={cardStyle} + transitionConfig={transitionConfig} onTransitionStart={onTransitionStart} onTransitionEnd={onTransitionEnd} /> diff --git a/packages/react-navigation/src/views/CardStack.js b/packages/react-navigation/src/views/CardStack.js index 3d9ee52a..4aed4919 100644 --- a/packages/react-navigation/src/views/CardStack.js +++ b/packages/react-navigation/src/views/CardStack.js @@ -28,10 +28,9 @@ import type { NavigationStackScreenOptions, HeaderMode, Style, + TransitionConfig, } from '../TypeDefinition'; -import type { TransitionConfig } from './TransitionConfigs'; - import TransitionConfigs from './TransitionConfigs'; const emptyFunction = () => {}; diff --git a/packages/react-navigation/src/views/CardStackTransitioner.js b/packages/react-navigation/src/views/CardStackTransitioner.js index 28bc0cea..2e19191f 100644 --- a/packages/react-navigation/src/views/CardStackTransitioner.js +++ b/packages/react-navigation/src/views/CardStackTransitioner.js @@ -9,8 +9,6 @@ import Transitioner from './Transitioner'; import TransitionConfigs from './TransitionConfigs'; import Header from './Header'; -import type { TransitionConfig } from './TransitionConfigs'; - import type { NavigationAction, NavigationSceneRenderer, @@ -21,6 +19,7 @@ import type { NavigationRouter, HeaderMode, Style, + TransitionConfig, } from '../TypeDefinition'; const NativeAnimatedModule = NativeModules && @@ -104,8 +103,9 @@ class CardStackTransitioner extends Component { headerMode, mode, router, - style, cardStyle, + transitionConfig, + style, } = this.props; return ( { mode={mode} router={router} cardStyle={cardStyle} + transitionConfig={transitionConfig} style={style} {...props} /> diff --git a/packages/react-navigation/src/views/TransitionConfigs.js b/packages/react-navigation/src/views/TransitionConfigs.js index db7b7d4e..eb30845c 100644 --- a/packages/react-navigation/src/views/TransitionConfigs.js +++ b/packages/react-navigation/src/views/TransitionConfigs.js @@ -3,24 +3,13 @@ import { Animated, Easing, Platform } from 'react-native'; import type { - NavigationSceneRendererProps, NavigationTransitionProps, NavigationTransitionSpec, + TransitionConfig, } from '../TypeDefinition'; import CardStackStyleInterpolator from './CardStackStyleInterpolator'; -/** - * Describes a visual transition from one screen to another. - */ -export type TransitionConfig = { - // The basics properties of the animation, such as duration and easing - transitionSpec?: NavigationTransitionSpec, - // How to animate position and opacity of the screen - // based on the value generated by the transitionSpec - screenInterpolator?: (NavigationSceneRendererProps) => Object, -}; - // Used for all animations unless overriden const DefaultTransitionSpec = ({ // The following options are meant to mimic the nav animations of iOS 10