UNPKG

4.03 kBTypeScriptView Raw
1import { Platform } from 'react-native';
2
3import type { TransitionPreset } from '../types';
4import {
5 forBottomSheetAndroid,
6 forFadeFromBottomAndroid,
7 forFadeFromCenter as forFadeCard,
8 forHorizontalIOS,
9 forModalPresentationIOS,
10 forRevealFromBottomAndroid,
11 forScaleFromCenterAndroid,
12 forVerticalIOS,
13} from './CardStyleInterpolators';
14import { forFade } from './HeaderStyleInterpolators';
15import {
16 BottomSheetSlideInSpec,
17 BottomSheetSlideOutSpec,
18 FadeInFromBottomAndroidSpec,
19 FadeOutToBottomAndroidSpec,
20 RevealFromBottomAndroidSpec,
21 ScaleFromCenterAndroidSpec,
22 TransitionIOSSpec,
23} from './TransitionSpecs';
24
25const ANDROID_VERSION_PIE = 28;
26const ANDROID_VERSION_10 = 29;
27
28/**
29 * Standard iOS navigation transition.
30 */
31export const SlideFromRightIOS: TransitionPreset = {
32 gestureDirection: 'horizontal',
33 transitionSpec: {
34 open: TransitionIOSSpec,
35 close: TransitionIOSSpec,
36 },
37 cardStyleInterpolator: forHorizontalIOS,
38 headerStyleInterpolator: forFade,
39};
40
41/**
42 * Standard iOS navigation transition for modals.
43 */
44export const ModalSlideFromBottomIOS: TransitionPreset = {
45 gestureDirection: 'vertical',
46 transitionSpec: {
47 open: TransitionIOSSpec,
48 close: TransitionIOSSpec,
49 },
50 cardStyleInterpolator: forVerticalIOS,
51 headerStyleInterpolator: forFade,
52};
53
54/**
55 * Standard iOS modal presentation style (introduced in iOS 13).
56 */
57export const ModalPresentationIOS: TransitionPreset = {
58 gestureDirection: 'vertical',
59 transitionSpec: {
60 open: TransitionIOSSpec,
61 close: TransitionIOSSpec,
62 },
63 cardStyleInterpolator: forModalPresentationIOS,
64 headerStyleInterpolator: forFade,
65};
66
67/**
68 * Standard Android navigation transition when opening or closing an Activity on Android < 9 (Oreo).
69 */
70export const FadeFromBottomAndroid: TransitionPreset = {
71 gestureDirection: 'vertical',
72 transitionSpec: {
73 open: FadeInFromBottomAndroidSpec,
74 close: FadeOutToBottomAndroidSpec,
75 },
76 cardStyleInterpolator: forFadeFromBottomAndroid,
77 headerStyleInterpolator: forFade,
78};
79
80/**
81 * Standard Android navigation transition when opening or closing an Activity on Android 9 (Pie).
82 */
83export const RevealFromBottomAndroid: TransitionPreset = {
84 gestureDirection: 'vertical',
85 transitionSpec: {
86 open: RevealFromBottomAndroidSpec,
87 close: RevealFromBottomAndroidSpec,
88 },
89 cardStyleInterpolator: forRevealFromBottomAndroid,
90 headerStyleInterpolator: forFade,
91};
92
93/**
94 * Standard Android navigation transition when opening or closing an Activity on Android 10 (Q).
95 */
96export const ScaleFromCenterAndroid: TransitionPreset = {
97 gestureDirection: 'horizontal',
98 transitionSpec: {
99 open: ScaleFromCenterAndroidSpec,
100 close: ScaleFromCenterAndroidSpec,
101 },
102 cardStyleInterpolator: forScaleFromCenterAndroid,
103 headerStyleInterpolator: forFade,
104};
105
106/**
107 * Standard bottom sheet slide transition for Android 10.
108 */
109export const BottomSheetAndroid: TransitionPreset = {
110 gestureDirection: 'vertical',
111 transitionSpec: {
112 open: BottomSheetSlideInSpec,
113 close: BottomSheetSlideOutSpec,
114 },
115 cardStyleInterpolator: forBottomSheetAndroid,
116 headerStyleInterpolator: forFade,
117};
118
119/**
120 * Fade transition for transparent modals.
121 */
122export const ModalFadeTransition: TransitionPreset = {
123 gestureDirection: 'vertical',
124 transitionSpec: {
125 open: BottomSheetSlideInSpec,
126 close: BottomSheetSlideOutSpec,
127 },
128 cardStyleInterpolator: forFadeCard,
129 headerStyleInterpolator: forFade,
130};
131
132/**
133 * Default navigation transition for the current platform.
134 */
135export const DefaultTransition = Platform.select({
136 ios: SlideFromRightIOS,
137 android:
138 Platform.Version >= ANDROID_VERSION_10
139 ? ScaleFromCenterAndroid
140 : Platform.Version >= ANDROID_VERSION_PIE
141 ? RevealFromBottomAndroid
142 : FadeFromBottomAndroid,
143 default: ScaleFromCenterAndroid,
144});
145
146/**
147 * Default modal transition for the current platform.
148 */
149export const ModalTransition = Platform.select({
150 ios: ModalPresentationIOS,
151 default: BottomSheetAndroid,
152});