1 | import type { HeaderBackButton, HeaderBackButtonProps, HeaderButtonProps, HeaderOptions, HeaderTitleProps } from '@react-navigation/elements';
|
2 | import type { Descriptor, NavigationHelpers, NavigationProp, ParamListBase, Route, RouteProp, StackActionHelpers, StackNavigationState } from '@react-navigation/native';
|
3 | import type * as React from 'react';
|
4 | import type { Animated, StyleProp, TextStyle, ViewStyle } from 'react-native';
|
5 | export type StackNavigationEventMap = {
|
6 | /**
|
7 | * Event which fires when a transition animation starts.
|
8 | */
|
9 | transitionStart: {
|
10 | data: {
|
11 | closing: boolean;
|
12 | };
|
13 | };
|
14 | /**
|
15 | * Event which fires when a transition animation ends.
|
16 | */
|
17 | transitionEnd: {
|
18 | data: {
|
19 | closing: boolean;
|
20 | };
|
21 | };
|
22 | /**
|
23 | * Event which fires when navigation gesture starts.
|
24 | */
|
25 | gestureStart: {
|
26 | data: undefined;
|
27 | };
|
28 | /**
|
29 | * Event which fires when navigation gesture is completed.
|
30 | */
|
31 | gestureEnd: {
|
32 | data: undefined;
|
33 | };
|
34 | /**
|
35 | * Event which fires when navigation gesture is canceled.
|
36 | */
|
37 | gestureCancel: {
|
38 | data: undefined;
|
39 | };
|
40 | };
|
41 | export type StackNavigationHelpers = NavigationHelpers<ParamListBase, StackNavigationEventMap> & StackActionHelpers<ParamListBase>;
|
42 | export type StackNavigationProp<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = NavigationProp<ParamList, RouteName, NavigatorID, StackNavigationState<ParamList>, StackNavigationOptions, StackNavigationEventMap> & StackActionHelpers<ParamList>;
|
43 | export type StackScreenProps<ParamList extends ParamListBase, RouteName extends keyof ParamList = keyof ParamList, NavigatorID extends string | undefined = undefined> = {
|
44 | navigation: StackNavigationProp<ParamList, RouteName, NavigatorID>;
|
45 | route: RouteProp<ParamList, RouteName>;
|
46 | };
|
47 | export type Layout = {
|
48 | width: number;
|
49 | height: number;
|
50 | };
|
51 | export type GestureDirection = 'horizontal' | 'horizontal-inverted' | 'vertical' | 'vertical-inverted';
|
52 | type SceneOptionsDefaults = TransitionPreset & {
|
53 | animationEnabled: boolean;
|
54 | gestureEnabled: boolean;
|
55 | cardOverlayEnabled: boolean;
|
56 | headerMode: StackHeaderMode;
|
57 | };
|
58 | export type Scene = {
|
59 | /**
|
60 | * Route object for the current screen.
|
61 | */
|
62 | route: Route<string>;
|
63 | /**
|
64 | * Descriptor object for the screen.
|
65 | */
|
66 | descriptor: Omit<StackDescriptor, 'options'> & {
|
67 | options: Omit<StackDescriptor['options'], keyof SceneOptionsDefaults> & SceneOptionsDefaults;
|
68 | };
|
69 | /**
|
70 | * Animated nodes representing the progress of the animation.
|
71 | */
|
72 | progress: SceneProgress;
|
73 | };
|
74 | export type SceneProgress = {
|
75 | /**
|
76 | * Progress value of the current screen.
|
77 | */
|
78 | current: Animated.AnimatedInterpolation<number>;
|
79 | /**
|
80 | * Progress value for the screen after this one in the stack.
|
81 | * This can be `undefined` in case the screen animating is the last one.
|
82 | */
|
83 | next?: Animated.AnimatedInterpolation<number>;
|
84 | /**
|
85 | * Progress value for the screen before this one in the stack.
|
86 | * This can be `undefined` in case the screen animating is the first one.
|
87 | */
|
88 | previous?: Animated.AnimatedInterpolation<number>;
|
89 | };
|
90 | export type StackHeaderMode = 'float' | 'screen';
|
91 | export type StackPresentationMode = 'card' | 'modal';
|
92 | export type StackHeaderOptions = Omit<HeaderOptions, 'headerLeft' | 'headerTitle' | 'headerRight'> & {
|
93 | /**
|
94 | * String or a function that returns a React Element to be used by the header.
|
95 | * Defaults to screen `title` or route name.
|
96 | *
|
97 | * It receives `allowFontScaling`, `tintColor`, `style` and `children` in the options object as an argument.
|
98 | * The title string is passed in `children`.
|
99 | */
|
100 | headerTitle?: string | ((props: HeaderTitleProps) => React.ReactNode);
|
101 | /**
|
102 | * Function which returns a React Element to display on the left side of the header.
|
103 | */
|
104 | headerLeft?: (props: HeaderBackButtonProps) => React.ReactNode;
|
105 | /**
|
106 | * Function which returns a React Element to display on the right side of the header.
|
107 | */
|
108 | headerRight?: (props: HeaderButtonProps) => React.ReactNode;
|
109 | /**
|
110 | * Whether back button title font should scale to respect Text Size accessibility settings. Defaults to `false`.
|
111 | */
|
112 | headerBackAllowFontScaling?: boolean;
|
113 | /**
|
114 | * Accessibility label for the header back button.
|
115 | */
|
116 | headerBackAccessibilityLabel?: string;
|
117 | /**
|
118 | * ID to locate this back button in tests.
|
119 | */
|
120 | headerBackTestID?: string;
|
121 | /**
|
122 | * Title string used by the back button on iOS.
|
123 | * Defaults to the previous screen's title, or "Back" if there's not enough space.
|
124 | * Use `headerBackTitleVisible: false` to hide it.
|
125 | */
|
126 | headerBackTitle?: string;
|
127 | /**
|
128 | * Whether the back button title should be visible or not.
|
129 | *
|
130 | * Defaults to `true` on iOS, `false` on Android.
|
131 | */
|
132 | headerBackTitleVisible?: boolean;
|
133 | /**
|
134 | * Style object for the back title.
|
135 | */
|
136 | headerBackTitleStyle?: StyleProp<TextStyle>;
|
137 | /**
|
138 | * Title string used by the back button when `headerBackTitle` doesn't fit on the screen. `"Back"` by default.
|
139 | */
|
140 | headerTruncatedBackTitle?: string;
|
141 | /**
|
142 | * Function which returns a React Element to display custom image in header's back button.
|
143 | * It receives the `tintColor` in in the options object as an argument. object.
|
144 | * Defaults to Image component with a the default back icon image for the platform (a chevron on iOS and an arrow on Android).
|
145 | */
|
146 | headerBackImage?: React.ComponentProps<typeof HeaderBackButton>['backImage'];
|
147 | };
|
148 | export type StackHeaderProps = {
|
149 | /**
|
150 | * Layout of the screen.
|
151 | */
|
152 | layout: Layout;
|
153 | /**
|
154 | * Options for the back button.
|
155 | */
|
156 | back?: {
|
157 | /**
|
158 | * Title of the previous screen.
|
159 | */
|
160 | title: string;
|
161 | };
|
162 | /**
|
163 | * Animated nodes representing the progress of the animation.
|
164 | */
|
165 | progress: SceneProgress;
|
166 | /**
|
167 | * Options for the current screen.
|
168 | */
|
169 | options: StackNavigationOptions;
|
170 | /**
|
171 | * Route object for the current screen.
|
172 | */
|
173 | route: Route<string>;
|
174 | /**
|
175 | * Navigation prop for the header.
|
176 | */
|
177 | navigation: StackNavigationProp<ParamListBase>;
|
178 | /**
|
179 | * Interpolated styles for various elements in the header.
|
180 | */
|
181 | styleInterpolator: StackHeaderStyleInterpolator;
|
182 | };
|
183 | export type StackDescriptor = Descriptor<StackNavigationOptions, StackNavigationProp<ParamListBase>, RouteProp<ParamListBase>>;
|
184 | export type StackDescriptorMap = Record<string, StackDescriptor>;
|
185 | export type StackNavigationOptions = StackHeaderOptions & Partial<TransitionPreset> & {
|
186 | /**
|
187 | * String that can be displayed in the header as a fallback for `headerTitle`.
|
188 | */
|
189 | title?: string;
|
190 | /**
|
191 | * Function that given `HeaderProps` returns a React Element to display as a header.
|
192 | */
|
193 | header?: (props: StackHeaderProps) => React.ReactNode;
|
194 | /**
|
195 | * Whether the header floats above the screen or part of the screen.
|
196 | * Defaults to `float` on iOS for non-modals, and `screen` for the rest.
|
197 | */
|
198 | headerMode?: StackHeaderMode;
|
199 | /**
|
200 | * Whether to show the header. The header is shown by default.
|
201 | * Setting this to `false` hides the header.
|
202 | */
|
203 | headerShown?: boolean;
|
204 | /**
|
205 | * Whether a shadow is visible for the card during transitions. Defaults to `true`.
|
206 | */
|
207 | cardShadowEnabled?: boolean;
|
208 | /**
|
209 | * Whether to have a semi-transparent dark overlay visible under the card during transitions.
|
210 | * Defaults to `true` on Android and `false` on iOS.
|
211 | */
|
212 | cardOverlayEnabled?: boolean;
|
213 | /**
|
214 | * Function that returns a React Element to display as a overlay for the card.
|
215 | */
|
216 | cardOverlay?: (props: {
|
217 | style: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
|
218 | }) => React.ReactNode;
|
219 | /**
|
220 | * Style object for the card in stack.
|
221 | * You can provide a custom background color to use instead of the default background here.
|
222 | *
|
223 | * You can also specify `{ backgroundColor: 'transparent' }` to make the previous screen visible underneath.
|
224 | * This is useful to implement things like modal dialogs.
|
225 | *
|
226 | * You should also specify `detachPreviousScreen: false` in options when using a transparent background
|
227 | * so that the previous screen isn't detached and stays below the current screen.
|
228 | *
|
229 | * You might also need to change the animation of the screen using `cardStyleInterpolator`
|
230 | * so that the previous screen isn't transformed or invisible.
|
231 | */
|
232 | cardStyle?: StyleProp<ViewStyle>;
|
233 | /**
|
234 | * Whether this screen should be presented as a modal or a regular card.
|
235 | *
|
236 | * Specifying this will configure several options:
|
237 | * - `card`: Use the default OS animations for iOS and Android screen transitions.
|
238 | * - `modal`: Use Modal animations. This changes a few things:
|
239 | * - Sets `headerMode` to `screen` for the screen unless specified otherwise.
|
240 | * - Changes the screen animation to match the platform behavior for modals.
|
241 | * - `transparentModal`: Similar to `modal`. This changes following things:
|
242 | * - Sets `headerMode` to `screen` for the screen unless specified otherwise.
|
243 | * - Sets background color of the screen to transparent, so previous screen is visible
|
244 | * - Adjusts the `detachPreviousScreen` option so that the previous screen stays rendered.
|
245 | * - Prevents the previous screen from animating from its last position.
|
246 | * - Changes the screen animation to a vertical slide animation.
|
247 | *
|
248 | * Defaults to 'card'.
|
249 | */
|
250 | presentation?: 'card' | 'modal' | 'transparentModal';
|
251 | /**
|
252 | * Whether transition animation should be enabled the screen.
|
253 | * If you set it to `false`, the screen won't animate when pushing or popping.
|
254 | * Defaults to `true` on Android and iOS, `false` on Web.
|
255 | */
|
256 | animationEnabled?: boolean;
|
257 | /**
|
258 | * The type of animation to use when this screen replaces another screen. Defaults to `push`.
|
259 | * When `pop` is used, the `pop` animation is applied to the screen being replaced.
|
260 | */
|
261 | animationTypeForReplace?: 'push' | 'pop';
|
262 | /**
|
263 | * Whether you can use gestures to dismiss this screen. Defaults to `true` on iOS, `false` on Android.
|
264 | * Not supported on Web.
|
265 | */
|
266 | gestureEnabled?: boolean;
|
267 | /**
|
268 | * Distance of touch start from the edge of the screen to recognize gestures.
|
269 | * Not supported on Web.
|
270 | */
|
271 | gestureResponseDistance?: number;
|
272 | /**
|
273 | * Number which determines the relevance of velocity for the gesture. Defaults to 0.3.
|
274 | * Not supported on Web.
|
275 | */
|
276 | gestureVelocityImpact?: number;
|
277 | /**
|
278 | * Whether to detach the previous screen from the view hierarchy to save memory.
|
279 | * Set it to `false` if you need the previous screen to be seen through the active screen.
|
280 | * Only applicable if `detachInactiveScreens` isn't set to `false`.
|
281 | * Defaults to `false` for the last screen for modals, otherwise `true`.
|
282 | */
|
283 | detachPreviousScreen?: boolean;
|
284 | /**
|
285 | * If `false`, the keyboard will NOT automatically dismiss when navigating to a new screen from this screen.
|
286 | * Defaults to `true`.
|
287 | */
|
288 | keyboardHandlingEnabled?: boolean;
|
289 | /**
|
290 | * Whether inactive screens should be suspended from re-rendering. Defaults to `false`.
|
291 | * Defaults to `true` when `enableFreeze()` is run at the top of the application.
|
292 | * Requires `react-native-screens` version >=3.16.0.
|
293 | *
|
294 | * Only supported on iOS and Android.
|
295 | */
|
296 | freezeOnBlur?: boolean;
|
297 | };
|
298 | export type StackNavigationConfig = {
|
299 | /**
|
300 | * Whether inactive screens should be detached from the view hierarchy to save memory.
|
301 | * This will have no effect if you disable `react-native-screens`.
|
302 | *
|
303 | * Defaults to `true`.
|
304 | */
|
305 | detachInactiveScreens?: boolean;
|
306 | };
|
307 | export type TransitionSpec = {
|
308 | animation: 'spring';
|
309 | config: Omit<Animated.SpringAnimationConfig, 'toValue' | keyof Animated.AnimationConfig>;
|
310 | } | {
|
311 | animation: 'timing';
|
312 | config: Omit<Animated.TimingAnimationConfig, 'toValue' | keyof Animated.AnimationConfig>;
|
313 | };
|
314 | export type StackCardInterpolationProps = {
|
315 | /**
|
316 | * Values for the current screen.
|
317 | */
|
318 | current: {
|
319 | /**
|
320 | * Animated node representing the progress value of the current screen.
|
321 | */
|
322 | progress: Animated.AnimatedInterpolation<number>;
|
323 | };
|
324 | /**
|
325 | * Values for the screen after this one in the stack.
|
326 | * This can be `undefined` in case the screen animating is the last one.
|
327 | */
|
328 | next?: {
|
329 | /**
|
330 | * Animated node representing the progress value of the next screen.
|
331 | */
|
332 | progress: Animated.AnimatedInterpolation<number>;
|
333 | };
|
334 | /**
|
335 | * The index of the card with this interpolation in the stack.
|
336 | */
|
337 | index: number;
|
338 | /**
|
339 | * Animated node representing whether the card is closing (1 - closing, 0 - not closing).
|
340 | */
|
341 | closing: Animated.AnimatedInterpolation<0 | 1>;
|
342 | /**
|
343 | * Animated node representing whether the card is being swiped (1 - swiping, 0 - not swiping).
|
344 | */
|
345 | swiping: Animated.AnimatedInterpolation<0 | 1>;
|
346 | /**
|
347 | * Animated node representing multiplier when direction is inverted (-1 - inverted, 1 - normal).
|
348 | */
|
349 | inverted: Animated.AnimatedInterpolation<-1 | 1>;
|
350 | /**
|
351 | * Layout measurements for various items we use for animation.
|
352 | */
|
353 | layouts: {
|
354 | /**
|
355 | * Layout of the whole screen.
|
356 | */
|
357 | screen: Layout;
|
358 | };
|
359 | /**
|
360 | * Safe area insets
|
361 | */
|
362 | insets: {
|
363 | top: number;
|
364 | right: number;
|
365 | bottom: number;
|
366 | left: number;
|
367 | };
|
368 | };
|
369 | export type StackCardInterpolatedStyle = {
|
370 | /**
|
371 | * Interpolated style for the container view wrapping the card.
|
372 | */
|
373 | containerStyle?: any;
|
374 | /**
|
375 | * Interpolated style for the view representing the card.
|
376 | */
|
377 | cardStyle?: any;
|
378 | /**
|
379 | * Interpolated style for the view representing the semi-transparent overlay below the card.
|
380 | */
|
381 | overlayStyle?: any;
|
382 | /**
|
383 | * Interpolated style representing the card shadow.
|
384 | */
|
385 | shadowStyle?: any;
|
386 | };
|
387 | export type StackCardStyleInterpolator = (props: StackCardInterpolationProps) => StackCardInterpolatedStyle;
|
388 | export type StackHeaderInterpolationProps = {
|
389 | /**
|
390 | * Values for the current screen (the screen which owns this header).
|
391 | */
|
392 | current: {
|
393 | /**
|
394 | * Animated node representing the progress value of the current screen.
|
395 | */
|
396 | progress: Animated.AnimatedInterpolation<number>;
|
397 | };
|
398 | /**
|
399 | * Values for the screen after this one in the stack.
|
400 | * This can be `undefined` in case the screen animating is the last one.
|
401 | */
|
402 | next?: {
|
403 | /**
|
404 | * Animated node representing the progress value of the next screen.
|
405 | */
|
406 | progress: Animated.AnimatedInterpolation<number>;
|
407 | };
|
408 | /**
|
409 | * Layout measurements for various items we use for animation.
|
410 | */
|
411 | layouts: {
|
412 | /**
|
413 | * Layout of the header
|
414 | */
|
415 | header: Layout;
|
416 | /**
|
417 | * Layout of the whole screen.
|
418 | */
|
419 | screen: Layout;
|
420 | /**
|
421 | * Layout of the title element.
|
422 | */
|
423 | title?: Layout;
|
424 | /**
|
425 | * Layout of the back button label.
|
426 | */
|
427 | leftLabel?: Layout;
|
428 | };
|
429 | };
|
430 | export type StackHeaderInterpolatedStyle = {
|
431 | /**
|
432 | * Interpolated style for the label of the left button (back button label).
|
433 | */
|
434 | leftLabelStyle?: any;
|
435 | /**
|
436 | * Interpolated style for the left button (usually the back button).
|
437 | */
|
438 | leftButtonStyle?: any;
|
439 | /**
|
440 | * Interpolated style for the right button.
|
441 | */
|
442 | rightButtonStyle?: any;
|
443 | /**
|
444 | * Interpolated style for the header title text.
|
445 | */
|
446 | titleStyle?: any;
|
447 | /**
|
448 | * Interpolated style for the header background.
|
449 | */
|
450 | backgroundStyle?: any;
|
451 | };
|
452 | export type StackHeaderStyleInterpolator = (props: StackHeaderInterpolationProps) => StackHeaderInterpolatedStyle;
|
453 | export type TransitionPreset = {
|
454 | /**
|
455 | * The direction of swipe gestures, `horizontal` or `vertical`.
|
456 | */
|
457 | gestureDirection: GestureDirection;
|
458 | /**
|
459 | * Object which specifies the animation type (timing or spring) and their options (such as duration for timing).
|
460 | */
|
461 | transitionSpec: {
|
462 | /**
|
463 | * Transition configuration when adding a screen.
|
464 | */
|
465 | open: TransitionSpec;
|
466 | /**
|
467 | * Transition configuration when removing a screen.
|
468 | */
|
469 | close: TransitionSpec;
|
470 | };
|
471 | /**
|
472 | * Function which specifies interpolated styles for various parts of the card, e.g. the overlay, shadow etc.
|
473 | */
|
474 | cardStyleInterpolator: StackCardStyleInterpolator;
|
475 | /**
|
476 | * Function which specifies interpolated styles for various parts of the header, e.g. the title, left button etc.
|
477 | */
|
478 | headerStyleInterpolator: StackHeaderStyleInterpolator;
|
479 | };
|
480 | export {};
|
481 | //# sourceMappingURL=types.d.ts.map |
\ | No newline at end of file |