ferns-ui 0.36.4 → 0.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/dist/Banner.d.ts +6 -16
  2. package/dist/Banner.js +52 -43
  3. package/dist/Banner.js.map +1 -1
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.js +1 -0
  6. package/dist/index.js.map +1 -1
  7. package/dist/useStoredState.d.ts +1 -0
  8. package/dist/useStoredState.js +33 -0
  9. package/dist/useStoredState.js.map +1 -0
  10. package/package.json +55 -56
  11. package/src/ActionSheet.tsx +1231 -0
  12. package/src/Avatar.tsx +317 -0
  13. package/src/Badge.tsx +65 -0
  14. package/src/Banner.tsx +149 -0
  15. package/src/BlurBox.native.tsx +40 -0
  16. package/src/BlurBox.tsx +31 -0
  17. package/src/Body.tsx +32 -0
  18. package/src/Box.tsx +308 -0
  19. package/src/Button.tsx +219 -0
  20. package/src/Card.tsx +23 -0
  21. package/src/CheckBox.tsx +118 -0
  22. package/src/Common.ts +2743 -0
  23. package/src/Constants.ts +53 -0
  24. package/src/CustomSelect.tsx +85 -0
  25. package/src/DateTimeActionSheet.tsx +409 -0
  26. package/src/DateTimeField.android.tsx +101 -0
  27. package/src/DateTimeField.ios.tsx +83 -0
  28. package/src/DateTimeField.tsx +69 -0
  29. package/src/DecimalRangeActionSheet.tsx +113 -0
  30. package/src/ErrorBoundary.tsx +37 -0
  31. package/src/ErrorPage.tsx +44 -0
  32. package/src/FernsProvider.tsx +21 -0
  33. package/src/Field.tsx +299 -0
  34. package/src/FieldWithLabels.tsx +36 -0
  35. package/src/FlatList.tsx +2 -0
  36. package/src/Form.tsx +182 -0
  37. package/src/HeaderButtons.tsx +107 -0
  38. package/src/Heading.tsx +53 -0
  39. package/src/HeightActionSheet.tsx +104 -0
  40. package/src/Hyperlink.tsx +181 -0
  41. package/src/Icon.tsx +24 -0
  42. package/src/IconButton.tsx +165 -0
  43. package/src/Image.tsx +50 -0
  44. package/src/ImageBackground.tsx +14 -0
  45. package/src/InfoTooltipButton.tsx +23 -0
  46. package/src/Layer.tsx +17 -0
  47. package/src/Link.tsx +17 -0
  48. package/src/Mask.tsx +21 -0
  49. package/src/MediaQuery.ts +46 -0
  50. package/src/Meta.tsx +9 -0
  51. package/src/Modal.tsx +248 -0
  52. package/src/ModalSheet.tsx +58 -0
  53. package/src/NumberPickerActionSheet.tsx +66 -0
  54. package/src/Page.tsx +133 -0
  55. package/src/Permissions.ts +44 -0
  56. package/src/PickerSelect.tsx +553 -0
  57. package/src/Pill.tsx +24 -0
  58. package/src/Pog.tsx +87 -0
  59. package/src/ProgressBar.tsx +55 -0
  60. package/src/ScrollView.tsx +2 -0
  61. package/src/SegmentedControl.tsx +102 -0
  62. package/src/SelectList.tsx +89 -0
  63. package/src/SideDrawer.tsx +62 -0
  64. package/src/Spinner.tsx +20 -0
  65. package/src/SplitPage.native.tsx +160 -0
  66. package/src/SplitPage.tsx +302 -0
  67. package/src/Switch.tsx +19 -0
  68. package/src/Table.tsx +87 -0
  69. package/src/TableHeader.tsx +36 -0
  70. package/src/TableHeaderCell.tsx +76 -0
  71. package/src/TableRow.tsx +87 -0
  72. package/src/TapToEdit.tsx +221 -0
  73. package/src/Text.tsx +131 -0
  74. package/src/TextArea.tsx +16 -0
  75. package/src/TextField.tsx +401 -0
  76. package/src/TextFieldNumberActionSheet.tsx +61 -0
  77. package/src/Toast.tsx +106 -0
  78. package/src/Tooltip.tsx +269 -0
  79. package/src/UnifiedScreens.ts +24 -0
  80. package/src/Unifier.ts +371 -0
  81. package/src/Utilities.tsx +159 -0
  82. package/src/WithLabel.tsx +57 -0
  83. package/src/dayjsExtended.ts +10 -0
  84. package/src/index.tsx +1347 -0
  85. package/src/polyfill.d.ts +11 -0
  86. package/src/tableContext.tsx +80 -0
  87. package/src/useStoredState.ts +39 -0
