0
# Types and Interfaces
1
2
Comprehensive TypeScript definitions for all components, props, and configuration options in react-native-screens. These types provide full type safety and IntelliSense support for all public APIs.
3
4
## Core Imports
5
6
```typescript
7
import type {
8
ScreenProps,
9
ScreenContainerProps,
10
ScreenStackProps,
11
ScreenStackHeaderConfigProps,
12
SearchBarProps,
13
SearchBarCommands,
14
StackPresentationTypes,
15
StackAnimationTypes,
16
BlurEffectTypes,
17
ScreenOrientationTypes,
18
SearchBarPlacement,
19
BackButtonDisplayMode,
20
BottomTabsProps,
21
BottomTabsScreenProps,
22
SplitViewHostProps,
23
SplitViewScreenProps,
24
SplitViewDisplayMode,
25
HeaderHeightChangeEventType,
26
TransitionProgressEventType,
27
GestureResponseDistanceType,
28
GoBackGesture,
29
AnimatedScreenTransition,
30
GestureProps
31
} from "react-native-screens";
32
```
33
34
## Screen Component Types
35
36
### ScreenProps
37
38
Comprehensive props interface for the Screen component with extensive configuration options for presentation, animation, and platform-specific behavior.
39
40
```typescript { .api }
41
interface ScreenProps extends ViewProps {
42
/** Screen active state (0 = inactive, 1 = active, or animated value) */
43
active?: 0 | 1 | Animated.AnimatedInterpolation<number>;
44
45
/** How the screen should be presented in the stack */
46
stackPresentation?: StackPresentationTypes;
47
48
/** Transition animation type */
49
stackAnimation?: StackAnimationTypes;
50
51
/** Whether dismiss gestures are enabled */
52
gestureEnabled?: boolean;
53
54
/** Custom gesture response distances */
55
gestureResponseDistance?: GestureResponseDistanceType;
56
57
/** Full screen swipe area */
58
fullScreenSwipeEnabled?: boolean;
59
60
/** Whether swipe-to-dismiss is enabled */
61
swipeDirection?: 'horizontal' | 'vertical';
62
63
/** Whether screen prevents auto-dismiss */
64
preventNativeDismiss?: boolean;
65
66
/** Native back button dismissal (iOS) */
67
nativeBackButtonDismissalEnabled?: boolean;
68
69
/** Status bar style for this screen */
70
statusBarStyle?: 'inverted' | 'auto' | 'light' | 'dark';
71
72
/** Whether the status bar is hidden */
73
statusBarHidden?: boolean;
74
75
/** Status bar animation when hidden/shown */
76
statusBarAnimation?: 'none' | 'fade' | 'slide';
77
78
/** Status bar background color (Android) */
79
statusBarBackgroundColor?: ColorValue;
80
81
/** Status bar translucent (Android) */
82
statusBarTranslucent?: boolean;
83
84
/** Screen orientation preferences */
85
screenOrientation?: ScreenOrientationTypes;
86
87
/** Navigation bar color (Android) */
88
navigationBarColor?: ColorValue;
89
90
/** Whether navigation bar is hidden (Android) */
91
navigationBarHidden?: boolean;
92
93
/** Navigation bar style (Android) */
94
navigationBarStyle?: 'light' | 'dark';
95
96
/** Navigation bar translucent (Android) */
97
navigationBarTranslucent?: boolean;
98
99
/** Sheet presentation detents (iOS) */
100
sheetAllowedDetents?: (number | 'medium' | 'large' | 'all')[] | number[];
101
102
/** Sheet corner radius (iOS) */
103
sheetCornerRadius?: number;
104
105
/** Whether sheet grabs are visible (iOS) */
106
sheetGrabberVisible?: boolean;
107
108
/** Sheet largest undimmed detent identifier (iOS) */
109
sheetLargestUndimmedDetentIdentifier?: number | 'medium' | 'large';
110
111
/** Whether sheet expands on scroll (iOS) */
112
sheetExpandsWhenScrolledToEdge?: boolean;
113
114
/** Auto keyboard dismiss mode */
115
autoKeyboardInsets?: boolean;
116
117
/** Keyboard handling mode */
118
keyboardHandlingEnabled?: boolean;
119
120
/** Home indicator auto-hidden (iOS) */
121
homeIndicatorHidden?: boolean;
122
123
/** Freeze on prevent remove */
124
freezeOnPreventRemove?: boolean;
125
126
/** Activity state */
127
activityState?: 0 | 1 | 2;
128
129
/** Callback when screen appears */
130
onAppear?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
131
132
/** Callback when screen disappears */
133
onDisappear?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
134
135
/** Callback when screen will appear */
136
onWillAppear?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
137
138
/** Callback when screen will disappear */
139
onWillDisappear?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
140
141
/** Callback when dismiss gesture starts */
142
onDismissed?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
143
144
/** Callback for header height changes */
145
onHeaderHeightChange?: (event: NativeSyntheticEvent<HeaderHeightChangeEventType>) => void;
146
147
/** Callback for transition progress updates */
148
onTransitionProgress?: (event: NativeSyntheticEvent<TransitionProgressEventType>) => void;
149
150
/** Callback when gesture cancellation occurs */
151
onGestureCanceled?: (event: NativeSyntheticEvent<TargetedEvent>) => void;
152
}
153
```
154
155
### ScreenContainerProps
156
157
Props interface for the ScreenContainer component that manages multiple screen instances.
158
159
```typescript { .api }
160
interface ScreenContainerProps extends ViewProps {
161
/** Whether to use screens functionality */
162
enabled?: boolean;
163
164
/** Optimization for single-screen navigators */
165
hasTwoStates?: boolean;
166
167
/** Screen container style */
168
style?: StyleProp<ViewStyle>;
169
}
170
```
171
172
### ScreenStackProps
173
174
Props interface for the ScreenStack component with gesture handling capabilities.
175
176
```typescript { .api }
177
interface ScreenStackProps extends ViewProps, GestureProps {
178
/** Child screen components */
179
children?: React.ReactNode;
180
}
181
```
182
183
## Header Configuration Types
184
185
### ScreenStackHeaderConfigProps
186
187
Comprehensive props interface for configuring native navigation headers with extensive customization options.
188
189
```typescript { .api }
190
interface ScreenStackHeaderConfigProps {
191
/** Header title text */
192
title?: string;
193
194
/** Title font family */
195
titleFontFamily?: string;
196
197
/** Title font size */
198
titleFontSize?: number;
199
200
/** Title font weight */
201
titleFontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
202
203
/** Title color */
204
titleColor?: ColorValue;
205
206
/** Whether header is hidden */
207
hidden?: boolean;
208
209
/** Header background color */
210
backgroundColor?: ColorValue;
211
212
/** Header blur effect (iOS) */
213
blurEffect?: BlurEffectTypes;
214
215
/** Large title display (iOS) */
216
largeTitle?: boolean;
217
218
/** Large title font family (iOS) */
219
largeTitleFontFamily?: string;
220
221
/** Large title font size (iOS) */
222
largeTitleFontSize?: number;
223
224
/** Large title font weight (iOS) */
225
largeTitleFontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
226
227
/** Large title color (iOS) */
228
largeTitleColor?: ColorValue;
229
230
/** Large title background color (iOS) */
231
largeTitleBackgroundColor?: ColorValue;
232
233
/** Large title hide shadow (iOS) */
234
largeTitleHideShadow?: boolean;
235
236
/** Back button title (iOS) */
237
backTitle?: string;
238
239
/** Back button font family (iOS) */
240
backTitleFontFamily?: string;
241
242
/** Back button font size (iOS) */
243
backTitleFontSize?: number;
244
245
/** Back button display mode (iOS) */
246
backButtonDisplayMode?: BackButtonDisplayMode;
247
248
/** Back button tint color */
249
backButtonColor?: ColorValue;
250
251
/** Whether back button is hidden */
252
hideBackButton?: boolean;
253
254
/** Whether shadow is hidden */
255
hideShadow?: boolean;
256
257
/** Translucent header appearance */
258
translucent?: boolean;
259
260
/** Direction for RTL support */
261
direction?: 'rtl' | 'ltr';
262
263
/** Color for header items */
264
color?: ColorValue;
265
266
/** Disable back button menu (iOS) */
267
disableBackButtonMenu?: boolean;
268
269
/** Top inset enabled */
270
topInsetEnabled?: boolean;
271
272
/** Callback when back button is pressed */
273
onBackButtonPress?: () => void;
274
275
/** Children components (header subviews) */
276
children?: React.ReactNode;
277
}
278
```
279
280
### SearchBarProps
281
282
Props interface for the SearchBar component with platform-specific search functionality.
283
284
```typescript { .api }
285
interface SearchBarProps {
286
/** Placeholder text */
287
placeholder?: string;
288
289
/** Search bar placement */
290
placement?: SearchBarPlacement;
291
292
/** Whether search bar is obscured during presentation */
293
obscureBackground?: boolean;
294
295
/** Whether search bar hides navigation bar during search */
296
hideNavigationBar?: boolean;
297
298
/** Whether search bar hides when scrolling */
299
hideWhenScrolling?: boolean;
300
301
/** Auto-capitalize behavior */
302
autoCapitalize?: 'none' | 'words' | 'sentences' | 'characters';
303
304
/** Auto-focus behavior */
305
autoFocus?: boolean;
306
307
/** Input type */
308
inputType?: 'text' | 'phone' | 'number' | 'email';
309
310
/** Right button displayed in search bar (iOS) */
311
rightButtonDisplayMode?: 'never' | 'whileEditing' | 'unlessEditing' | 'always';
312
313
/** Callback when text changes */
314
onChangeText?: (text: string) => void;
315
316
/** Callback when search button is pressed */
317
onSearchButtonPress?: (event: NativeSyntheticEvent<{ text: string }>) => void;
318
319
/** Callback when cancel button is pressed */
320
onCancelButtonPress?: (event: NativeSyntheticEvent<{}>) => void;
321
322
/** Callback when search bar gains focus */
323
onFocus?: (event: NativeSyntheticEvent<{}>) => void;
324
325
/** Callback when search bar loses focus */
326
onBlur?: (event: NativeSyntheticEvent<{}>) => void;
327
328
/** Text color */
329
textColor?: ColorValue;
330
331
/** Tint color */
332
tintColor?: ColorValue;
333
334
/** Bar tint color (iOS) */
335
barTintColor?: ColorValue;
336
337
/** Search bar style (iOS) */
338
searchBarStyle?: 'default' | 'prominent' | 'minimal';
339
340
/** Cursor color */
341
cursorColor?: ColorValue;
342
}
343
```
344
345
### SearchBarCommands
346
347
Imperative commands interface for SearchBar component refs.
348
349
```typescript { .api }
350
interface SearchBarCommands {
351
/** Focus the search bar */
352
focus(): void;
353
354
/** Blur the search bar */
355
blur(): void;
356
357
/** Clear search text */
358
clearText(): void;
359
360
/** Set search text programmatically */
361
setText(text: string): void;
362
363
/** Toggle cancel button visibility */
364
toggleCancelButton(show: boolean): void;
365
366
/** Cancel current search */
367
cancelSearch(): void;
368
}
369
```
370
371
## Enumeration Types
372
373
### StackPresentationTypes
374
375
Enumeration of presentation styles for screen stacks.
376
377
```typescript { .api }
378
type StackPresentationTypes =
379
| 'push' // Standard push navigation
380
| 'modal' // Modal presentation
381
| 'transparentModal' // Transparent modal
382
| 'containedModal' // Contained modal (iOS 13+)
383
| 'containedTransparentModal' // Contained transparent modal (iOS 13+)
384
| 'fullScreenModal' // Full screen modal
385
| 'formSheet' // Form sheet (iOS 13+)
386
| 'pageSheet'; // Page sheet (iOS 15+)
387
```
388
389
### StackAnimationTypes
390
391
Enumeration of transition animation types for screen stacks.
392
393
```typescript { .api }
394
type StackAnimationTypes =
395
| 'default' // Platform default animation
396
| 'fade' // Fade in/out
397
| 'fade_from_bottom' // Fade from bottom
398
| 'flip' // Flip animation (iOS only)
399
| 'none' // No animation
400
| 'simple_push' // Simple push without shadow
401
| 'slide_from_bottom' // Slide from bottom
402
| 'slide_from_right' // Slide from right
403
| 'slide_from_left' // Slide from left
404
| 'ios_from_right' // iOS-style from right
405
| 'ios_from_left'; // iOS-style from left
406
```
407
408
### BlurEffectTypes
409
410
Enumeration of blur effects available for iOS headers.
411
412
```typescript { .api }
413
type BlurEffectTypes =
414
| 'none'
415
| 'extraLight'
416
| 'light'
417
| 'dark'
418
| 'regular'
419
| 'prominent'
420
| 'systemUltraThinMaterial'
421
| 'systemThinMaterial'
422
| 'systemMaterial'
423
| 'systemThickMaterial'
424
| 'systemChromeMaterial'
425
| 'systemUltraThinMaterialLight'
426
| 'systemThinMaterialLight'
427
| 'systemMaterialLight'
428
| 'systemThickMaterialLight'
429
| 'systemChromeMaterialLight'
430
| 'systemUltraThinMaterialDark'
431
| 'systemThinMaterialDark'
432
| 'systemMaterialDark'
433
| 'systemThickMaterialDark'
434
| 'systemChromeMaterialDark';
435
```
436
437
### ScreenOrientationTypes
438
439
Enumeration of screen orientation preferences.
440
441
```typescript { .api }
442
type ScreenOrientationTypes =
443
| 'default' // Use app default
444
| 'all' // All orientations
445
| 'portrait' // Portrait orientations
446
| 'portrait_up' // Portrait up only
447
| 'portrait_down' // Portrait down only
448
| 'landscape' // Landscape orientations
449
| 'landscape_left' // Landscape left
450
| 'landscape_right'; // Landscape right
451
```
452
453
### SearchBarPlacement
454
455
Enumeration of search bar placement options.
456
457
```typescript { .api }
458
type SearchBarPlacement =
459
| 'automatic' // System determines placement
460
| 'inline' // Inline with navigation bar
461
| 'stacked' // Below navigation bar
462
| 'integrated' // Integrated into title area (iOS 16.0+)
463
| 'integratedButton' // Integrated as button (iOS 16.0+)
464
| 'integratedCentered'; // Integrated and centered (iOS 16.0+)
465
```
466
467
### BackButtonDisplayMode
468
469
Enumeration of back button display modes.
470
471
```typescript { .api }
472
type BackButtonDisplayMode =
473
| 'default' // Show back title if available
474
| 'generic' // Show generic back button
475
| 'minimal'; // Show minimal back button
476
```
477
478
## Experimental Feature Types
479
480
### BottomTabsProps
481
482
Props interface for the experimental BottomTabs component.
483
484
```typescript { .api }
485
interface BottomTabsProps {
486
/** Currently selected tab index */
487
selectedTab?: number;
488
489
/** Callback when tab selection changes */
490
onTabChange?: (event: NativeSyntheticEvent<NativeFocusChangeEvent>) => void;
491
492
/** Whether tabs should be scrollable (Android) */
493
scrollable?: boolean;
494
495
/** Tab bar background color */
496
barTintColor?: ColorValue;
497
498
/** Selected tab tint color */
499
selectedItemColor?: ColorValue;
500
501
/** Unselected tab tint color */
502
unselectedItemColor?: ColorValue;
503
504
/** Tab bar style (iOS) */
505
barStyle?: 'default' | 'black';
506
507
/** Whether tab bar is translucent (iOS) */
508
translucent?: boolean;
509
510
/** Tab bar appearance (iOS) */
511
appearance?: 'default' | 'opaque';
512
513
/** Content inset adjustment behavior (iOS) */
514
contentInsetAdjustmentBehavior?: 'automatic' | 'scrollableAxes' | 'never' | 'always';
515
516
/** Children tab screen components */
517
children?: React.ReactNode;
518
}
519
```
520
521
### BottomTabsScreenProps
522
523
Props interface for individual bottom tab screens.
524
525
```typescript { .api }
526
interface BottomTabsScreenProps {
527
/** Tab title */
528
title?: string;
529
530
/** Tab bar icon name or component */
531
tabBarIcon?: string | React.ComponentType<any>;
532
533
/** Badge text to display on tab */
534
badge?: string;
535
536
/** Badge background color */
537
badgeColor?: ColorValue;
538
539
/** Whether tab is enabled */
540
enabled?: boolean;
541
542
/** Tab tint color when selected */
543
activeTintColor?: ColorValue;
544
545
/** Tab tint color when unselected */
546
inactiveTintColor?: ColorValue;
547
548
/** Tab background color */
549
backgroundColor?: ColorValue;
550
551
/** Whether tab should show title */
552
showTitle?: boolean;
553
554
/** Custom tab bar component */
555
tabBarComponent?: React.ComponentType<any>;
556
557
/** Tab press callback */
558
onTabPress?: () => void;
559
560
/** Tab long press callback */
561
onTabLongPress?: () => void;
562
563
/** Tab screen content */
564
children?: React.ReactNode;
565
}
566
```
567
568
### SplitViewHostProps
569
570
Props interface for the SplitViewHost component.
571
572
```typescript { .api }
573
interface SplitViewHostProps extends ViewProps {
574
/** Split view display mode */
575
displayMode?: SplitViewDisplayMode;
576
577
/** Primary column width */
578
primaryColumnWidth?: number;
579
580
/** Secondary column width */
581
secondaryColumnWidth?: number;
582
583
/** Minimum primary column width */
584
minimumPrimaryColumnWidth?: number;
585
586
/** Maximum primary column width */
587
maximumPrimaryColumnWidth?: number;
588
589
/** Preferred display mode */
590
preferredDisplayMode?: SplitViewDisplayMode;
591
592
/** Whether primary column is shown */
593
showsPrimaryColumn?: boolean;
594
595
/** Whether secondary column is shown */
596
showsSecondaryColumn?: boolean;
597
598
/** Callback when display mode changes */
599
onDisplayModeChange?: (event: NativeSyntheticEvent<{ displayMode: SplitViewDisplayMode }>) => void;
600
601
/** Callback when column visibility changes */
602
onColumnVisibilityChange?: (event: NativeSyntheticEvent<{
603
primaryVisible: boolean;
604
secondaryVisible: boolean;
605
}>) => void;
606
607
/** Children split view screens */
608
children?: React.ReactNode;
609
}
610
```
611
612
### SplitViewScreenProps
613
614
Props interface for individual split view screens.
615
616
```typescript { .api }
617
interface SplitViewScreenProps extends ViewProps {
618
/** Which column this screen represents */
619
column: 'primary' | 'secondary';
620
621
/** Whether this column is currently visible */
622
visible?: boolean;
623
624
/** Column background color */
625
backgroundColor?: ColorValue;
626
627
/** Column border configuration */
628
borderColor?: ColorValue;
629
borderWidth?: number;
630
631
/** Callback when column becomes visible */
632
onAppear?: () => void;
633
634
/** Callback when column becomes hidden */
635
onDisappear?: () => void;
636
637
/** Column content */
638
children?: React.ReactNode;
639
}
640
```
641
642
### SplitViewDisplayMode
643
644
Enumeration of split view display modes.
645
646
```typescript { .api }
647
type SplitViewDisplayMode =
648
| 'automatic' // System determines layout
649
| 'secondaryOnly' // Show only secondary column
650
| 'oneBesideSecondary' // Primary beside secondary
651
| 'oneOverSecondary' // Primary over secondary
652
| 'twoBesideSecondary' // Two columns beside secondary
653
| 'twoOverSecondary' // Two columns over secondary
654
| 'twoDisplaceSecondary'; // Two columns displacing secondary
655
```
656
657
## Event and Gesture Types
658
659
### Event Types
660
661
Event interfaces for screen lifecycle and interaction callbacks.
662
663
```typescript { .api }
664
interface HeaderHeightChangeEventType {
665
/** Current header height in points */
666
headerHeight: number;
667
}
668
669
interface TransitionProgressEventType {
670
/** Transition progress from 0 to 1 */
671
progress: number;
672
673
/** Whether screen is being closed (0 or 1) */
674
closing: number;
675
676
/** Whether navigation is going forward (0 or 1) */
677
goingForward: number;
678
}
679
680
interface NativeFocusChangeEvent {
681
/** Index of the newly focused tab */
682
focusedTab: number;
683
684
/** Index of the previously focused tab */
685
previouslyFocusedTab: number;
686
}
687
```
688
689
### Gesture Types
690
691
Types for gesture handling and configuration.
692
693
```typescript { .api }
694
interface GestureResponseDistanceType {
695
/** Distance from start edge */
696
start?: number;
697
698
/** Distance from end edge */
699
end?: number;
700
701
/** Distance from top edge */
702
top?: number;
703
704
/** Distance from bottom edge */
705
bottom?: number;
706
}
707
708
type GoBackGesture =
709
| 'swipeRight'
710
| 'swipeLeft'
711
| 'swipeUp'
712
| 'swipeDown'
713
| 'verticalSwipe'
714
| 'horizontalSwipe'
715
| 'twoDimensionalSwipe';
716
717
interface GestureProps {
718
/** Go back gesture types */
719
goBackGesture?: GoBackGesture;
720
721
/** Custom animated screen transitions */
722
customAnimationOnSwipe?: boolean;
723
724
/** Full screen swipe enabled */
725
fullScreenSwipeEnabled?: boolean;
726
727
/** Animated screen transition configuration */
728
screenTransition?: AnimatedScreenTransition;
729
}
730
731
interface AnimatedScreenTransition {
732
/** Top screen frame during transition */
733
topScreenFrame?: {
734
x: number;
735
y: number;
736
width: number;
737
height: number;
738
};
739
740
/** Below top screen frame during transition */
741
belowTopScreenFrame?: {
742
x: number;
743
y: number;
744
width: number;
745
height: number;
746
};
747
}
748
```
749
750
## Configuration Types
751
752
### Compatibility and Feature Flags
753
754
Types for configuration objects that control library behavior.
755
756
```typescript { .api }
757
interface CompatibilityFlags {
758
/** Indicates new back title implementation (v3.21+) */
759
isNewBackTitleImplementation: boolean;
760
761
/** Indicates new header implementation (v4.0+) */
762
usesHeaderFlexboxImplementation: boolean;
763
}
764
765
interface FeatureFlags {
766
/** Experimental feature flags */
767
experiment: {
768
/** Experimental bottom tabs control */
769
controlledBottomTabs: boolean;
770
};
771
772
/** Stable configuration flags (currently empty) */
773
stable: {};
774
}
775
```
776
777
## Utility Types
778
779
### Generic Utility Types
780
781
Helper types used throughout the library.
782
783
```typescript { .api }
784
type ColorValue = string | number;
785
786
type StyleProp<T> = T | null | undefined | false | Array<StyleProp<T>>;
787
788
interface ViewProps {
789
style?: StyleProp<ViewStyle>;
790
children?: React.ReactNode;
791
testID?: string;
792
accessible?: boolean;
793
accessibilityLabel?: string;
794
accessibilityHint?: string;
795
accessibilityRole?: string;
796
}
797
798
interface ViewStyle {
799
flex?: number;
800
flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
801
justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
802
alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
803
backgroundColor?: ColorValue;
804
width?: number | string;
805
height?: number | string;
806
margin?: number;
807
padding?: number;
808
position?: 'absolute' | 'relative';
809
top?: number | string;
810
left?: number | string;
811
right?: number | string;
812
bottom?: number | string;
813
zIndex?: number;
814
opacity?: number;
815
transform?: Array<{
816
perspective?: number;
817
rotate?: string;
818
rotateX?: string;
819
rotateY?: string;
820
rotateZ?: string;
821
scale?: number;
822
scaleX?: number;
823
scaleY?: number;
824
translateX?: number;
825
translateY?: number;
826
skewX?: string;
827
skewY?: string;
828
}>;
829
}
830
```
831
832
### Type Guards and Utilities
833
834
Helper functions for working with types at runtime.
835
836
```typescript { .api }
837
// Type guard for checking if a value is a valid stack presentation
838
function isStackPresentationType(value: any): value is StackPresentationTypes {
839
return typeof value === 'string' && [
840
'push', 'modal', 'transparentModal', 'containedModal',
841
'containedTransparentModal', 'fullScreenModal', 'formSheet', 'pageSheet'
842
].includes(value);
843
}
844
845
// Type guard for checking if a value is a valid stack animation
846
function isStackAnimationType(value: any): value is StackAnimationTypes {
847
return typeof value === 'string' && [
848
'default', 'fade', 'fade_from_bottom', 'flip', 'none',
849
'simple_push', 'slide_from_bottom', 'slide_from_right',
850
'slide_from_left', 'ios_from_right', 'ios_from_left'
851
].includes(value);
852
}
853
854
// Type guard for checking screen orientation
855
function isScreenOrientationType(value: any): value is ScreenOrientationTypes {
856
return typeof value === 'string' && [
857
'default', 'all', 'portrait', 'portrait_up', 'portrait_down',
858
'landscape', 'landscape_left', 'landscape_right'
859
].includes(value);
860
}
861
```
862
863
## Platform-Specific Types
864
865
### iOS Specific Types
866
867
Types that apply only to iOS platform features.
868
869
```typescript { .api }
870
// iOS specific sheet detent values
871
type iOSSheetDetentIdentifier = 'medium' | 'large' | number;
872
873
// iOS specific blur effects (subset for common usage)
874
type iOSBlurEffect =
875
| 'extraLight'
876
| 'light'
877
| 'dark'
878
| 'systemMaterial'
879
| 'systemMaterialLight'
880
| 'systemMaterialDark';
881
882
// iOS specific search bar styles
883
type iOSSearchBarStyle = 'default' | 'prominent' | 'minimal';
884
```
885
886
### Android Specific Types
887
888
Types that apply only to Android platform features.
889
890
```typescript { .api }
891
// Android specific navigation bar styles
892
type AndroidNavigationBarStyle = 'light' | 'dark';
893
894
// Android specific status bar styles
895
type AndroidStatusBarStyle = 'default' | 'light-content' | 'dark-content';
896
```
897
898
## Deprecated Types
899
900
Types that are deprecated but still supported for backward compatibility.
901
902
```typescript { .api }
903
/** @deprecated Use StackPresentationTypes instead */
904
type StackPresentationType = StackPresentationTypes;
905
906
/** @deprecated Use StackAnimationTypes instead */
907
type StackAnimationType = StackAnimationTypes;
908
909
/** @deprecated Use SearchBarPlacement instead */
910
type SearchBarPlacementTypes = SearchBarPlacement;
911
912
/** @deprecated Legacy sheet detent values, use numeric arrays instead */
913
type LegacySheetDetent = 'medium' | 'large' | 'all';
914
```