CardStackTransitioner.js
2.88 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/* @flow */
import * as React from 'react';
import { NativeModules } from 'react-native';
import CardStack from './CardStack';
import CardStackStyleInterpolator from './CardStackStyleInterpolator';
import Transitioner from '../Transitioner';
import TransitionConfigs from './TransitionConfigs';
import type {
NavigationSceneRenderer,
NavigationScreenProp,
NavigationStackScreenOptions,
NavigationState,
NavigationTransitionProps,
NavigationNavigatorProps,
NavigationRouter,
HeaderMode,
ViewStyleProp,
TransitionConfig,
} from '../../TypeDefinition';
const NativeAnimatedModule =
NativeModules && NativeModules.NativeAnimatedModule;
type Props = {
headerMode: HeaderMode,
mode: 'card' | 'modal',
router: NavigationRouter<NavigationState, NavigationStackScreenOptions>,
cardStyle?: ViewStyleProp,
onTransitionStart?: () => void,
onTransitionEnd?: () => void,
/**
* Optional custom animation when transitioning between screens.
*/
transitionConfig?: () => TransitionConfig,
} & NavigationNavigatorProps<NavigationStackScreenOptions, NavigationState>;
class CardStackTransitioner extends React.Component<Props> {
_render: NavigationSceneRenderer;
static defaultProps = {
mode: 'card',
};
render() {
return (
<Transitioner
configureTransition={this._configureTransition}
navigation={this.props.navigation}
render={this._render}
onTransitionStart={this.props.onTransitionStart}
onTransitionEnd={this.props.onTransitionEnd}
/>
);
}
_configureTransition = (
// props for the new screen
transitionProps: NavigationTransitionProps,
// props for the old screen
prevTransitionProps: ?NavigationTransitionProps
) => {
const isModal = this.props.mode === 'modal';
// Copy the object so we can assign useNativeDriver below
// (avoid Flow error, transitionSpec is of type NavigationTransitionSpec).
const transitionSpec = {
...TransitionConfigs.getTransitionConfig(
this.props.transitionConfig,
transitionProps,
prevTransitionProps,
isModal
).transitionSpec,
};
if (
!!NativeAnimatedModule &&
// Native animation support also depends on the transforms used:
CardStackStyleInterpolator.canUseNativeDriver()
) {
// Internal undocumented prop
transitionSpec.useNativeDriver = true;
}
return transitionSpec;
};
_render = (props: NavigationTransitionProps): React.Node => {
const {
screenProps,
headerMode,
mode,
router,
cardStyle,
transitionConfig,
} = this.props;
return (
<CardStack
screenProps={screenProps}
headerMode={headerMode}
mode={mode}
router={router}
cardStyle={cardStyle}
transitionConfig={transitionConfig}
{...props}
/>
);
};
}
export default CardStackTransitioner;