package/src/index.tsx ADDED
@@ -0,0 +1,1347 @@
1
+ export * from "./Constants";
2
+ export * from "./Common";
3
+ export * from "./MediaQuery";
4
+ export * from "./ActionSheet";
5
+ export * from "./Avatar";
6
+ export * from "./Badge";
7
+ export * from "./Banner";
8
+ export * from "./BlurBox";
9
+ export * from "./Body";
10
+ export * from "./Box";
11
+ export * from "./Button";
12
+ export * from "./Card";
13
+ export * from "./CheckBox";
14
+ export * from "./DateTimeActionSheet";
15
+ export * from "./ErrorBoundary";
16
+ export * from "./ErrorPage";
17
+ export * from "./FernsProvider";
18
+ export * from "./FlatList";
19
+ export * from "./Field";
20
+ export * from "./Form";
21
+ export * from "./HeaderButtons";
22
+ export * from "./Heading";
23
+ export * from "./Icon";
24
+ export * from "./IconButton";
25
+ export * from "./Image";
26
+ export * from "./ImageBackground";
27
+ export * from "./InfoTooltipButton";
28
+ // export * from "./Layout";
29
+ // export * from "./Drawer";
30
+ export * from "./Link";
31
+ export * from "./Mask";
32
+ export * from "./Meta";
33
+ export * from "./Modal";
34
+
35
+ export * from "./Page";
36
+ export * from "./Pill";
37
+ export * from "./ScrollView";
38
+ export * from "./SegmentedControl";
39
+ export * from "./SelectList";
40
+ export * from "./SplitPage";
41
+ export * from "./Spinner";
42
+ export * from "./Switch";
43
+ export * from "./TapToEdit";
44
+ export * from "./Text";
45
+ export * from "./TextArea";
46
+ export * from "./TextField";
47
+ export * from "./Tooltip";
48
+ export * from "./Toast";
49
+ export * from "./UnifiedScreens";
50
+ export * from "./Unifier";
51
+ export * from "./WithLabel";
52
+ export * from "./DecimalRangeActionSheet";
53
+ export * from "./HeightActionSheet";
54
+ export * from "./NumberPickerActionSheet";
55
+ // export * from "./Chart";
56
+ export * from "./ModalSheet";
57
+ export * from "./ProgressBar";
58
+ export * from "./DateTimeField";
59
+ export * from "./SideDrawer";
60
+ export * from "./Table";
61
+ export * from "./TableHeader";
62
+ export * from "./TableHeaderCell";
63
+ export * from "./TableRow";
64
+ export * from "./useStoredState";
65
+
66
+ // Lifted from react-native
67
+ type ImageRequireSource = number;
68
+ interface Insets {
69
+ top?: number;
70
+ left?: number;
71
+ bottom?: number;
72
+ right?: number;
73
+ }
74
+
75
+ // Lifted from react-native-navigation
76
+ // import {Options} from "./Options";
77
+ export interface LayoutComponent<P = {}> {
78
+ /**
79
+ * Component reference id, Auto generated if empty
80
+ */
81
+ id?: string;
82
+ /**
83
+ * Name of your component
84
+ */
85
+ name: string | number;
86
+ /**
87
+ * Styling options
88
+ */
89
+ options?: Options;
90
+ /**
91
+ * Properties to pass down to the component
92
+ */
93
+ passProps?: P;
94
+ }
95
+ export interface LayoutStackChildren {
96
+ /**
97
+ * Set component
98
+ */
99
+ component?: LayoutComponent;
100
+ /**
101
+ * Set the external component
102
+ */
103
+ externalComponent?: ExternalComponent;
104
+ }
105
+ export interface LayoutStack {
106
+ /**
107
+ * Set ID of the stack so you can use Navigation.mergeOptions to
108
+ * update options
109
+ */
110
+ id?: string;
111
+ /**
112
+ * Set children screens
113
+ */
114
+ children?: LayoutStackChildren[];
115
+ /**
116
+ * Set options
117
+ */
118
+ options?: Options;
119
+ }
120
+ export interface LayoutTabsChildren {
121
+ /**
122
+ * Set stack
123
+ */
124
+ stack?: LayoutStack;
125
+ /**
126
+ * Set component
127
+ */
128
+ component?: LayoutComponent;
129
+ /**
130
+ * Set the external component
131
+ */
132
+ externalComponent?: ExternalComponent;
133
+ }
134
+ export interface LayoutBottomTabs {
135
+ /**
136
+ * Set ID of the stack so you can use Navigation.mergeOptions to
137
+ * update options
138
+ */
139
+ id?: string;
140
+ /**
141
+ * Set the children screens
142
+ */
143
+ children?: LayoutTabsChildren[];
144
+ /**
145
+ * Set the bottom tabs options
146
+ */
147
+ options?: Options;
148
+ }
149
+ export interface LayoutSideMenu {
150
+ /**
151
+ * Set ID of the stack so you can use Navigation.mergeOptions to
152
+ * update options
153
+ */
154
+ id?: string;
155
+ /**
156
+ * Set the left side bar
157
+ */
158
+ left?: LayoutStackChildren;
159
+ /**
160
+ * Set the center view
161
+ */
162
+ center: Layout;
163
+ /**
164
+ * Set the right side bar
165
+ */
166
+ right?: LayoutStackChildren;
167
+ /**
168
+ * Set the bottom tabs options
169
+ */
170
+ options?: Options;
171
+ }
172
+ export interface LayoutSplitView {
173
+ /**
174
+ * Set ID of the stack so you can use Navigation.mergeOptions to
175
+ * update options
176
+ */
177
+ id?: string;
178
+ /**
179
+ * Set master layout (the smaller screen, sidebar)
180
+ */
181
+ master?: Layout;
182
+ /**
183
+ * Set detail layout (the larger screen, flexes)
184
+ */
185
+ detail?: Layout;
186
+ /**
187
+ * Configure split view
188
+ */
189
+ options?: Options;
190
+ }
191
+ export interface LayoutTopTabs {
192
+ /**
193
+ * Set the layout's id so Navigation.mergeOptions can be used to update options
194
+ */
195
+ id?: string;
196
+ /**
197
+ * Set the children screens
198
+ */
199
+ children?: LayoutTabsChildren[];
200
+ /**
201
+ * Configure top tabs
202
+ */
203
+ options?: Options;
204
+ }
205
+ export interface LayoutRoot {
206
+ /**
207
+ * Set the root
208
+ */
209
+ root: Layout;
210
+ modals?: any;
211
+ overlays?: any;
212
+ }
213
+ export interface ExternalComponent {
214
+ /**
215
+ * Set the screen's id so Navigation.mergeOptions can be used to update options
216
+ */
217
+ id?: string;
218
+ /**
219
+ * Name of your component
220
+ */
221
+ name: string | number;
222
+ /**
223
+ * Configure component options
224
+ */
225
+ options?: Options;
226
+ /**
227
+ * Properties to pass down to the component
228
+ */
229
+ passProps?: object;
230
+ }
231
+ export interface Layout<P = {}> {
232
+ /**
233
+ * Set the component
234
+ */
235
+ component?: LayoutComponent<P>;
236
+ /**
237
+ * Set the stack
238
+ */
239
+ stack?: LayoutStack;
240
+ /**
241
+ * Set the bottom tabs
242
+ */
243
+ bottomTabs?: LayoutBottomTabs;
244
+ /**
245
+ * Set the side menu
246
+ */
247
+ sideMenu?: LayoutSideMenu;
248
+ /**
249
+ * Set the split view
250
+ */
251
+ splitView?: LayoutSplitView;
252
+ /**
253
+ * Set the top tabs
254
+ */
255
+ topTabs?: LayoutTopTabs;
256
+ /**
257
+ * Set the external component
258
+ */
259
+ externalComponent?: ExternalComponent;
260
+ }
261
+
262
+ declare type Color = string;
263
+ declare type FontFamily = string;
264
+ declare type FontWeight =
265
+ | "regular"
266
+ | "bold"
267
+ | "thin"
268
+ | "ultraLight"
269
+ | "light"
270
+ | "medium"
271
+ | "semibold"
272
+ | "heavy"
273
+ | "black";
274
+ declare type LayoutOrientation = "portrait" | "landscape";
275
+ declare type AndroidDensityNumber = number;
276
+ declare type SystemItemIcon =
277
+ | "done"
278
+ | "cancel"
279
+ | "edit"
280
+ | "save"
281
+ | "add"
282
+ | "flexibleSpace"
283
+ | "fixedSpace"
284
+ | "compose"
285
+ | "reply"
286
+ | "action"
287
+ | "organize"
288
+ | "bookmarks"
289
+ | "search"
290
+ | "refresh"
291
+ | "stop"
292
+ | "camera"
293
+ | "trash"
294
+ | "play"
295
+ | "pause"
296
+ | "rewind"
297
+ | "fastForward"
298
+ | "undo"
299
+ | "redo";
300
+ declare type Interpolation =
301
+ | "linear"
302
+ | "accelerateDecelerate"
303
+ | "decelerate"
304
+ | "accelerate"
305
+ | "decelerateAccelerate";
306
+ export interface OptionsSplitView {
307
+ /**
308
+ * Master view display mode
309
+ * @default 'auto'
310
+ */
311
+ displayMode?: "auto" | "visible" | "hidden" | "overlay";
312
+ /**
313
+ * Master view side. Leading is left. Trailing is right.
314
+ * @default 'leading'
315
+ */
316
+ primaryEdge?: "leading" | "trailing";
317
+ /**
318
+ * Set the minimum width of master view
319
+ */
320
+ minWidth?: number;
321
+ /**
322
+ * Set the maximum width of master view
323
+ */
324
+ maxWidth?: number;
325
+ }
326
+ export interface OptionsStatusBar {
327
+ /**
328
+ * Set the status bar visibility
329
+ * @default true
330
+ */
331
+ visible?: boolean;
332
+ /**
333
+ * Set the text color of the status bar
334
+ * @default 'light'
335
+ */
336
+ style?: "light" | "dark";
337
+ /**
338
+ * Set the background color of the status bar
339
+ * #### (Android specific)
340
+ */
341
+ backgroundColor?: Color;
342
+ /**
343
+ * Draw screen behind the status bar
344
+ * #### (Android specific)
345
+ */
346
+ drawBehind?: boolean;
347
+ }
348
+ export interface OptionsLayout {
349
+ fitSystemWindows?: boolean;
350
+ /**
351
+ * Set the screen background color
352
+ */
353
+ backgroundColor?: Color;
354
+ /**
355
+ * Set background color only for components, helps reduce overdraw if background color is set in default options.
356
+ * #### (Android specific)
357
+ */
358
+ componentBackgroundColor?: Color;
359
+ /**
360
+ * Set the allowed orientations
361
+ */
362
+ orientation?: LayoutOrientation[];
363
+ /**
364
+ * Layout top margin
365
+ * #### (Android specific)
366
+ */
367
+ topMargin?: number;
368
+ /**
369
+ * Set language direction.
370
+ * only works with DefaultOptions
371
+ */
372
+ direction?: "rtl" | "ltr";
373
+ }
374
+ export declare enum OptionsModalPresentationStyle {
375
+ formSheet = "formSheet",
376
+ pageSheet = "pageSheet",
377
+ overFullScreen = "overFullScreen",
378
+ overCurrentContext = "overCurrentContext",
379
+ currentContext = "currentContext",
380
+ popover = "popover",
381
+ fullScreen = "fullScreen",
382
+ none = "none",
383
+ }
384
+ export declare enum OptionsModalTransitionStyle {
385
+ coverVertical = "coverVertical",
386
+ crossDissolve = "crossDissolve",
387
+ flipHorizontal = "flipHorizontal",
388
+ partialCurl = "partialCurl",
389
+ }
390
+ export interface OptionsTopBarLargeTitle {
391
+ /**
392
+ * Enable large titles
393
+ */
394
+ visible?: boolean;
395
+ /**
396
+ * Set the font size of large title's text
397
+ */
398
+ fontSize?: number;
399
+ /**
400
+ * Set the color of large title's text
401
+ */
402
+ color?: Color;
403
+ /**
404
+ * Set the font family of large title's text
405
+ */
406
+ fontFamily?: FontFamily;
407
+ /**
408
+ * Set the font weight, ignore fontFamily and use the iOS system fonts instead
409
+ * #### (iOS specific)
410
+ */
411
+ fontWeight?: FontWeight;
412
+ }
413
+ export interface OptionsTopBarTitle {
414
+ /**
415
+ * Text to display in the title area
416
+ */
417
+ text?: string;
418
+ /**
419
+ * Font size
420
+ */
421
+ fontSize?: number;
422
+ /**
423
+ * Text color
424
+ */
425
+ color?: Color;
426
+ /**
427
+ * Title font family
428
+ *
429
+ * Make sure that the font is available
430
+ */
431
+ fontFamily?: FontFamily;
432
+ /**
433
+ * Set the font weight, ignore fontFamily and use the iOS system fonts instead
434
+ * #### (iOS specific)
435
+ */
436
+ fontWeight?: FontWeight;
437
+ /**
438
+ * Custom component as the title view
439
+ */
440
+ component?: {
441
+ /**
442
+ * Component reference id, Auto generated if empty
443
+ */
444
+ id?: string;
445
+ /**
446
+ * Name of your component
447
+ */
448
+ name: string;
449
+ /**
450
+ * Set component alignment
451
+ */
452
+ alignment?: "center" | "fill";
453
+ /**
454
+ * Properties to pass down to the component
455
+ */
456
+ passProps?: object;
457
+ };
458
+ /**
459
+ * Top Bar title height in density pixels
460
+ * #### (Android specific)
461
+ */
462
+ height?: number;
463
+ /**
464
+ * Title alignment
465
+ * #### (Android specific)
466
+ */
467
+ alignment?: "center" | "fill";
468
+ }
469
+ export interface OptionsTopBarSubtitle {
470
+ /**
471
+ * Set subtitle text
472
+ */
473
+ text?: string;
474
+ /**
475
+ * Set subtitle font size
476
+ */
477
+ fontSize?: number;
478
+ /**
479
+ * Set subtitle color
480
+ */
481
+ color?: Color;
482
+ /**
483
+ * Set subtitle font family
484
+ */
485
+ fontFamily?: FontFamily;
486
+ /**
487
+ * Set the font weight, ignore fontFamily and use the iOS system fonts instead
488
+ * #### (iOS specific)
489
+ */
490
+ fontWeight?: FontWeight;
491
+ /**
492
+ * Set subtitle alignment
493
+ */
494
+ alignment?: "center";
495
+ }
496
+ export interface OptionsTopBarBackButton {
497
+ /**
498
+ * Image to show as the back button
499
+ */
500
+ icon?: ImageRequireSource;
501
+ /**
502
+ * Whether the back button is visible or not
503
+ * @default true
504
+ */
505
+ visible?: boolean;
506
+ /**
507
+ * Set the back button title
508
+ * #### (iOS specific)
509
+ */
510
+ title?: string;
511
+ /**
512
+ * Show title or just the icon
513
+ * #### (iOS specific)
514
+ */
515
+ showTitle?: boolean;
516
+ /**
517
+ * Back button icon and text color
518
+ */
519
+ color?: Color;
520
+ /**
521
+ * Set subtitle font size
522
+ */
523
+ fontSize?: number;
524
+ /**
525
+ * Set subtitle font family
526
+ */
527
+ fontFamily?: FontFamily;
528
+ /**
529
+ * Set testID for reference in E2E tests
530
+ */
531
+ testID?: string;
532
+ }
533
+ export interface OptionsTopBarBackground {
534
+ /**
535
+ * Background color of the top bar
536
+ */
537
+ color?: Color;
538
+ /**
539
+ * Clip the top bar background to bounds if set to true.
540
+ * #### (iOS specific)
541
+ */
542
+ clipToBounds?: boolean;
543
+ /**
544
+ * Set a custom component for the Top Bar background
545
+ */
546
+ component?: {
547
+ name?: string;
548
+ /**
549
+ * Properties to pass down to the component
550
+ */
551
+ passProps?: object;
552
+ };
553
+ /**
554
+ * Allows the NavBar to be translucent (blurred)
555
+ * #### (iOS specific)
556
+ */
557
+ translucent?: boolean;
558
+ /**
559
+ * Enable background blur
560
+ * #### (iOS specific)
561
+ */
562
+ blur?: boolean;
563
+ }
564
+ export interface OptionsTopBarButton {
565
+ /**
566
+ * Button id for reference press event
567
+ */
568
+ id: string;
569
+ /**
570
+ * Set the button icon
571
+ */
572
+ icon?: ImageRequireSource;
573
+ /**
574
+ * Set the button icon insets
575
+ */
576
+ iconInsets?: IconInsets;
577
+ /**
578
+ * Set the button as a custom component
579
+ */
580
+ component?: {
581
+ /**
582
+ * Component reference id, Auto generated if empty
583
+ */
584
+ id?: string;
585
+ /**
586
+ * Name of your component
587
+ */
588
+ name: string;
589
+ /**
590
+ * Properties to pass down to the component
591
+ */
592
+ passProps?: object;
593
+ /**
594
+ * (Android only) component width
595
+ */
596
+ width?: number;
597
+ /**
598
+ * (Android only) component height
599
+ */
600
+ height?: number;
601
+ };
602
+ /**
603
+ * (iOS only) Set the button as an iOS system icon
604
+ */
605
+ systemItem?: SystemItemIcon;
606
+ /**
607
+ * Set the button text
608
+ */
609
+ text?: string;
610
+ /**
611
+ * Overrides the text that's read by the screen reader when the user interacts with the element
612
+ */
613
+ accessibilityLabel?: string;
614
+ /**
615
+ * Set the button font family
616
+ */
617
+ fontFamily?: string;
618
+ /**
619
+ * Set the font weight, ignore fontFamily and use the iOS system fonts instead
620
+ * #### (iOS specific)
621
+ */
622
+ fontWeight?: FontWeight;
623
+ /**
624
+ * Set the button enabled or disabled
625
+ * @default true
626
+ */
627
+ enabled?: boolean;
628
+ /**
629
+ * Disable icon tinting
630
+ */
631
+ disableIconTint?: boolean;
632
+ /**
633
+ * Set text color
634
+ */
635
+ color?: Color;
636
+ /**
637
+ * Set text color in disabled state
638
+ */
639
+ disabledColor?: Color;
640
+ /**
641
+ * Set testID for reference in E2E tests
642
+ */
643
+ testID?: string;
644
+ /**
645
+ * (Android only) Set showAsAction value
646
+ * @see {@link https://developer.android.com/guide/topics/resources/menu-resource|Android developer guide: Menu resource}
647
+ */
648
+ showAsAction?: "ifRoom" | "withText" | "always" | "never";
649
+ }
650
+ export interface OptionsTopBar {
651
+ /**
652
+ * Show or hide the top bar
653
+ */
654
+ visible?: boolean;
655
+ /**
656
+ * Controls whether TopBar visibility changes should be animated
657
+ */
658
+ animate?: boolean;
659
+ /**
660
+ * Top bar will hide and show based on users scroll direction
661
+ */
662
+ hideOnScroll?: boolean;
663
+ /**
664
+ * Change button colors in the top bar
665
+ */
666
+ leftButtonColor?: Color;
667
+ rightButtonColor?: Color;
668
+ leftButtonDisabledColor?: Color;
669
+ rightButtonDisabledColor?: Color;
670
+ /**
671
+ * Draw behind the navbar
672
+ */
673
+ drawBehind?: boolean;
674
+ /**
675
+ * Can be used to reference the top bar in E2E tests
676
+ */
677
+ testID?: string;
678
+ /**
679
+ * Title configuration
680
+ */
681
+ title?: OptionsTopBarTitle;
682
+ /**
683
+ * Subtitle configuration
684
+ */
685
+ subtitle?: OptionsTopBarSubtitle;
686
+ /**
687
+ * Back button configuration
688
+ */
689
+ backButton?: OptionsTopBarBackButton;
690
+ /**
691
+ * List of buttons to the left
692
+ */
693
+ leftButtons?: OptionsTopBarButton[];
694
+ /**
695
+ * List of buttons to the right
696
+ */
697
+ rightButtons?: OptionsTopBarButton[];
698
+ /**
699
+ * Background configuration
700
+ */
701
+ background?: OptionsTopBarBackground;
702
+ /**
703
+ * Control the NavBar blur style
704
+ * #### (iOS specific)
705
+ * @requires translucent: true
706
+ * @default 'default'
707
+ */
708
+ barStyle?: "default" | "black";
709
+ /**
710
+ * Disable the border on bottom of the navbar
711
+ * #### (iOS specific)
712
+ * @default false
713
+ */
714
+ noBorder?: boolean;
715
+ /**
716
+ * Show a UISearchBar in the Top Bar
717
+ * #### (iOS 11+ specific)
718
+ */
719
+ searchBar?: boolean;
720
+ /**
721
+ * Hides the UISearchBar when scrolling
722
+ * #### (iOS 11+ specific)
723
+ */
724
+ searchBarHiddenWhenScrolling?: boolean;
725
+ /**
726
+ * The placeholder value in the UISearchBar
727
+ * #### (iOS 11+ specific)
728
+ */
729
+ searchBarPlaceholder?: string;
730
+ /**
731
+ * Controls Hiding NavBar on focus UISearchBar
732
+ * #### (iOS 11+ specific)
733
+ */
734
+ hideNavBarOnFocusSearchBar?: boolean;
735
+ /**
736
+ * Control the Large Title configuration
737
+ * #### (iOS 11+ specific)
738
+ */
739
+ largeTitle?: OptionsTopBarLargeTitle;
740
+ /**
741
+ * Set the height of the navbar in dp
742
+ * #### (Android specific)
743
+ */
744
+ height?: AndroidDensityNumber;
745
+ /**
746
+ * Change the navbar border color
747
+ * #### (Android specific)
748
+ */
749
+ borderColor?: Color;
750
+ /**
751
+ * Set the border height of the navbar in dp
752
+ * #### (Android specific)
753
+ */
754
+ borderHeight?: AndroidDensityNumber;
755
+ /**
756
+ * Set the elevation of the navbar in dp
757
+ * #### (Android specific)
758
+ */
759
+ elevation?: AndroidDensityNumber;
760
+ /**
761
+ * Layout top margin
762
+ * #### (Android specific)
763
+ */
764
+ topMargin?: number;
765
+ }
766
+ export interface SharedElementTransition {
767
+ fromId: string;
768
+ toId: string;
769
+ duration?: number;
770
+ interpolation: Interpolation;
771
+ }
772
+ export interface ElementTransition {
773
+ id: string;
774
+ alpha?: AppearingElementAnimation | DisappearingElementAnimation;
775
+ translationX?: AppearingElementAnimation | DisappearingElementAnimation;
776
+ translationY?: AppearingElementAnimation | DisappearingElementAnimation;
777
+ scaleX?: AppearingElementAnimation | DisappearingElementAnimation;
778
+ scaleY?: AppearingElementAnimation | DisappearingElementAnimation;
779
+ rotationX?: AppearingElementAnimation | DisappearingElementAnimation;
780
+ rotationY?: AppearingElementAnimation | DisappearingElementAnimation;
781
+ x?: AppearingElementAnimation | DisappearingElementAnimation;
782
+ y?: AppearingElementAnimation | DisappearingElementAnimation;
783
+ }
784
+ export interface AppearingElementAnimation extends ElementAnimation {
785
+ from: number;
786
+ }
787
+ export interface DisappearingElementAnimation extends ElementAnimation {
788
+ to: number;
789
+ }
790
+ export interface ElementAnimation {
791
+ duration: number;
792
+ startDelay?: number;
793
+ interpolation: Interpolation;
794
+ }
795
+ export interface OptionsFab {
796
+ id: string;
797
+ backgroundColor?: Color;
798
+ clickColor?: Color;
799
+ rippleColor?: Color;
800
+ visible?: boolean;
801
+ icon?: ImageRequireSource;
802
+ iconColor?: Color;
803
+ alignHorizontally?: "left" | "right";
804
+ alignVertically?: "top" | "bottom";
805
+ hideOnScroll?: boolean;
806
+ size?: number;
807
+ actions?: OptionsFab[];
808
+ }
809
+ export interface OptionsBottomTabs {
810
+ /**
811
+ * Show or hide the bottom tabs
812
+ */
813
+ visible?: boolean;
814
+ /**
815
+ * Enable animations when toggling visibility
816
+ */
817
+ animate?: boolean;
818
+ /**
819
+ * Use large icons when possible, even when three tabs without titles are displayed
820
+ * #### (android specific)
821
+ * @default false
822
+ */
823
+ preferLargeIcons?: boolean;
824
+ /**
825
+ * Switch to another screen within the bottom tabs via index (starting from 0)
826
+ */
827
+ currentTabIndex?: number;
828
+ /**
829
+ * Switch to another screen within the bottom tabs via screen name
830
+ */
831
+ currentTabId?: string;
832
+ /**
833
+ * Set a testID to reference the bottom tabs
834
+ */
835
+ testID?: string;
836
+ /**
837
+ * Draw screen component under the tab bar
838
+ */
839
+ drawBehind?: boolean;
840
+ /**
841
+ * Set a background color for the bottom tabs
842
+ */
843
+ backgroundColor?: Color;
844
+ /**
845
+ * Set when tabs are attached to hierarchy consequently when the
846
+ * RootView's constructor is called.
847
+ */
848
+ tabsAttachMode?: "together" | "afterInitialTab" | "onSwitchToTab";
849
+ /**
850
+ * Control the Bottom Tabs blur style
851
+ * #### (iOS specific)
852
+ * @requires translucent: true
853
+ * @default 'default'
854
+ */
855
+ barStyle?: "default" | "black";
856
+ /**
857
+ * Allows the Bottom Tabs to be translucent (blurred)
858
+ * #### (iOS specific)
859
+ */
860
+ translucent?: boolean;
861
+ /**
862
+ * Hide the top line of the Tab Bar
863
+ * #### (iOS specific)
864
+ */
865
+ hideShadow?: boolean;
866
+ /**
867
+ * Control the text display mode below the tab icon
868
+ * #### (Android specific)
869
+ */
870
+ titleDisplayMode?: "alwaysShow" | "showWhenActive" | "alwaysHide" | "showWhenActiveForce";
871
+ /**
872
+ * Set the elevation of the Bottom Tabs in dp
873
+ * #### (Android specific)
874
+ */
875
+ elevation?: AndroidDensityNumber;
876
+ }
877
+ export interface DotIndicatorOptions {
878
+ color?: Color;
879
+ size?: number;
880
+ visible?: boolean;
881
+ }
882
+ export declare type ImageResource = string;
883
+ export interface OptionsBottomTab {
884
+ dotIndicator?: DotIndicatorOptions;
885
+ /**
886
+ * Set the text to display below the icon
887
+ */
888
+ text?: string;
889
+ /**
890
+ * Set the text in a badge that is overlayed over the component
891
+ */
892
+ badge?: string;
893
+ /**
894
+ * Set the background color of the badge that is overlayed over the component
895
+ */
896
+ badgeColor?: string;
897
+ /**
898
+ * Set a testID to reference the tab in E2E tests
899
+ */
900
+ testID?: string;
901
+ /**
902
+ * Set the tab icon
903
+ */
904
+ icon?: ImageRequireSource | ImageResource;
905
+ /**
906
+ * Set the icon tint
907
+ */
908
+ iconColor?: Color;
909
+ /**
910
+ * Set the text color
911
+ */
912
+ textColor?: Color;
913
+ /**
914
+ * Set the selected icon tint
915
+ */
916
+ selectedIconColor?: Color;
917
+ /**
918
+ * Set the selected text color
919
+ */
920
+ selectedTextColor?: Color;
921
+ /**
922
+ * Set the text font family
923
+ */
924
+ fontFamily?: FontFamily;
925
+ /**
926
+ * Set the font weight, ignore fontFamily and use the iOS system fonts instead
927
+ * #### (iOS specific)
928
+ */
929
+ fontWeight?: FontWeight;
930
+ /**
931
+ * Set the text font size
932
+ */
933
+ fontSize?: number;
934
+ /**
935
+ * Set the insets of the icon
936
+ * #### (iOS specific)
937
+ */
938
+ iconInsets?: Insets;
939
+ /**
940
+ * Set selected icon image
941
+ * #### (iOS specific)
942
+ */
943
+ selectedIcon?: ImageRequireSource;
944
+ /**
945
+ * Set true if you want to disable the icon tinting
946
+ * #### (iOS specific)
947
+ */
948
+ disableIconTint?: boolean;
949
+ /**
950
+ * Set true if you want to disable the text tinting
951
+ * #### (iOS specific)
952
+ */
953
+ disableSelectedIconTint?: boolean;
954
+ /**
955
+ * Set the font size for selected tabs
956
+ * #### (Android specific)
957
+ */
958
+ selectedFontSize?: number;
959
+ /**
960
+ * If it's set to false, pressing a tab won't select the tab
961
+ * instead it will emit a bottomTabPressedEvent
962
+ */
963
+ selectTabOnPress?: boolean;
964
+ }
965
+ export interface SideMenuSide {
966
+ /**
967
+ * Show or hide the side menu
968
+ */
969
+ visible?: boolean;
970
+ /**
971
+ * Enable or disable the side menu
972
+ */
973
+ enabled?: boolean;
974
+ /**
975
+ * Set the width of the side menu
976
+ */
977
+ width?: number;
978
+ /**
979
+ * Set the height of the side menu
980
+ */
981
+ height?: number;
982
+ /**
983
+ * Stretch sideMenu contents when opened past the width
984
+ * #### (iOS specific)
985
+ * @default true
986
+ */
987
+ shouldStretchDrawer?: boolean;
988
+ }
989
+ export interface OptionsSideMenu {
990
+ /**
991
+ * Configure the left side menu
992
+ */
993
+ left?: SideMenuSide;
994
+ /**
995
+ * Configure the right side menu
996
+ */
997
+ right?: SideMenuSide;
998
+ /**
999
+ * Configure how a user is allowed to open a drawer using gestures
1000
+ * #### (iOS specific)
1001
+ * @default 'entireScreen'
1002
+ */
1003
+ openGestureMode?: "entireScreen" | "bezel";
1004
+ }
1005
+ export interface OverlayOptions {
1006
+ /**
1007
+ * Capture touches outside of the Component View
1008
+ */
1009
+ interceptTouchOutside?: boolean;
1010
+ /**
1011
+ * Control whether this Overlay should handle Keyboard events.
1012
+ * Set this to true if your Overlay contains a TextInput.
1013
+ */
1014
+ handleKeyboardEvents?: boolean;
1015
+ }
1016
+ export interface ModalOptions {
1017
+ /**
1018
+ * Control whether this modal should be dismiss using swipe gesture when the modalPresentationStyle = 'pageSheet'
1019
+ * #### (iOS specific)
1020
+ */
1021
+ swipeToDismiss?: boolean;
1022
+ }
1023
+ export interface OptionsPreviewAction {
1024
+ /**
1025
+ * Reference ID to get callbacks from
1026
+ */
1027
+ id: string;
1028
+ /**
1029
+ * Action text
1030
+ */
1031
+ title: string;
1032
+ /**
1033
+ * Action style
1034
+ */
1035
+ style?: "default" | "selected" | "destructive";
1036
+ /**
1037
+ * Subactions that will be shown when this action is pressed.
1038
+ */
1039
+ actions?: OptionsPreviewAction[];
1040
+ }
1041
+ export interface OptionsPreview {
1042
+ /**
1043
+ * Pass a react node tag to mark a SourceRect for a specific
1044
+ * peek and pop preview element.
1045
+ */
1046
+ reactTag?: number;
1047
+ /**
1048
+ * You can set this property specify the width of the preview.
1049
+ * If the width is greater than the device width, it will be zoomed in.
1050
+ */
1051
+ width?: number;
1052
+ /**
1053
+ * Height of the preview
1054
+ */
1055
+ height?: 100;
1056
+ /**
1057
+ * You can control if the users gesture will result in pushing
1058
+ * the preview screen into the stack.
1059
+ */
1060
+ commit?: boolean;
1061
+ /**
1062
+ * List of actions that will appear underneath the preview window.
1063
+ * They can be nested for sub actions.
1064
+ */
1065
+ actions?: OptionsPreviewAction[];
1066
+ }
1067
+ export interface OptionsAnimationPropertyConfig {
1068
+ /**
1069
+ * Animate from this value, ex. 0
1070
+ */
1071
+ from?: number;
1072
+ /**
1073
+ * Animate to this value, ex. 1
1074
+ */
1075
+ to?: number;
1076
+ /**
1077
+ * Animation duration
1078
+ * @default 300
1079
+ */
1080
+ duration?: number;
1081
+ /**
1082
+ * Animation delay
1083
+ * @default 0
1084
+ */
1085
+ startDelay?: number;
1086
+ /**
1087
+ * Animation interplation
1088
+ */
1089
+ interpolation?: "accelerate" | "decelerate";
1090
+ }
1091
+ /**
1092
+ * Used to animate the actual content added to the hierarchy.
1093
+ * Content can be a React component (component) or any other layout (Stack, BottomTabs etc)
1094
+ */
1095
+ export interface ScreenAnimationOptions {
1096
+ /**
1097
+ * Animate the element over x value
1098
+ */
1099
+ x?: OptionsAnimationPropertyConfig;
1100
+ /**
1101
+ * Animate the element over y value
1102
+ */
1103
+ y?: OptionsAnimationPropertyConfig;
1104
+ /**
1105
+ * Animate the element over translateX
1106
+ */
1107
+ translationX?: OptionsAnimationPropertyConfig;
1108
+ /**
1109
+ * Animate the element over translateY
1110
+ */
1111
+ translationY?: OptionsAnimationPropertyConfig;
1112
+ /**
1113
+ * Animate the element over opacity
1114
+ */
1115
+ alpha?: OptionsAnimationPropertyConfig;
1116
+ /**
1117
+ * Animate the element over scaleX
1118
+ */
1119
+ scaleX?: OptionsAnimationPropertyConfig;
1120
+ /**
1121
+ * Animate the element over scaleY
1122
+ */
1123
+ scaleY?: OptionsAnimationPropertyConfig;
1124
+ /**
1125
+ * Animate the element over rotationX
1126
+ */
1127
+ rotationX?: OptionsAnimationPropertyConfig;
1128
+ /**
1129
+ * Animate the element over rotationY
1130
+ */
1131
+ rotationY?: OptionsAnimationPropertyConfig;
1132
+ /**
1133
+ * Animate the element over rotation
1134
+ */
1135
+ rotation?: OptionsAnimationPropertyConfig;
1136
+ /**
1137
+ * Wait for the root view to render before start animation
1138
+ */
1139
+ waitForRender?: boolean;
1140
+ /**
1141
+ * Enable or disable the animation
1142
+ * @default true
1143
+ */
1144
+ enabled?: boolean;
1145
+ }
1146
+ export interface IconInsets {
1147
+ /**
1148
+ * Configure top inset
1149
+ */
1150
+ top?: number;
1151
+ /**
1152
+ * Configure left inset
1153
+ */
1154
+ left?: number;
1155
+ /**
1156
+ * Configure bottom inset
1157
+ */
1158
+ bottom?: number;
1159
+ /**
1160
+ * Configure right inset
1161
+ */
1162
+ right?: number;
1163
+ }
1164
+ export interface ViewAnimationOptions extends ScreenAnimationOptions {
1165
+ /**
1166
+ * ID of the Top Bar we want to animate
1167
+ */
1168
+ id?: string;
1169
+ }
1170
+ /**
1171
+ * Used for describing stack commands animations.
1172
+ */
1173
+ export interface StackAnimationOptions {
1174
+ /**
1175
+ * Wait for the View to render before start animation
1176
+ */
1177
+ waitForRender?: boolean;
1178
+ /**
1179
+ * Enable or disable the animation
1180
+ * @default true
1181
+ */
1182
+ enabled?: boolean;
1183
+ /**
1184
+ * Configure animations for the top bar
1185
+ */
1186
+ topBar?: ViewAnimationOptions;
1187
+ /**
1188
+ * Configure animations for the bottom tabs
1189
+ */
1190
+ bottomTabs?: ViewAnimationOptions;
1191
+ /**
1192
+ * Configure animations for the content (Screen)
1193
+ */
1194
+ content?: ViewAnimationOptions;
1195
+ /**
1196
+ * Animations to be applied on elements which are shared between the appearing and disappearing screens
1197
+ */
1198
+ sharedElementTransitions?: SharedElementTransition[];
1199
+ /**
1200
+ * Animations to be applied on views in the appearing or disappearing screens
1201
+ */
1202
+ elementTransitions?: ElementTransition[];
1203
+ }
1204
+ /**
1205
+ * Used for configuring command animations
1206
+ */
1207
+ export interface AnimationOptions {
1208
+ /**
1209
+ * Configure the setStackRoot animation
1210
+ */
1211
+ setStackRoot?: ViewAnimationOptions;
1212
+ /**
1213
+ * Configure the setRoot animation
1214
+ */
1215
+ setRoot?: ViewAnimationOptions;
1216
+ /**
1217
+ * Configure what animates when a screen is pushed
1218
+ */
1219
+ push?: StackAnimationOptions;
1220
+ /**
1221
+ * Configure what animates when a screen is popped
1222
+ */
1223
+ pop?: StackAnimationOptions;
1224
+ /**
1225
+ * Configure what animates when modal is shown
1226
+ */
1227
+ showModal?: ViewAnimationOptions;
1228
+ /**
1229
+ * Configure what animates when modal is dismissed
1230
+ */
1231
+ dismissModal?: ViewAnimationOptions;
1232
+ }
1233
+ /**
1234
+ * Configure Android's NavigationBar
1235
+ */
1236
+ export interface NavigationBarOptions {
1237
+ backgroundColor?: Color;
1238
+ visible?: boolean;
1239
+ }
1240
+ export interface Options {
1241
+ /**
1242
+ * Configure the status bar
1243
+ */
1244
+ statusBar?: OptionsStatusBar;
1245
+ /**
1246
+ * Configure the layout
1247
+ */
1248
+ layout?: OptionsLayout;
1249
+ /**
1250
+ * Configure the presentation style of the modal
1251
+ */
1252
+ modalPresentationStyle?: OptionsModalPresentationStyle;
1253
+ /**
1254
+ * Configure the transition style of the modal
1255
+ *
1256
+ * #### (Android specific)
1257
+ */
1258
+ modalTransitionStyle?: OptionsModalTransitionStyle;
1259
+ /**
1260
+ * Configure the top bar
1261
+ */
1262
+ topBar?: OptionsTopBar;
1263
+ fab?: OptionsFab;
1264
+ /**
1265
+ * Configure the bottom tabs
1266
+ */
1267
+ bottomTabs?: OptionsBottomTabs;
1268
+ /**
1269
+ * Configure the bottom tab associated to the screen
1270
+ */
1271
+ bottomTab?: OptionsBottomTab;
1272
+ /**
1273
+ * Configure the side menu
1274
+ */
1275
+ sideMenu?: OptionsSideMenu;
1276
+ /**
1277
+ * Configure the splitView controller
1278
+ */
1279
+ splitView?: OptionsSplitView;
1280
+ /**
1281
+ * Configure the overlay
1282
+ */
1283
+ overlay?: OverlayOptions;
1284
+ /**
1285
+ * Configure the modal
1286
+ */
1287
+ modal?: ModalOptions;
1288
+ /**
1289
+ * Animation used for navigation commands that modify the layout
1290
+ * hierarchy can be controlled in options.
1291
+ *
1292
+ * Animations can be modified per command and it's also possible
1293
+ * to change the default animation for each command.
1294
+ *
1295
+ * Example:
1296
+ ```js
1297
+ setRoot: {
1298
+ y: {
1299
+ from: 1000,
1300
+ to: 0,
1301
+ duration: 500,
1302
+ interpolation: 'accelerate',
1303
+ },
1304
+ alpha: {
1305
+ from: 0,
1306
+ to: 1,
1307
+ duration: 400,
1308
+ startDelay: 100,
1309
+ interpolation: 'accelerate'
1310
+ }
1311
+ }
1312
+ ```
1313
+ */
1314
+ animations?: AnimationOptions;
1315
+ /**
1316
+ * Configure Android's NavigationBar
1317
+ */
1318
+ navigationBar?: NavigationBarOptions;
1319
+ /**
1320
+ * Preview configuration for Peek and Pop
1321
+ * #### (iOS specific)
1322
+ */
1323
+ preview?: OptionsPreview;
1324
+ /**
1325
+ * Enable or disable swipe back to pop gesture
1326
+ * #### (iOS specific)
1327
+ * @default true
1328
+ */
1329
+ popGesture?: boolean;
1330
+ /**
1331
+ * Background image for the screen
1332
+ * #### (iOS specific)
1333
+ */
1334
+ backgroundImage?: ImageRequireSource;
1335
+ /**
1336
+ * Background image for the Navigation View
1337
+ * #### (iOS specific)
1338
+ */
1339
+ rootBackgroundImage?: ImageRequireSource;
1340
+ /**
1341
+ * Enable or disable automatically blurring focused input, dismissing keyboard on unmount
1342
+ * #### (Android specific)
1343
+ * @default false
1344
+ */
1345
+ blurOnUnmount?: boolean;
1346
+ }
1347
+ export {};