@hero-design/rn 8.56.0 → 8.57.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 (40) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +22 -0
  3. package/assets/fonts/hero-icons-mobile.ttf +0 -0
  4. package/es/index.js +5106 -4266
  5. package/lib/assets/fonts/hero-icons-mobile.ttf +0 -0
  6. package/lib/index.js +5105 -4265
  7. package/package.json +2 -1
  8. package/src/components/AnimatedScroller/__tests__/ScrollablesWithFAB.spec.tsx +172 -0
  9. package/src/components/AnimatedScroller/__tests__/__snapshots__/ScrollablesWithFAB.spec.tsx.snap +3435 -0
  10. package/src/components/Button/StyledButton.tsx +16 -30
  11. package/src/components/Carousel/CardCarousel.tsx +3 -4
  12. package/src/components/Empty/__tests__/__snapshots__/index.spec.tsx.snap +2 -2
  13. package/src/components/Error/__tests__/__snapshots__/index.spec.tsx.snap +4 -4
  14. package/src/components/Icon/HeroIcon/glyphMap.json +1 -1
  15. package/src/components/Icon/IconList.ts +4 -0
  16. package/src/components/PinInput/index.tsx +1 -1
  17. package/src/components/Tabs/SceneView.tsx +6 -4
  18. package/src/components/Tabs/ScrollableTabs.tsx +8 -2
  19. package/src/components/Tabs/{ScrollableTabsHeader.tsx → ScrollableTabsHeader/ScrollableTabsHeader.tsx} +73 -42
  20. package/src/components/Tabs/ScrollableTabsHeader/hooks/useInitHighlightedAnimation.ts +45 -0
  21. package/src/components/Tabs/ScrollableTabsHeader/hooks/useInitUnderlinedAnimation.ts +91 -0
  22. package/src/components/Tabs/StyledScrollableTabs.tsx +14 -3
  23. package/src/components/Tabs/__tests__/ScrollableTabsHeader.spec.tsx +7 -3
  24. package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap +42 -6
  25. package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabsHeader.spec.tsx.snap +623 -3
  26. package/src/components/Tabs/__tests__/useInitHighlightedAnimation.spec.tsx +56 -0
  27. package/src/components/Tabs/__tests__/useInitUnderlinedAnimation.spec.tsx +65 -0
  28. package/src/components/Typography/Body/__tests__/__snapshots__/StyledBody.tsx.snap +2 -2
  29. package/src/components/Typography/Body/__tests__/__snapshots__/index.spec.tsx.snap +2 -2
  30. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +1 -1
  31. package/src/theme/components/typography.ts +1 -1
  32. package/types/components/Icon/IconList.d.ts +1 -1
  33. package/types/components/Icon/index.d.ts +1 -1
  34. package/types/components/Icon/utils.d.ts +1 -1
  35. package/types/components/Tabs/ScrollableTabs.d.ts +4 -1
  36. package/types/components/Tabs/{ScrollableTabsHeader.d.ts → ScrollableTabsHeader/ScrollableTabsHeader.d.ts} +7 -3
  37. package/types/components/Tabs/ScrollableTabsHeader/hooks/useInitHighlightedAnimation.d.ts +9 -0
  38. package/types/components/Tabs/ScrollableTabsHeader/hooks/useInitUnderlinedAnimation.d.ts +10 -0
  39. package/types/components/Tabs/StyledScrollableTabs.d.ts +5 -1
  40. package/types/components/Tabs/index.d.ts +1 -1
package/src/components/AnimatedScroller/__tests__/__snapshots__/ScrollablesWithFAB.spec.tsx.snap ADDED
@@ -0,0 +1,3435 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders ActionGroup correctly 1`] = `
4
+ <View
5
+ style={
6
+ {
7
+ "flex": 1,
8
+ }
9
+ }
10
+ >
11
+ <RCTScrollView
12
+ data={
13
+ [
14
+ {
15
+ "id": 0,
16
+ "title": "Content 0",
17
+ },
18
+ {
19
+ "id": 1,
20
+ "title": "Content 1",
21
+ },
22
+ {
23
+ "id": 2,
24
+ "title": "Content 2",
25
+ },
26
+ {
27
+ "id": 3,
28
+ "title": "Content 3",
29
+ },
30
+ {
31
+ "id": 4,
32
+ "title": "Content 4",
33
+ },
34
+ {
35
+ "id": 5,
36
+ "title": "Content 5",
37
+ },
38
+ {
39
+ "id": 6,
40
+ "title": "Content 6",
41
+ },
42
+ {
43
+ "id": 7,
44
+ "title": "Content 7",
45
+ },
46
+ {
47
+ "id": 8,
48
+ "title": "Content 8",
49
+ },
50
+ {
51
+ "id": 9,
52
+ "title": "Content 9",
53
+ },
54
+ {
55
+ "id": 10,
56
+ "title": "Content 10",
57
+ },
58
+ {
59
+ "id": 11,
60
+ "title": "Content 11",
61
+ },
62
+ {
63
+ "id": 12,
64
+ "title": "Content 12",
65
+ },
66
+ {
67
+ "id": 13,
68
+ "title": "Content 13",
69
+ },
70
+ {
71
+ "id": 14,
72
+ "title": "Content 14",
73
+ },
74
+ {
75
+ "id": 15,
76
+ "title": "Content 15",
77
+ },
78
+ {
79
+ "id": 16,
80
+ "title": "Content 16",
81
+ },
82
+ {
83
+ "id": 17,
84
+ "title": "Content 17",
85
+ },
86
+ {
87
+ "id": 18,
88
+ "title": "Content 18",
89
+ },
90
+ {
91
+ "id": 19,
92
+ "title": "Content 19",
93
+ },
94
+ {
95
+ "id": 20,
96
+ "title": "Content 20",
97
+ },
98
+ {
99
+ "id": 21,
100
+ "title": "Content 21",
101
+ },
102
+ {
103
+ "id": 22,
104
+ "title": "Content 22",
105
+ },
106
+ {
107
+ "id": 23,
108
+ "title": "Content 23",
109
+ },
110
+ {
111
+ "id": 24,
112
+ "title": "Content 24",
113
+ },
114
+ {
115
+ "id": 25,
116
+ "title": "Content 25",
117
+ },
118
+ {
119
+ "id": 26,
120
+ "title": "Content 26",
121
+ },
122
+ {
123
+ "id": 27,
124
+ "title": "Content 27",
125
+ },
126
+ {
127
+ "id": 28,
128
+ "title": "Content 28",
129
+ },
130
+ {
131
+ "id": 29,
132
+ "title": "Content 29",
133
+ },
134
+ ]
135
+ }
136
+ getItem={[Function]}
137
+ getItemCount={[Function]}
138
+ keyExtractor={[Function]}
139
+ onContentSizeChange={[Function]}
140
+ onLayout={[Function]}
141
+ onMomentumScrollBegin={[Function]}
142
+ onMomentumScrollEnd={[Function]}
143
+ onScroll={[Function]}
144
+ onScrollBeginDrag={[Function]}
145
+ onScrollEndDrag={[Function]}
146
+ removeClippedSubviews={false}
147
+ renderItem={[Function]}
148
+ scrollEventThrottle={100}
149
+ stickyHeaderIndices={[]}
150
+ testID="scrollable-with-fab"
151
+ viewabilityConfigCallbackPairs={[]}
152
+ >
153
+ <View>
154
+ <View
155
+ onFocusCapture={[Function]}
156
+ onLayout={[Function]}
157
+ style={null}
158
+ >
159
+ <View
160
+ marginBottom="xxxxlarge"
161
+ style={
162
+ [
163
+ {
164
+ "marginBottom": 56,
165
+ },
166
+ undefined,
167
+ ]
168
+ }
169
+ >
170
+ <Text
171
+ allowFontScaling={false}
172
+ style={
173
+ [
174
+ {
175
+ "color": "#001f23",
176
+ "fontFamily": "BeVietnamPro-SemiBold",
177
+ "fontSize": 18,
178
+ "letterSpacing": 0.24,
179
+ "lineHeight": 28,
180
+ },
181
+ undefined,
182
+ ]
183
+ }
184
+ themeIntent="body"
185
+ themeLevel="h5"
186
+ themeTypeface="neutral"
187
+ >
188
+ Content 0
189
+ </Text>
190
+ <Text
191
+ allowFontScaling={false}
192
+ style={
193
+ [
194
+ {
195
+ "color": "#001f23",
196
+ "fontFamily": "BeVietnamPro-Regular",
197
+ "fontSize": 16,
198
+ "letterSpacing": 0.48,
199
+ "lineHeight": 24,
200
+ },
201
+ undefined,
202
+ ]
203
+ }
204
+ themeIntent="body"
205
+ themeTypeface="neutral"
206
+ themeVariant="regular"
207
+ >
208
+ Item
209
+ 0
210
+ </Text>
211
+ </View>
212
+ </View>
213
+ <View
214
+ onFocusCapture={[Function]}
215
+ onLayout={[Function]}
216
+ style={null}
217
+ >
218
+ <View
219
+ marginBottom="xxxxlarge"
220
+ style={
221
+ [
222
+ {
223
+ "marginBottom": 56,
224
+ },
225
+ undefined,
226
+ ]
227
+ }
228
+ >
229
+ <Text
230
+ allowFontScaling={false}
231
+ style={
232
+ [
233
+ {
234
+ "color": "#001f23",
235
+ "fontFamily": "BeVietnamPro-SemiBold",
236
+ "fontSize": 18,
237
+ "letterSpacing": 0.24,
238
+ "lineHeight": 28,
239
+ },
240
+ undefined,
241
+ ]
242
+ }
243
+ themeIntent="body"
244
+ themeLevel="h5"
245
+ themeTypeface="neutral"
246
+ >
247
+ Content 1
248
+ </Text>
249
+ <Text
250
+ allowFontScaling={false}
251
+ style={
252
+ [
253
+ {
254
+ "color": "#001f23",
255
+ "fontFamily": "BeVietnamPro-Regular",
256
+ "fontSize": 16,
257
+ "letterSpacing": 0.48,
258
+ "lineHeight": 24,
259
+ },
260
+ undefined,
261
+ ]
262
+ }
263
+ themeIntent="body"
264
+ themeTypeface="neutral"
265
+ themeVariant="regular"
266
+ >
267
+ Item
268
+ 1
269
+ </Text>
270
+ </View>
271
+ </View>
272
+ <View
273
+ onFocusCapture={[Function]}
274
+ onLayout={[Function]}
275
+ style={null}
276
+ >
277
+ <View
278
+ marginBottom="xxxxlarge"
279
+ style={
280
+ [
281
+ {
282
+ "marginBottom": 56,
283
+ },
284
+ undefined,
285
+ ]
286
+ }
287
+ >
288
+ <Text
289
+ allowFontScaling={false}
290
+ style={
291
+ [
292
+ {
293
+ "color": "#001f23",
294
+ "fontFamily": "BeVietnamPro-SemiBold",
295
+ "fontSize": 18,
296
+ "letterSpacing": 0.24,
297
+ "lineHeight": 28,
298
+ },
299
+ undefined,
300
+ ]
301
+ }
302
+ themeIntent="body"
303
+ themeLevel="h5"
304
+ themeTypeface="neutral"
305
+ >
306
+ Content 2
307
+ </Text>
308
+ <Text
309
+ allowFontScaling={false}
310
+ style={
311
+ [
312
+ {
313
+ "color": "#001f23",
314
+ "fontFamily": "BeVietnamPro-Regular",
315
+ "fontSize": 16,
316
+ "letterSpacing": 0.48,
317
+ "lineHeight": 24,
318
+ },
319
+ undefined,
320
+ ]
321
+ }
322
+ themeIntent="body"
323
+ themeTypeface="neutral"
324
+ themeVariant="regular"
325
+ >
326
+ Item
327
+ 2
328
+ </Text>
329
+ </View>
330
+ </View>
331
+ <View
332
+ onFocusCapture={[Function]}
333
+ onLayout={[Function]}
334
+ style={null}
335
+ >
336
+ <View
337
+ marginBottom="xxxxlarge"
338
+ style={
339
+ [
340
+ {
341
+ "marginBottom": 56,
342
+ },
343
+ undefined,
344
+ ]
345
+ }
346
+ >
347
+ <Text
348
+ allowFontScaling={false}
349
+ style={
350
+ [
351
+ {
352
+ "color": "#001f23",
353
+ "fontFamily": "BeVietnamPro-SemiBold",
354
+ "fontSize": 18,
355
+ "letterSpacing": 0.24,
356
+ "lineHeight": 28,
357
+ },
358
+ undefined,
359
+ ]
360
+ }
361
+ themeIntent="body"
362
+ themeLevel="h5"
363
+ themeTypeface="neutral"
364
+ >
365
+ Content 3
366
+ </Text>
367
+ <Text
368
+ allowFontScaling={false}
369
+ style={
370
+ [
371
+ {
372
+ "color": "#001f23",
373
+ "fontFamily": "BeVietnamPro-Regular",
374
+ "fontSize": 16,
375
+ "letterSpacing": 0.48,
376
+ "lineHeight": 24,
377
+ },
378
+ undefined,
379
+ ]
380
+ }
381
+ themeIntent="body"
382
+ themeTypeface="neutral"
383
+ themeVariant="regular"
384
+ >
385
+ Item
386
+ 3
387
+ </Text>
388
+ </View>
389
+ </View>
390
+ <View
391
+ onFocusCapture={[Function]}
392
+ onLayout={[Function]}
393
+ style={null}
394
+ >
395
+ <View
396
+ marginBottom="xxxxlarge"
397
+ style={
398
+ [
399
+ {
400
+ "marginBottom": 56,
401
+ },
402
+ undefined,
403
+ ]
404
+ }
405
+ >
406
+ <Text
407
+ allowFontScaling={false}
408
+ style={
409
+ [
410
+ {
411
+ "color": "#001f23",
412
+ "fontFamily": "BeVietnamPro-SemiBold",
413
+ "fontSize": 18,
414
+ "letterSpacing": 0.24,
415
+ "lineHeight": 28,
416
+ },
417
+ undefined,
418
+ ]
419
+ }
420
+ themeIntent="body"
421
+ themeLevel="h5"
422
+ themeTypeface="neutral"
423
+ >
424
+ Content 4
425
+ </Text>
426
+ <Text
427
+ allowFontScaling={false}
428
+ style={
429
+ [
430
+ {
431
+ "color": "#001f23",
432
+ "fontFamily": "BeVietnamPro-Regular",
433
+ "fontSize": 16,
434
+ "letterSpacing": 0.48,
435
+ "lineHeight": 24,
436
+ },
437
+ undefined,
438
+ ]
439
+ }
440
+ themeIntent="body"
441
+ themeTypeface="neutral"
442
+ themeVariant="regular"
443
+ >
444
+ Item
445
+ 4
446
+ </Text>
447
+ </View>
448
+ </View>
449
+ <View
450
+ onFocusCapture={[Function]}
451
+ onLayout={[Function]}
452
+ style={null}
453
+ >
454
+ <View
455
+ marginBottom="xxxxlarge"
456
+ style={
457
+ [
458
+ {
459
+ "marginBottom": 56,
460
+ },
461
+ undefined,
462
+ ]
463
+ }
464
+ >
465
+ <Text
466
+ allowFontScaling={false}
467
+ style={
468
+ [
469
+ {
470
+ "color": "#001f23",
471
+ "fontFamily": "BeVietnamPro-SemiBold",
472
+ "fontSize": 18,
473
+ "letterSpacing": 0.24,
474
+ "lineHeight": 28,
475
+ },
476
+ undefined,
477
+ ]
478
+ }
479
+ themeIntent="body"
480
+ themeLevel="h5"
481
+ themeTypeface="neutral"
482
+ >
483
+ Content 5
484
+ </Text>
485
+ <Text
486
+ allowFontScaling={false}
487
+ style={
488
+ [
489
+ {
490
+ "color": "#001f23",
491
+ "fontFamily": "BeVietnamPro-Regular",
492
+ "fontSize": 16,
493
+ "letterSpacing": 0.48,
494
+ "lineHeight": 24,
495
+ },
496
+ undefined,
497
+ ]
498
+ }
499
+ themeIntent="body"
500
+ themeTypeface="neutral"
501
+ themeVariant="regular"
502
+ >
503
+ Item
504
+ 5
505
+ </Text>
506
+ </View>
507
+ </View>
508
+ <View
509
+ onFocusCapture={[Function]}
510
+ onLayout={[Function]}
511
+ style={null}
512
+ >
513
+ <View
514
+ marginBottom="xxxxlarge"
515
+ style={
516
+ [
517
+ {
518
+ "marginBottom": 56,
519
+ },
520
+ undefined,
521
+ ]
522
+ }
523
+ >
524
+ <Text
525
+ allowFontScaling={false}
526
+ style={
527
+ [
528
+ {
529
+ "color": "#001f23",
530
+ "fontFamily": "BeVietnamPro-SemiBold",
531
+ "fontSize": 18,
532
+ "letterSpacing": 0.24,
533
+ "lineHeight": 28,
534
+ },
535
+ undefined,
536
+ ]
537
+ }
538
+ themeIntent="body"
539
+ themeLevel="h5"
540
+ themeTypeface="neutral"
541
+ >
542
+ Content 6
543
+ </Text>
544
+ <Text
545
+ allowFontScaling={false}
546
+ style={
547
+ [
548
+ {
549
+ "color": "#001f23",
550
+ "fontFamily": "BeVietnamPro-Regular",
551
+ "fontSize": 16,
552
+ "letterSpacing": 0.48,
553
+ "lineHeight": 24,
554
+ },
555
+ undefined,
556
+ ]
557
+ }
558
+ themeIntent="body"
559
+ themeTypeface="neutral"
560
+ themeVariant="regular"
561
+ >
562
+ Item
563
+ 6
564
+ </Text>
565
+ </View>
566
+ </View>
567
+ <View
568
+ onFocusCapture={[Function]}
569
+ onLayout={[Function]}
570
+ style={null}
571
+ >
572
+ <View
573
+ marginBottom="xxxxlarge"
574
+ style={
575
+ [
576
+ {
577
+ "marginBottom": 56,
578
+ },
579
+ undefined,
580
+ ]
581
+ }
582
+ >
583
+ <Text
584
+ allowFontScaling={false}
585
+ style={
586
+ [
587
+ {
588
+ "color": "#001f23",
589
+ "fontFamily": "BeVietnamPro-SemiBold",
590
+ "fontSize": 18,
591
+ "letterSpacing": 0.24,
592
+ "lineHeight": 28,
593
+ },
594
+ undefined,
595
+ ]
596
+ }
597
+ themeIntent="body"
598
+ themeLevel="h5"
599
+ themeTypeface="neutral"
600
+ >
601
+ Content 7
602
+ </Text>
603
+ <Text
604
+ allowFontScaling={false}
605
+ style={
606
+ [
607
+ {
608
+ "color": "#001f23",
609
+ "fontFamily": "BeVietnamPro-Regular",
610
+ "fontSize": 16,
611
+ "letterSpacing": 0.48,
612
+ "lineHeight": 24,
613
+ },
614
+ undefined,
615
+ ]
616
+ }
617
+ themeIntent="body"
618
+ themeTypeface="neutral"
619
+ themeVariant="regular"
620
+ >
621
+ Item
622
+ 7
623
+ </Text>
624
+ </View>
625
+ </View>
626
+ <View
627
+ onFocusCapture={[Function]}
628
+ onLayout={[Function]}
629
+ style={null}
630
+ >
631
+ <View
632
+ marginBottom="xxxxlarge"
633
+ style={
634
+ [
635
+ {
636
+ "marginBottom": 56,
637
+ },
638
+ undefined,
639
+ ]
640
+ }
641
+ >
642
+ <Text
643
+ allowFontScaling={false}
644
+ style={
645
+ [
646
+ {
647
+ "color": "#001f23",
648
+ "fontFamily": "BeVietnamPro-SemiBold",
649
+ "fontSize": 18,
650
+ "letterSpacing": 0.24,
651
+ "lineHeight": 28,
652
+ },
653
+ undefined,
654
+ ]
655
+ }
656
+ themeIntent="body"
657
+ themeLevel="h5"
658
+ themeTypeface="neutral"
659
+ >
660
+ Content 8
661
+ </Text>
662
+ <Text
663
+ allowFontScaling={false}
664
+ style={
665
+ [
666
+ {
667
+ "color": "#001f23",
668
+ "fontFamily": "BeVietnamPro-Regular",
669
+ "fontSize": 16,
670
+ "letterSpacing": 0.48,
671
+ "lineHeight": 24,
672
+ },
673
+ undefined,
674
+ ]
675
+ }
676
+ themeIntent="body"
677
+ themeTypeface="neutral"
678
+ themeVariant="regular"
679
+ >
680
+ Item
681
+ 8
682
+ </Text>
683
+ </View>
684
+ </View>
685
+ <View
686
+ onFocusCapture={[Function]}
687
+ onLayout={[Function]}
688
+ style={null}
689
+ >
690
+ <View
691
+ marginBottom="xxxxlarge"
692
+ style={
693
+ [
694
+ {
695
+ "marginBottom": 56,
696
+ },
697
+ undefined,
698
+ ]
699
+ }
700
+ >
701
+ <Text
702
+ allowFontScaling={false}
703
+ style={
704
+ [
705
+ {
706
+ "color": "#001f23",
707
+ "fontFamily": "BeVietnamPro-SemiBold",
708
+ "fontSize": 18,
709
+ "letterSpacing": 0.24,
710
+ "lineHeight": 28,
711
+ },
712
+ undefined,
713
+ ]
714
+ }
715
+ themeIntent="body"
716
+ themeLevel="h5"
717
+ themeTypeface="neutral"
718
+ >
719
+ Content 9
720
+ </Text>
721
+ <Text
722
+ allowFontScaling={false}
723
+ style={
724
+ [
725
+ {
726
+ "color": "#001f23",
727
+ "fontFamily": "BeVietnamPro-Regular",
728
+ "fontSize": 16,
729
+ "letterSpacing": 0.48,
730
+ "lineHeight": 24,
731
+ },
732
+ undefined,
733
+ ]
734
+ }
735
+ themeIntent="body"
736
+ themeTypeface="neutral"
737
+ themeVariant="regular"
738
+ >
739
+ Item
740
+ 9
741
+ </Text>
742
+ </View>
743
+ </View>
744
+ <View
745
+ style={
746
+ {
747
+ "height": 0,
748
+ }
749
+ }
750
+ />
751
+ </View>
752
+ </RCTScrollView>
753
+ <View
754
+ pointerEvents="box-none"
755
+ style={
756
+ [
757
+ {
758
+ "alignItems": "flex-end",
759
+ "bottom": 0,
760
+ "justifyContent": "flex-end",
761
+ "left": 0,
762
+ "position": "absolute",
763
+ "right": 0,
764
+ "top": 0,
765
+ },
766
+ undefined,
767
+ ]
768
+ }
769
+ >
770
+ <View
771
+ collapsable={false}
772
+ style={
773
+ {
774
+ "opacity": 1,
775
+ }
776
+ }
777
+ >
778
+ <View
779
+ accessibilityValue={
780
+ {
781
+ "max": undefined,
782
+ "min": undefined,
783
+ "now": undefined,
784
+ "text": undefined,
785
+ }
786
+ }
787
+ accessible={true}
788
+ focusable={false}
789
+ onClick={[Function]}
790
+ onLayout={[Function]}
791
+ onResponderGrant={[Function]}
792
+ onResponderMove={[Function]}
793
+ onResponderRelease={[Function]}
794
+ onResponderTerminate={[Function]}
795
+ onResponderTerminationRequest={[Function]}
796
+ onStartShouldSetResponder={[Function]}
797
+ style={
798
+ [
799
+ {
800
+ "alignItems": "center",
801
+ "alignSelf": "flex-start",
802
+ "backgroundColor": "#401960",
803
+ "borderRadius": 999,
804
+ "elevation": 3,
805
+ "flexDirection": "row",
806
+ "justifyContent": "center",
807
+ "padding": 20,
808
+ "shadowColor": "#001f23",
809
+ "shadowOffset": {
810
+ "height": 2,
811
+ "width": 0,
812
+ },
813
+ "shadowOpacity": 0.12,
814
+ "shadowRadius": 4,
815
+ },
816
+ [
817
+ [
818
+ {
819
+ "alignSelf": "flex-end",
820
+ "marginRight": 24,
821
+ "marginTop": 24,
822
+ },
823
+ undefined,
824
+ ],
825
+ {
826
+ "bottom": undefined,
827
+ },
828
+ ],
829
+ ]
830
+ }
831
+ testID="fab"
832
+ >
833
+ <View
834
+ style={
835
+ [
836
+ {},
837
+ [
838
+ {
839
+ "alignItems": "center",
840
+ "height": 24,
841
+ "justifyContent": "center",
842
+ "width": 24,
843
+ },
844
+ undefined,
845
+ ],
846
+ ]
847
+ }
848
+ >
849
+ <HeroIcon
850
+ name="add"
851
+ style={
852
+ [
853
+ {
854
+ "color": "#001f23",
855
+ "fontSize": 16,
856
+ },
857
+ [
858
+ {
859
+ "color": "#ffffff",
860
+ "lineHeight": 24,
861
+ "textAlign": "center",
862
+ "textAlignVertical": "center",
863
+ },
864
+ undefined,
865
+ ],
866
+ ]
867
+ }
868
+ testID="styled-fab-icon"
869
+ themeIntent="text"
870
+ themeSize="xsmall"
871
+ />
872
+ </View>
873
+ <Text
874
+ allowFontScaling={false}
875
+ style={
876
+ [
877
+ {
878
+ "color": "#001f23",
879
+ "fontFamily": "BeVietnamPro-Regular",
880
+ "fontSize": 16,
881
+ "letterSpacing": 0.48,
882
+ "lineHeight": 24,
883
+ },
884
+ [
885
+ {
886
+ "color": "#ffffff",
887
+ "marginHorizontal": 8,
888
+ "textAlign": "center",
889
+ "textAlignVertical": "center",
890
+ },
891
+ undefined,
892
+ ],
893
+ ]
894
+ }
895
+ themeIntent="body"
896
+ themeTypeface="neutral"
897
+ themeVariant="regular"
898
+ >
899
+ Shout out
900
+ </Text>
901
+ </View>
902
+ </View>
903
+ <Modal
904
+ animationType="fade"
905
+ hardwareAccelerated={false}
906
+ statusBarTranslucent={true}
907
+ transparent={true}
908
+ visible={false}
909
+ />
910
+ </View>
911
+ <View
912
+ pointerEvents="box-none"
913
+ position="bottom"
914
+ style={
915
+ [
916
+ {
917
+ "bottom": 0,
918
+ "elevation": 9999,
919
+ "flexDirection": "column-reverse",
920
+ "left": 0,
921
+ "paddingHorizontal": 24,
922
+ "paddingVertical": 16,
923
+ "position": "absolute",
924
+ "right": 0,
925
+ "top": 0,
926
+ },
927
+ undefined,
928
+ ]
929
+ }
930
+ />
931
+ </View>
932
+ `;
933
+
934
+ exports[`Scrollables With FAB [Function ExampleFlatListWithFAB] renders FAB correctly 1`] = `
935
+ <View
936
+ style={
937
+ {
938
+ "flex": 1,
939
+ }
940
+ }
941
+ >
942
+ <RCTScrollView
943
+ data={
944
+ [
945
+ {
946
+ "id": 0,
947
+ "title": "Content 0",
948
+ },
949
+ {
950
+ "id": 1,
951
+ "title": "Content 1",
952
+ },
953
+ {
954
+ "id": 2,
955
+ "title": "Content 2",
956
+ },
957
+ {
958
+ "id": 3,
959
+ "title": "Content 3",
960
+ },
961
+ {
962
+ "id": 4,
963
+ "title": "Content 4",
964
+ },
965
+ {
966
+ "id": 5,
967
+ "title": "Content 5",
968
+ },
969
+ {
970
+ "id": 6,
971
+ "title": "Content 6",
972
+ },
973
+ {
974
+ "id": 7,
975
+ "title": "Content 7",
976
+ },
977
+ {
978
+ "id": 8,
979
+ "title": "Content 8",
980
+ },
981
+ {
982
+ "id": 9,
983
+ "title": "Content 9",
984
+ },
985
+ {
986
+ "id": 10,
987
+ "title": "Content 10",
988
+ },
989
+ {
990
+ "id": 11,
991
+ "title": "Content 11",
992
+ },
993
+ {
994
+ "id": 12,
995
+ "title": "Content 12",
996
+ },
997
+ {
998
+ "id": 13,
999
+ "title": "Content 13",
1000
+ },
1001
+ {
1002
+ "id": 14,
1003
+ "title": "Content 14",
1004
+ },
1005
+ {
1006
+ "id": 15,
1007
+ "title": "Content 15",
1008
+ },
1009
+ {
1010
+ "id": 16,
1011
+ "title": "Content 16",
1012
+ },
1013
+ {
1014
+ "id": 17,
1015
+ "title": "Content 17",
1016
+ },
1017
+ {
1018
+ "id": 18,
1019
+ "title": "Content 18",
1020
+ },
1021
+ {
1022
+ "id": 19,
1023
+ "title": "Content 19",
1024
+ },
1025
+ {
1026
+ "id": 20,
1027
+ "title": "Content 20",
1028
+ },
1029
+ {
1030
+ "id": 21,
1031
+ "title": "Content 21",
1032
+ },
1033
+ {
1034
+ "id": 22,
1035
+ "title": "Content 22",
1036
+ },
1037
+ {
1038
+ "id": 23,
1039
+ "title": "Content 23",
1040
+ },
1041
+ {
1042
+ "id": 24,
1043
+ "title": "Content 24",
1044
+ },
1045
+ {
1046
+ "id": 25,
1047
+ "title": "Content 25",
1048
+ },
1049
+ {
1050
+ "id": 26,
1051
+ "title": "Content 26",
1052
+ },
1053
+ {
1054
+ "id": 27,
1055
+ "title": "Content 27",
1056
+ },
1057
+ {
1058
+ "id": 28,
1059
+ "title": "Content 28",
1060
+ },
1061
+ {
1062
+ "id": 29,
1063
+ "title": "Content 29",
1064
+ },
1065
+ ]
1066
+ }
1067
+ getItem={[Function]}
1068
+ getItemCount={[Function]}
1069
+ keyExtractor={[Function]}
1070
+ onContentSizeChange={[Function]}
1071
+ onLayout={[Function]}
1072
+ onMomentumScrollBegin={[Function]}
1073
+ onMomentumScrollEnd={[Function]}
1074
+ onScroll={[Function]}
1075
+ onScrollBeginDrag={[Function]}
1076
+ onScrollEndDrag={[Function]}
1077
+ removeClippedSubviews={false}
1078
+ renderItem={[Function]}
1079
+ scrollEventThrottle={100}
1080
+ stickyHeaderIndices={[]}
1081
+ testID="scrollable-with-fab"
1082
+ viewabilityConfigCallbackPairs={[]}
1083
+ >
1084
+ <View>
1085
+ <View
1086
+ onFocusCapture={[Function]}
1087
+ onLayout={[Function]}
1088
+ style={null}
1089
+ >
1090
+ <View
1091
+ marginBottom="xxxxlarge"
1092
+ style={
1093
+ [
1094
+ {
1095
+ "marginBottom": 56,
1096
+ },
1097
+ undefined,
1098
+ ]
1099
+ }
1100
+ >
1101
+ <Text
1102
+ allowFontScaling={false}
1103
+ style={
1104
+ [
1105
+ {
1106
+ "color": "#001f23",
1107
+ "fontFamily": "BeVietnamPro-SemiBold",
1108
+ "fontSize": 18,
1109
+ "letterSpacing": 0.24,
1110
+ "lineHeight": 28,
1111
+ },
1112
+ undefined,
1113
+ ]
1114
+ }
1115
+ themeIntent="body"
1116
+ themeLevel="h5"
1117
+ themeTypeface="neutral"
1118
+ >
1119
+ Content 0
1120
+ </Text>
1121
+ <Text
1122
+ allowFontScaling={false}
1123
+ style={
1124
+ [
1125
+ {
1126
+ "color": "#001f23",
1127
+ "fontFamily": "BeVietnamPro-Regular",
1128
+ "fontSize": 16,
1129
+ "letterSpacing": 0.48,
1130
+ "lineHeight": 24,
1131
+ },
1132
+ undefined,
1133
+ ]
1134
+ }
1135
+ themeIntent="body"
1136
+ themeTypeface="neutral"
1137
+ themeVariant="regular"
1138
+ >
1139
+ Item
1140
+ 0
1141
+ </Text>
1142
+ </View>
1143
+ </View>
1144
+ <View
1145
+ onFocusCapture={[Function]}
1146
+ onLayout={[Function]}
1147
+ style={null}
1148
+ >
1149
+ <View
1150
+ marginBottom="xxxxlarge"
1151
+ style={
1152
+ [
1153
+ {
1154
+ "marginBottom": 56,
1155
+ },
1156
+ undefined,
1157
+ ]
1158
+ }
1159
+ >
1160
+ <Text
1161
+ allowFontScaling={false}
1162
+ style={
1163
+ [
1164
+ {
1165
+ "color": "#001f23",
1166
+ "fontFamily": "BeVietnamPro-SemiBold",
1167
+ "fontSize": 18,
1168
+ "letterSpacing": 0.24,
1169
+ "lineHeight": 28,
1170
+ },
1171
+ undefined,
1172
+ ]
1173
+ }
1174
+ themeIntent="body"
1175
+ themeLevel="h5"
1176
+ themeTypeface="neutral"
1177
+ >
1178
+ Content 1
1179
+ </Text>
1180
+ <Text
1181
+ allowFontScaling={false}
1182
+ style={
1183
+ [
1184
+ {
1185
+ "color": "#001f23",
1186
+ "fontFamily": "BeVietnamPro-Regular",
1187
+ "fontSize": 16,
1188
+ "letterSpacing": 0.48,
1189
+ "lineHeight": 24,
1190
+ },
1191
+ undefined,
1192
+ ]
1193
+ }
1194
+ themeIntent="body"
1195
+ themeTypeface="neutral"
1196
+ themeVariant="regular"
1197
+ >
1198
+ Item
1199
+ 1
1200
+ </Text>
1201
+ </View>
1202
+ </View>
1203
+ <View
1204
+ onFocusCapture={[Function]}
1205
+ onLayout={[Function]}
1206
+ style={null}
1207
+ >
1208
+ <View
1209
+ marginBottom="xxxxlarge"
1210
+ style={
1211
+ [
1212
+ {
1213
+ "marginBottom": 56,
1214
+ },
1215
+ undefined,
1216
+ ]
1217
+ }
1218
+ >
1219
+ <Text
1220
+ allowFontScaling={false}
1221
+ style={
1222
+ [
1223
+ {
1224
+ "color": "#001f23",
1225
+ "fontFamily": "BeVietnamPro-SemiBold",
1226
+ "fontSize": 18,
1227
+ "letterSpacing": 0.24,
1228
+ "lineHeight": 28,
1229
+ },
1230
+ undefined,
1231
+ ]
1232
+ }
1233
+ themeIntent="body"
1234
+ themeLevel="h5"
1235
+ themeTypeface="neutral"
1236
+ >
1237
+ Content 2
1238
+ </Text>
1239
+ <Text
1240
+ allowFontScaling={false}
1241
+ style={
1242
+ [
1243
+ {
1244
+ "color": "#001f23",
1245
+ "fontFamily": "BeVietnamPro-Regular",
1246
+ "fontSize": 16,
1247
+ "letterSpacing": 0.48,
1248
+ "lineHeight": 24,
1249
+ },
1250
+ undefined,
1251
+ ]
1252
+ }
1253
+ themeIntent="body"
1254
+ themeTypeface="neutral"
1255
+ themeVariant="regular"
1256
+ >
1257
+ Item
1258
+ 2
1259
+ </Text>
1260
+ </View>
1261
+ </View>
1262
+ <View
1263
+ onFocusCapture={[Function]}
1264
+ onLayout={[Function]}
1265
+ style={null}
1266
+ >
1267
+ <View
1268
+ marginBottom="xxxxlarge"
1269
+ style={
1270
+ [
1271
+ {
1272
+ "marginBottom": 56,
1273
+ },
1274
+ undefined,
1275
+ ]
1276
+ }
1277
+ >
1278
+ <Text
1279
+ allowFontScaling={false}
1280
+ style={
1281
+ [
1282
+ {
1283
+ "color": "#001f23",
1284
+ "fontFamily": "BeVietnamPro-SemiBold",
1285
+ "fontSize": 18,
1286
+ "letterSpacing": 0.24,
1287
+ "lineHeight": 28,
1288
+ },
1289
+ undefined,
1290
+ ]
1291
+ }
1292
+ themeIntent="body"
1293
+ themeLevel="h5"
1294
+ themeTypeface="neutral"
1295
+ >
1296
+ Content 3
1297
+ </Text>
1298
+ <Text
1299
+ allowFontScaling={false}
1300
+ style={
1301
+ [
1302
+ {
1303
+ "color": "#001f23",
1304
+ "fontFamily": "BeVietnamPro-Regular",
1305
+ "fontSize": 16,
1306
+ "letterSpacing": 0.48,
1307
+ "lineHeight": 24,
1308
+ },
1309
+ undefined,
1310
+ ]
1311
+ }
1312
+ themeIntent="body"
1313
+ themeTypeface="neutral"
1314
+ themeVariant="regular"
1315
+ >
1316
+ Item
1317
+ 3
1318
+ </Text>
1319
+ </View>
1320
+ </View>
1321
+ <View
1322
+ onFocusCapture={[Function]}
1323
+ onLayout={[Function]}
1324
+ style={null}
1325
+ >
1326
+ <View
1327
+ marginBottom="xxxxlarge"
1328
+ style={
1329
+ [
1330
+ {
1331
+ "marginBottom": 56,
1332
+ },
1333
+ undefined,
1334
+ ]
1335
+ }
1336
+ >
1337
+ <Text
1338
+ allowFontScaling={false}
1339
+ style={
1340
+ [
1341
+ {
1342
+ "color": "#001f23",
1343
+ "fontFamily": "BeVietnamPro-SemiBold",
1344
+ "fontSize": 18,
1345
+ "letterSpacing": 0.24,
1346
+ "lineHeight": 28,
1347
+ },
1348
+ undefined,
1349
+ ]
1350
+ }
1351
+ themeIntent="body"
1352
+ themeLevel="h5"
1353
+ themeTypeface="neutral"
1354
+ >
1355
+ Content 4
1356
+ </Text>
1357
+ <Text
1358
+ allowFontScaling={false}
1359
+ style={
1360
+ [
1361
+ {
1362
+ "color": "#001f23",
1363
+ "fontFamily": "BeVietnamPro-Regular",
1364
+ "fontSize": 16,
1365
+ "letterSpacing": 0.48,
1366
+ "lineHeight": 24,
1367
+ },
1368
+ undefined,
1369
+ ]
1370
+ }
1371
+ themeIntent="body"
1372
+ themeTypeface="neutral"
1373
+ themeVariant="regular"
1374
+ >
1375
+ Item
1376
+ 4
1377
+ </Text>
1378
+ </View>
1379
+ </View>
1380
+ <View
1381
+ onFocusCapture={[Function]}
1382
+ onLayout={[Function]}
1383
+ style={null}
1384
+ >
1385
+ <View
1386
+ marginBottom="xxxxlarge"
1387
+ style={
1388
+ [
1389
+ {
1390
+ "marginBottom": 56,
1391
+ },
1392
+ undefined,
1393
+ ]
1394
+ }
1395
+ >
1396
+ <Text
1397
+ allowFontScaling={false}
1398
+ style={
1399
+ [
1400
+ {
1401
+ "color": "#001f23",
1402
+ "fontFamily": "BeVietnamPro-SemiBold",
1403
+ "fontSize": 18,
1404
+ "letterSpacing": 0.24,
1405
+ "lineHeight": 28,
1406
+ },
1407
+ undefined,
1408
+ ]
1409
+ }
1410
+ themeIntent="body"
1411
+ themeLevel="h5"
1412
+ themeTypeface="neutral"
1413
+ >
1414
+ Content 5
1415
+ </Text>
1416
+ <Text
1417
+ allowFontScaling={false}
1418
+ style={
1419
+ [
1420
+ {
1421
+ "color": "#001f23",
1422
+ "fontFamily": "BeVietnamPro-Regular",
1423
+ "fontSize": 16,
1424
+ "letterSpacing": 0.48,
1425
+ "lineHeight": 24,
1426
+ },
1427
+ undefined,
1428
+ ]
1429
+ }
1430
+ themeIntent="body"
1431
+ themeTypeface="neutral"
1432
+ themeVariant="regular"
1433
+ >
1434
+ Item
1435
+ 5
1436
+ </Text>
1437
+ </View>
1438
+ </View>
1439
+ <View
1440
+ onFocusCapture={[Function]}
1441
+ onLayout={[Function]}
1442
+ style={null}
1443
+ >
1444
+ <View
1445
+ marginBottom="xxxxlarge"
1446
+ style={
1447
+ [
1448
+ {
1449
+ "marginBottom": 56,
1450
+ },
1451
+ undefined,
1452
+ ]
1453
+ }
1454
+ >
1455
+ <Text
1456
+ allowFontScaling={false}
1457
+ style={
1458
+ [
1459
+ {
1460
+ "color": "#001f23",
1461
+ "fontFamily": "BeVietnamPro-SemiBold",
1462
+ "fontSize": 18,
1463
+ "letterSpacing": 0.24,
1464
+ "lineHeight": 28,
1465
+ },
1466
+ undefined,
1467
+ ]
1468
+ }
1469
+ themeIntent="body"
1470
+ themeLevel="h5"
1471
+ themeTypeface="neutral"
1472
+ >
1473
+ Content 6
1474
+ </Text>
1475
+ <Text
1476
+ allowFontScaling={false}
1477
+ style={
1478
+ [
1479
+ {
1480
+ "color": "#001f23",
1481
+ "fontFamily": "BeVietnamPro-Regular",
1482
+ "fontSize": 16,
1483
+ "letterSpacing": 0.48,
1484
+ "lineHeight": 24,
1485
+ },
1486
+ undefined,
1487
+ ]
1488
+ }
1489
+ themeIntent="body"
1490
+ themeTypeface="neutral"
1491
+ themeVariant="regular"
1492
+ >
1493
+ Item
1494
+ 6
1495
+ </Text>
1496
+ </View>
1497
+ </View>
1498
+ <View
1499
+ onFocusCapture={[Function]}
1500
+ onLayout={[Function]}
1501
+ style={null}
1502
+ >
1503
+ <View
1504
+ marginBottom="xxxxlarge"
1505
+ style={
1506
+ [
1507
+ {
1508
+ "marginBottom": 56,
1509
+ },
1510
+ undefined,
1511
+ ]
1512
+ }
1513
+ >
1514
+ <Text
1515
+ allowFontScaling={false}
1516
+ style={
1517
+ [
1518
+ {
1519
+ "color": "#001f23",
1520
+ "fontFamily": "BeVietnamPro-SemiBold",
1521
+ "fontSize": 18,
1522
+ "letterSpacing": 0.24,
1523
+ "lineHeight": 28,
1524
+ },
1525
+ undefined,
1526
+ ]
1527
+ }
1528
+ themeIntent="body"
1529
+ themeLevel="h5"
1530
+ themeTypeface="neutral"
1531
+ >
1532
+ Content 7
1533
+ </Text>
1534
+ <Text
1535
+ allowFontScaling={false}
1536
+ style={
1537
+ [
1538
+ {
1539
+ "color": "#001f23",
1540
+ "fontFamily": "BeVietnamPro-Regular",
1541
+ "fontSize": 16,
1542
+ "letterSpacing": 0.48,
1543
+ "lineHeight": 24,
1544
+ },
1545
+ undefined,
1546
+ ]
1547
+ }
1548
+ themeIntent="body"
1549
+ themeTypeface="neutral"
1550
+ themeVariant="regular"
1551
+ >
1552
+ Item
1553
+ 7
1554
+ </Text>
1555
+ </View>
1556
+ </View>
1557
+ <View
1558
+ onFocusCapture={[Function]}
1559
+ onLayout={[Function]}
1560
+ style={null}
1561
+ >
1562
+ <View
1563
+ marginBottom="xxxxlarge"
1564
+ style={
1565
+ [
1566
+ {
1567
+ "marginBottom": 56,
1568
+ },
1569
+ undefined,
1570
+ ]
1571
+ }
1572
+ >
1573
+ <Text
1574
+ allowFontScaling={false}
1575
+ style={
1576
+ [
1577
+ {
1578
+ "color": "#001f23",
1579
+ "fontFamily": "BeVietnamPro-SemiBold",
1580
+ "fontSize": 18,
1581
+ "letterSpacing": 0.24,
1582
+ "lineHeight": 28,
1583
+ },
1584
+ undefined,
1585
+ ]
1586
+ }
1587
+ themeIntent="body"
1588
+ themeLevel="h5"
1589
+ themeTypeface="neutral"
1590
+ >
1591
+ Content 8
1592
+ </Text>
1593
+ <Text
1594
+ allowFontScaling={false}
1595
+ style={
1596
+ [
1597
+ {
1598
+ "color": "#001f23",
1599
+ "fontFamily": "BeVietnamPro-Regular",
1600
+ "fontSize": 16,
1601
+ "letterSpacing": 0.48,
1602
+ "lineHeight": 24,
1603
+ },
1604
+ undefined,
1605
+ ]
1606
+ }
1607
+ themeIntent="body"
1608
+ themeTypeface="neutral"
1609
+ themeVariant="regular"
1610
+ >
1611
+ Item
1612
+ 8
1613
+ </Text>
1614
+ </View>
1615
+ </View>
1616
+ <View
1617
+ onFocusCapture={[Function]}
1618
+ onLayout={[Function]}
1619
+ style={null}
1620
+ >
1621
+ <View
1622
+ marginBottom="xxxxlarge"
1623
+ style={
1624
+ [
1625
+ {
1626
+ "marginBottom": 56,
1627
+ },
1628
+ undefined,
1629
+ ]
1630
+ }
1631
+ >
1632
+ <Text
1633
+ allowFontScaling={false}
1634
+ style={
1635
+ [
1636
+ {
1637
+ "color": "#001f23",
1638
+ "fontFamily": "BeVietnamPro-SemiBold",
1639
+ "fontSize": 18,
1640
+ "letterSpacing": 0.24,
1641
+ "lineHeight": 28,
1642
+ },
1643
+ undefined,
1644
+ ]
1645
+ }
1646
+ themeIntent="body"
1647
+ themeLevel="h5"
1648
+ themeTypeface="neutral"
1649
+ >
1650
+ Content 9
1651
+ </Text>
1652
+ <Text
1653
+ allowFontScaling={false}
1654
+ style={
1655
+ [
1656
+ {
1657
+ "color": "#001f23",
1658
+ "fontFamily": "BeVietnamPro-Regular",
1659
+ "fontSize": 16,
1660
+ "letterSpacing": 0.48,
1661
+ "lineHeight": 24,
1662
+ },
1663
+ undefined,
1664
+ ]
1665
+ }
1666
+ themeIntent="body"
1667
+ themeTypeface="neutral"
1668
+ themeVariant="regular"
1669
+ >
1670
+ Item
1671
+ 9
1672
+ </Text>
1673
+ </View>
1674
+ </View>
1675
+ <View
1676
+ style={
1677
+ {
1678
+ "height": 0,
1679
+ }
1680
+ }
1681
+ />
1682
+ </View>
1683
+ </RCTScrollView>
1684
+ <View
1685
+ accessibilityValue={
1686
+ {
1687
+ "max": undefined,
1688
+ "min": undefined,
1689
+ "now": undefined,
1690
+ "text": undefined,
1691
+ }
1692
+ }
1693
+ accessible={true}
1694
+ focusable={false}
1695
+ onClick={[Function]}
1696
+ onLayout={[Function]}
1697
+ onResponderGrant={[Function]}
1698
+ onResponderMove={[Function]}
1699
+ onResponderRelease={[Function]}
1700
+ onResponderTerminate={[Function]}
1701
+ onResponderTerminationRequest={[Function]}
1702
+ onStartShouldSetResponder={[Function]}
1703
+ style={
1704
+ [
1705
+ {
1706
+ "alignItems": "center",
1707
+ "alignSelf": "flex-start",
1708
+ "backgroundColor": "#401960",
1709
+ "borderRadius": 999,
1710
+ "elevation": 3,
1711
+ "flexDirection": "row",
1712
+ "justifyContent": "center",
1713
+ "padding": 20,
1714
+ "shadowColor": "#001f23",
1715
+ "shadowOffset": {
1716
+ "height": 2,
1717
+ "width": 0,
1718
+ },
1719
+ "shadowOpacity": 0.12,
1720
+ "shadowRadius": 4,
1721
+ },
1722
+ [
1723
+ undefined,
1724
+ {
1725
+ "bottom": undefined,
1726
+ },
1727
+ ],
1728
+ ]
1729
+ }
1730
+ >
1731
+ <View
1732
+ style={
1733
+ [
1734
+ {},
1735
+ [
1736
+ {
1737
+ "alignItems": "center",
1738
+ "height": 24,
1739
+ "justifyContent": "center",
1740
+ "width": 24,
1741
+ },
1742
+ undefined,
1743
+ ],
1744
+ ]
1745
+ }
1746
+ >
1747
+ <HeroIcon
1748
+ name="speaker"
1749
+ style={
1750
+ [
1751
+ {
1752
+ "color": "#001f23",
1753
+ "fontSize": 16,
1754
+ },
1755
+ [
1756
+ {
1757
+ "color": "#ffffff",
1758
+ "lineHeight": 24,
1759
+ "textAlign": "center",
1760
+ "textAlignVertical": "center",
1761
+ },
1762
+ undefined,
1763
+ ],
1764
+ ]
1765
+ }
1766
+ testID="styled-fab-icon"
1767
+ themeIntent="text"
1768
+ themeSize="xsmall"
1769
+ />
1770
+ </View>
1771
+ <Text
1772
+ allowFontScaling={false}
1773
+ style={
1774
+ [
1775
+ {
1776
+ "color": "#001f23",
1777
+ "fontFamily": "BeVietnamPro-Regular",
1778
+ "fontSize": 16,
1779
+ "letterSpacing": 0.48,
1780
+ "lineHeight": 24,
1781
+ },
1782
+ [
1783
+ {
1784
+ "color": "#ffffff",
1785
+ "marginHorizontal": 8,
1786
+ "textAlign": "center",
1787
+ "textAlignVertical": "center",
1788
+ },
1789
+ undefined,
1790
+ ],
1791
+ ]
1792
+ }
1793
+ themeIntent="body"
1794
+ themeTypeface="neutral"
1795
+ themeVariant="regular"
1796
+ >
1797
+ Shout out
1798
+ </Text>
1799
+ </View>
1800
+ <View
1801
+ pointerEvents="box-none"
1802
+ position="bottom"
1803
+ style={
1804
+ [
1805
+ {
1806
+ "bottom": 0,
1807
+ "elevation": 9999,
1808
+ "flexDirection": "column-reverse",
1809
+ "left": 0,
1810
+ "paddingHorizontal": 24,
1811
+ "paddingVertical": 16,
1812
+ "position": "absolute",
1813
+ "right": 0,
1814
+ "top": 0,
1815
+ },
1816
+ undefined,
1817
+ ]
1818
+ }
1819
+ />
1820
+ </View>
1821
+ `;
1822
+
1823
+ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders ActionGroup correctly 1`] = `
1824
+ <View
1825
+ style={
1826
+ {
1827
+ "flex": 1,
1828
+ }
1829
+ }
1830
+ >
1831
+ <RCTScrollView
1832
+ onScroll={[Function]}
1833
+ scrollEventThrottle={100}
1834
+ testID="scrollable-with-fab"
1835
+ >
1836
+ <View>
1837
+ <View
1838
+ justifyContent="space-between"
1839
+ style={
1840
+ [
1841
+ {
1842
+ "justifyContent": "space-between",
1843
+ },
1844
+ {
1845
+ "height": 2000,
1846
+ },
1847
+ ]
1848
+ }
1849
+ >
1850
+ <Text
1851
+ allowFontScaling={false}
1852
+ style={
1853
+ [
1854
+ {
1855
+ "color": "#001f23",
1856
+ "fontFamily": "BeVietnamPro-Regular",
1857
+ "fontSize": 16,
1858
+ "letterSpacing": 0.48,
1859
+ "lineHeight": 24,
1860
+ },
1861
+ undefined,
1862
+ ]
1863
+ }
1864
+ themeIntent="body"
1865
+ themeTypeface="neutral"
1866
+ themeVariant="regular"
1867
+ >
1868
+ Content 1
1869
+ </Text>
1870
+ <Text
1871
+ allowFontScaling={false}
1872
+ style={
1873
+ [
1874
+ {
1875
+ "color": "#001f23",
1876
+ "fontFamily": "BeVietnamPro-Regular",
1877
+ "fontSize": 16,
1878
+ "letterSpacing": 0.48,
1879
+ "lineHeight": 24,
1880
+ },
1881
+ undefined,
1882
+ ]
1883
+ }
1884
+ themeIntent="body"
1885
+ themeTypeface="neutral"
1886
+ themeVariant="regular"
1887
+ >
1888
+ Content 2
1889
+ </Text>
1890
+ <Text
1891
+ allowFontScaling={false}
1892
+ style={
1893
+ [
1894
+ {
1895
+ "color": "#001f23",
1896
+ "fontFamily": "BeVietnamPro-Regular",
1897
+ "fontSize": 16,
1898
+ "letterSpacing": 0.48,
1899
+ "lineHeight": 24,
1900
+ },
1901
+ undefined,
1902
+ ]
1903
+ }
1904
+ themeIntent="body"
1905
+ themeTypeface="neutral"
1906
+ themeVariant="regular"
1907
+ >
1908
+ Content 3
1909
+ </Text>
1910
+ </View>
1911
+ </View>
1912
+ </RCTScrollView>
1913
+ <View
1914
+ pointerEvents="box-none"
1915
+ style={
1916
+ [
1917
+ {
1918
+ "alignItems": "flex-end",
1919
+ "bottom": 0,
1920
+ "justifyContent": "flex-end",
1921
+ "left": 0,
1922
+ "position": "absolute",
1923
+ "right": 0,
1924
+ "top": 0,
1925
+ },
1926
+ undefined,
1927
+ ]
1928
+ }
1929
+ >
1930
+ <View
1931
+ collapsable={false}
1932
+ style={
1933
+ {
1934
+ "opacity": 1,
1935
+ }
1936
+ }
1937
+ >
1938
+ <View
1939
+ accessibilityValue={
1940
+ {
1941
+ "max": undefined,
1942
+ "min": undefined,
1943
+ "now": undefined,
1944
+ "text": undefined,
1945
+ }
1946
+ }
1947
+ accessible={true}
1948
+ focusable={false}
1949
+ onClick={[Function]}
1950
+ onLayout={[Function]}
1951
+ onResponderGrant={[Function]}
1952
+ onResponderMove={[Function]}
1953
+ onResponderRelease={[Function]}
1954
+ onResponderTerminate={[Function]}
1955
+ onResponderTerminationRequest={[Function]}
1956
+ onStartShouldSetResponder={[Function]}
1957
+ style={
1958
+ [
1959
+ {
1960
+ "alignItems": "center",
1961
+ "alignSelf": "flex-start",
1962
+ "backgroundColor": "#401960",
1963
+ "borderRadius": 999,
1964
+ "elevation": 3,
1965
+ "flexDirection": "row",
1966
+ "justifyContent": "center",
1967
+ "padding": 20,
1968
+ "shadowColor": "#001f23",
1969
+ "shadowOffset": {
1970
+ "height": 2,
1971
+ "width": 0,
1972
+ },
1973
+ "shadowOpacity": 0.12,
1974
+ "shadowRadius": 4,
1975
+ },
1976
+ [
1977
+ [
1978
+ {
1979
+ "alignSelf": "flex-end",
1980
+ "marginRight": 24,
1981
+ "marginTop": 24,
1982
+ },
1983
+ undefined,
1984
+ ],
1985
+ {
1986
+ "bottom": undefined,
1987
+ },
1988
+ ],
1989
+ ]
1990
+ }
1991
+ testID="fab"
1992
+ >
1993
+ <View
1994
+ style={
1995
+ [
1996
+ {},
1997
+ [
1998
+ {
1999
+ "alignItems": "center",
2000
+ "height": 24,
2001
+ "justifyContent": "center",
2002
+ "width": 24,
2003
+ },
2004
+ undefined,
2005
+ ],
2006
+ ]
2007
+ }
2008
+ >
2009
+ <HeroIcon
2010
+ name="add"
2011
+ style={
2012
+ [
2013
+ {
2014
+ "color": "#001f23",
2015
+ "fontSize": 16,
2016
+ },
2017
+ [
2018
+ {
2019
+ "color": "#ffffff",
2020
+ "lineHeight": 24,
2021
+ "textAlign": "center",
2022
+ "textAlignVertical": "center",
2023
+ },
2024
+ undefined,
2025
+ ],
2026
+ ]
2027
+ }
2028
+ testID="styled-fab-icon"
2029
+ themeIntent="text"
2030
+ themeSize="xsmall"
2031
+ />
2032
+ </View>
2033
+ <Text
2034
+ allowFontScaling={false}
2035
+ style={
2036
+ [
2037
+ {
2038
+ "color": "#001f23",
2039
+ "fontFamily": "BeVietnamPro-Regular",
2040
+ "fontSize": 16,
2041
+ "letterSpacing": 0.48,
2042
+ "lineHeight": 24,
2043
+ },
2044
+ [
2045
+ {
2046
+ "color": "#ffffff",
2047
+ "marginHorizontal": 8,
2048
+ "textAlign": "center",
2049
+ "textAlignVertical": "center",
2050
+ },
2051
+ undefined,
2052
+ ],
2053
+ ]
2054
+ }
2055
+ themeIntent="body"
2056
+ themeTypeface="neutral"
2057
+ themeVariant="regular"
2058
+ >
2059
+ Shout out
2060
+ </Text>
2061
+ </View>
2062
+ </View>
2063
+ <Modal
2064
+ animationType="fade"
2065
+ hardwareAccelerated={false}
2066
+ statusBarTranslucent={true}
2067
+ transparent={true}
2068
+ visible={false}
2069
+ />
2070
+ </View>
2071
+ <View
2072
+ pointerEvents="box-none"
2073
+ position="bottom"
2074
+ style={
2075
+ [
2076
+ {
2077
+ "bottom": 0,
2078
+ "elevation": 9999,
2079
+ "flexDirection": "column-reverse",
2080
+ "left": 0,
2081
+ "paddingHorizontal": 24,
2082
+ "paddingVertical": 16,
2083
+ "position": "absolute",
2084
+ "right": 0,
2085
+ "top": 0,
2086
+ },
2087
+ undefined,
2088
+ ]
2089
+ }
2090
+ />
2091
+ </View>
2092
+ `;
2093
+
2094
+ exports[`Scrollables With FAB [Function ExampleScrollViewWithFAB] renders FAB correctly 1`] = `
2095
+ <View
2096
+ style={
2097
+ {
2098
+ "flex": 1,
2099
+ }
2100
+ }
2101
+ >
2102
+ <RCTScrollView
2103
+ onScroll={[Function]}
2104
+ scrollEventThrottle={100}
2105
+ testID="scrollable-with-fab"
2106
+ >
2107
+ <View>
2108
+ <View
2109
+ justifyContent="space-between"
2110
+ style={
2111
+ [
2112
+ {
2113
+ "justifyContent": "space-between",
2114
+ },
2115
+ {
2116
+ "height": 2000,
2117
+ },
2118
+ ]
2119
+ }
2120
+ >
2121
+ <Text
2122
+ allowFontScaling={false}
2123
+ style={
2124
+ [
2125
+ {
2126
+ "color": "#001f23",
2127
+ "fontFamily": "BeVietnamPro-Regular",
2128
+ "fontSize": 16,
2129
+ "letterSpacing": 0.48,
2130
+ "lineHeight": 24,
2131
+ },
2132
+ undefined,
2133
+ ]
2134
+ }
2135
+ themeIntent="body"
2136
+ themeTypeface="neutral"
2137
+ themeVariant="regular"
2138
+ >
2139
+ Content 1
2140
+ </Text>
2141
+ <Text
2142
+ allowFontScaling={false}
2143
+ style={
2144
+ [
2145
+ {
2146
+ "color": "#001f23",
2147
+ "fontFamily": "BeVietnamPro-Regular",
2148
+ "fontSize": 16,
2149
+ "letterSpacing": 0.48,
2150
+ "lineHeight": 24,
2151
+ },
2152
+ undefined,
2153
+ ]
2154
+ }
2155
+ themeIntent="body"
2156
+ themeTypeface="neutral"
2157
+ themeVariant="regular"
2158
+ >
2159
+ Content 2
2160
+ </Text>
2161
+ <Text
2162
+ allowFontScaling={false}
2163
+ style={
2164
+ [
2165
+ {
2166
+ "color": "#001f23",
2167
+ "fontFamily": "BeVietnamPro-Regular",
2168
+ "fontSize": 16,
2169
+ "letterSpacing": 0.48,
2170
+ "lineHeight": 24,
2171
+ },
2172
+ undefined,
2173
+ ]
2174
+ }
2175
+ themeIntent="body"
2176
+ themeTypeface="neutral"
2177
+ themeVariant="regular"
2178
+ >
2179
+ Content 3
2180
+ </Text>
2181
+ </View>
2182
+ </View>
2183
+ </RCTScrollView>
2184
+ <View
2185
+ accessibilityValue={
2186
+ {
2187
+ "max": undefined,
2188
+ "min": undefined,
2189
+ "now": undefined,
2190
+ "text": undefined,
2191
+ }
2192
+ }
2193
+ accessible={true}
2194
+ focusable={false}
2195
+ onClick={[Function]}
2196
+ onLayout={[Function]}
2197
+ onResponderGrant={[Function]}
2198
+ onResponderMove={[Function]}
2199
+ onResponderRelease={[Function]}
2200
+ onResponderTerminate={[Function]}
2201
+ onResponderTerminationRequest={[Function]}
2202
+ onStartShouldSetResponder={[Function]}
2203
+ style={
2204
+ [
2205
+ {
2206
+ "alignItems": "center",
2207
+ "alignSelf": "flex-start",
2208
+ "backgroundColor": "#401960",
2209
+ "borderRadius": 999,
2210
+ "elevation": 3,
2211
+ "flexDirection": "row",
2212
+ "justifyContent": "center",
2213
+ "padding": 20,
2214
+ "shadowColor": "#001f23",
2215
+ "shadowOffset": {
2216
+ "height": 2,
2217
+ "width": 0,
2218
+ },
2219
+ "shadowOpacity": 0.12,
2220
+ "shadowRadius": 4,
2221
+ },
2222
+ [
2223
+ undefined,
2224
+ {
2225
+ "bottom": undefined,
2226
+ },
2227
+ ],
2228
+ ]
2229
+ }
2230
+ >
2231
+ <View
2232
+ style={
2233
+ [
2234
+ {},
2235
+ [
2236
+ {
2237
+ "alignItems": "center",
2238
+ "height": 24,
2239
+ "justifyContent": "center",
2240
+ "width": 24,
2241
+ },
2242
+ undefined,
2243
+ ],
2244
+ ]
2245
+ }
2246
+ >
2247
+ <HeroIcon
2248
+ name="speaker"
2249
+ style={
2250
+ [
2251
+ {
2252
+ "color": "#001f23",
2253
+ "fontSize": 16,
2254
+ },
2255
+ [
2256
+ {
2257
+ "color": "#ffffff",
2258
+ "lineHeight": 24,
2259
+ "textAlign": "center",
2260
+ "textAlignVertical": "center",
2261
+ },
2262
+ undefined,
2263
+ ],
2264
+ ]
2265
+ }
2266
+ testID="styled-fab-icon"
2267
+ themeIntent="text"
2268
+ themeSize="xsmall"
2269
+ />
2270
+ </View>
2271
+ <Text
2272
+ allowFontScaling={false}
2273
+ style={
2274
+ [
2275
+ {
2276
+ "color": "#001f23",
2277
+ "fontFamily": "BeVietnamPro-Regular",
2278
+ "fontSize": 16,
2279
+ "letterSpacing": 0.48,
2280
+ "lineHeight": 24,
2281
+ },
2282
+ [
2283
+ {
2284
+ "color": "#ffffff",
2285
+ "marginHorizontal": 8,
2286
+ "textAlign": "center",
2287
+ "textAlignVertical": "center",
2288
+ },
2289
+ undefined,
2290
+ ],
2291
+ ]
2292
+ }
2293
+ themeIntent="body"
2294
+ themeTypeface="neutral"
2295
+ themeVariant="regular"
2296
+ >
2297
+ Shout out
2298
+ </Text>
2299
+ </View>
2300
+ <View
2301
+ pointerEvents="box-none"
2302
+ position="bottom"
2303
+ style={
2304
+ [
2305
+ {
2306
+ "bottom": 0,
2307
+ "elevation": 9999,
2308
+ "flexDirection": "column-reverse",
2309
+ "left": 0,
2310
+ "paddingHorizontal": 24,
2311
+ "paddingVertical": 16,
2312
+ "position": "absolute",
2313
+ "right": 0,
2314
+ "top": 0,
2315
+ },
2316
+ undefined,
2317
+ ]
2318
+ }
2319
+ />
2320
+ </View>
2321
+ `;
2322
+
2323
+ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders ActionGroup correctly 1`] = `
2324
+ <View
2325
+ style={
2326
+ {
2327
+ "flex": 1,
2328
+ }
2329
+ }
2330
+ >
2331
+ <RCTScrollView
2332
+ data={
2333
+ [
2334
+ {
2335
+ "data": [
2336
+ "Content 1",
2337
+ "Content 2",
2338
+ "Content 3",
2339
+ "Content 4",
2340
+ ],
2341
+ "title": "Title 1",
2342
+ },
2343
+ {
2344
+ "data": [
2345
+ "Content 5",
2346
+ "Content 6",
2347
+ "Content 7",
2348
+ ],
2349
+ "title": "Title 2",
2350
+ },
2351
+ ]
2352
+ }
2353
+ getItem={[Function]}
2354
+ getItemCount={[Function]}
2355
+ keyExtractor={[Function]}
2356
+ onContentSizeChange={[Function]}
2357
+ onLayout={[Function]}
2358
+ onMomentumScrollBegin={[Function]}
2359
+ onMomentumScrollEnd={[Function]}
2360
+ onScroll={[Function]}
2361
+ onScrollBeginDrag={[Function]}
2362
+ onScrollEndDrag={[Function]}
2363
+ renderItem={[Function]}
2364
+ scrollEventThrottle={100}
2365
+ stickyHeaderIndices={
2366
+ [
2367
+ 0,
2368
+ 6,
2369
+ ]
2370
+ }
2371
+ testID="scrollable-with-fab"
2372
+ >
2373
+ <View>
2374
+ <View
2375
+ onFocusCapture={[Function]}
2376
+ onLayout={[Function]}
2377
+ style={null}
2378
+ >
2379
+ <View
2380
+ style={
2381
+ [
2382
+ {
2383
+ "alignContent": "center",
2384
+ "backgroundColor": "#f6f6f7",
2385
+ "display": "flex",
2386
+ "flexDirection": "row",
2387
+ "justifyContent": "space-between",
2388
+ "marginBottom": 16,
2389
+ "paddingHorizontal": 16,
2390
+ "paddingVertical": 8,
2391
+ },
2392
+ undefined,
2393
+ ]
2394
+ }
2395
+ themeSize="medium"
2396
+ >
2397
+ <View
2398
+ style={
2399
+ [
2400
+ {
2401
+ "alignItems": "center",
2402
+ "display": "flex",
2403
+ "flexDirection": "row",
2404
+ },
2405
+ undefined,
2406
+ ]
2407
+ }
2408
+ >
2409
+ <View
2410
+ style={
2411
+ [
2412
+ {
2413
+ "marginRight": 12,
2414
+ },
2415
+ undefined,
2416
+ ]
2417
+ }
2418
+ />
2419
+ <Text
2420
+ allowFontScaling={false}
2421
+ style={
2422
+ [
2423
+ {
2424
+ "color": "#001f23",
2425
+ "fontFamily": "BeVietnamPro-Regular",
2426
+ "fontSize": 14,
2427
+ "letterSpacing": 0.48,
2428
+ "lineHeight": 22,
2429
+ },
2430
+ undefined,
2431
+ ]
2432
+ }
2433
+ themeIntent="body"
2434
+ themeTypeface="neutral"
2435
+ themeVariant="small"
2436
+ >
2437
+ Title 1
2438
+ </Text>
2439
+ </View>
2440
+ </View>
2441
+ </View>
2442
+ <View
2443
+ onFocusCapture={[Function]}
2444
+ onLayout={[Function]}
2445
+ style={null}
2446
+ >
2447
+ <Text
2448
+ allowFontScaling={false}
2449
+ style={
2450
+ [
2451
+ {
2452
+ "color": "#001f23",
2453
+ "fontFamily": "BeVietnamPro-Regular",
2454
+ "fontSize": 42,
2455
+ "letterSpacing": 0,
2456
+ "lineHeight": 50,
2457
+ },
2458
+ {
2459
+ "marginBottom": 56,
2460
+ },
2461
+ ]
2462
+ }
2463
+ themeIntent="body"
2464
+ themeLevel="h1"
2465
+ themeTypeface="neutral"
2466
+ >
2467
+ Content 1
2468
+ </Text>
2469
+ </View>
2470
+ <View
2471
+ onFocusCapture={[Function]}
2472
+ onLayout={[Function]}
2473
+ style={null}
2474
+ >
2475
+ <Text
2476
+ allowFontScaling={false}
2477
+ style={
2478
+ [
2479
+ {
2480
+ "color": "#001f23",
2481
+ "fontFamily": "BeVietnamPro-Regular",
2482
+ "fontSize": 42,
2483
+ "letterSpacing": 0,
2484
+ "lineHeight": 50,
2485
+ },
2486
+ {
2487
+ "marginBottom": 56,
2488
+ },
2489
+ ]
2490
+ }
2491
+ themeIntent="body"
2492
+ themeLevel="h1"
2493
+ themeTypeface="neutral"
2494
+ >
2495
+ Content 2
2496
+ </Text>
2497
+ </View>
2498
+ <View
2499
+ onFocusCapture={[Function]}
2500
+ onLayout={[Function]}
2501
+ style={null}
2502
+ >
2503
+ <Text
2504
+ allowFontScaling={false}
2505
+ style={
2506
+ [
2507
+ {
2508
+ "color": "#001f23",
2509
+ "fontFamily": "BeVietnamPro-Regular",
2510
+ "fontSize": 42,
2511
+ "letterSpacing": 0,
2512
+ "lineHeight": 50,
2513
+ },
2514
+ {
2515
+ "marginBottom": 56,
2516
+ },
2517
+ ]
2518
+ }
2519
+ themeIntent="body"
2520
+ themeLevel="h1"
2521
+ themeTypeface="neutral"
2522
+ >
2523
+ Content 3
2524
+ </Text>
2525
+ </View>
2526
+ <View
2527
+ onFocusCapture={[Function]}
2528
+ onLayout={[Function]}
2529
+ style={null}
2530
+ >
2531
+ <Text
2532
+ allowFontScaling={false}
2533
+ style={
2534
+ [
2535
+ {
2536
+ "color": "#001f23",
2537
+ "fontFamily": "BeVietnamPro-Regular",
2538
+ "fontSize": 42,
2539
+ "letterSpacing": 0,
2540
+ "lineHeight": 50,
2541
+ },
2542
+ {
2543
+ "marginBottom": 56,
2544
+ },
2545
+ ]
2546
+ }
2547
+ themeIntent="body"
2548
+ themeLevel="h1"
2549
+ themeTypeface="neutral"
2550
+ >
2551
+ Content 4
2552
+ </Text>
2553
+ </View>
2554
+ <View
2555
+ onFocusCapture={[Function]}
2556
+ onLayout={[Function]}
2557
+ style={null}
2558
+ />
2559
+ <View
2560
+ onFocusCapture={[Function]}
2561
+ onLayout={[Function]}
2562
+ style={null}
2563
+ >
2564
+ <View
2565
+ style={
2566
+ [
2567
+ {
2568
+ "alignContent": "center",
2569
+ "backgroundColor": "#f6f6f7",
2570
+ "display": "flex",
2571
+ "flexDirection": "row",
2572
+ "justifyContent": "space-between",
2573
+ "marginBottom": 16,
2574
+ "paddingHorizontal": 16,
2575
+ "paddingVertical": 8,
2576
+ },
2577
+ undefined,
2578
+ ]
2579
+ }
2580
+ themeSize="medium"
2581
+ >
2582
+ <View
2583
+ style={
2584
+ [
2585
+ {
2586
+ "alignItems": "center",
2587
+ "display": "flex",
2588
+ "flexDirection": "row",
2589
+ },
2590
+ undefined,
2591
+ ]
2592
+ }
2593
+ >
2594
+ <View
2595
+ style={
2596
+ [
2597
+ {
2598
+ "marginRight": 12,
2599
+ },
2600
+ undefined,
2601
+ ]
2602
+ }
2603
+ />
2604
+ <Text
2605
+ allowFontScaling={false}
2606
+ style={
2607
+ [
2608
+ {
2609
+ "color": "#001f23",
2610
+ "fontFamily": "BeVietnamPro-Regular",
2611
+ "fontSize": 14,
2612
+ "letterSpacing": 0.48,
2613
+ "lineHeight": 22,
2614
+ },
2615
+ undefined,
2616
+ ]
2617
+ }
2618
+ themeIntent="body"
2619
+ themeTypeface="neutral"
2620
+ themeVariant="small"
2621
+ >
2622
+ Title 2
2623
+ </Text>
2624
+ </View>
2625
+ </View>
2626
+ </View>
2627
+ <View
2628
+ onFocusCapture={[Function]}
2629
+ onLayout={[Function]}
2630
+ style={null}
2631
+ >
2632
+ <Text
2633
+ allowFontScaling={false}
2634
+ style={
2635
+ [
2636
+ {
2637
+ "color": "#001f23",
2638
+ "fontFamily": "BeVietnamPro-Regular",
2639
+ "fontSize": 42,
2640
+ "letterSpacing": 0,
2641
+ "lineHeight": 50,
2642
+ },
2643
+ {
2644
+ "marginBottom": 56,
2645
+ },
2646
+ ]
2647
+ }
2648
+ themeIntent="body"
2649
+ themeLevel="h1"
2650
+ themeTypeface="neutral"
2651
+ >
2652
+ Content 5
2653
+ </Text>
2654
+ </View>
2655
+ <View
2656
+ onFocusCapture={[Function]}
2657
+ onLayout={[Function]}
2658
+ style={null}
2659
+ >
2660
+ <Text
2661
+ allowFontScaling={false}
2662
+ style={
2663
+ [
2664
+ {
2665
+ "color": "#001f23",
2666
+ "fontFamily": "BeVietnamPro-Regular",
2667
+ "fontSize": 42,
2668
+ "letterSpacing": 0,
2669
+ "lineHeight": 50,
2670
+ },
2671
+ {
2672
+ "marginBottom": 56,
2673
+ },
2674
+ ]
2675
+ }
2676
+ themeIntent="body"
2677
+ themeLevel="h1"
2678
+ themeTypeface="neutral"
2679
+ >
2680
+ Content 6
2681
+ </Text>
2682
+ </View>
2683
+ <View
2684
+ onFocusCapture={[Function]}
2685
+ onLayout={[Function]}
2686
+ style={null}
2687
+ >
2688
+ <Text
2689
+ allowFontScaling={false}
2690
+ style={
2691
+ [
2692
+ {
2693
+ "color": "#001f23",
2694
+ "fontFamily": "BeVietnamPro-Regular",
2695
+ "fontSize": 42,
2696
+ "letterSpacing": 0,
2697
+ "lineHeight": 50,
2698
+ },
2699
+ {
2700
+ "marginBottom": 56,
2701
+ },
2702
+ ]
2703
+ }
2704
+ themeIntent="body"
2705
+ themeLevel="h1"
2706
+ themeTypeface="neutral"
2707
+ >
2708
+ Content 7
2709
+ </Text>
2710
+ </View>
2711
+ <View
2712
+ style={
2713
+ {
2714
+ "height": 0,
2715
+ }
2716
+ }
2717
+ />
2718
+ </View>
2719
+ </RCTScrollView>
2720
+ <View
2721
+ pointerEvents="box-none"
2722
+ style={
2723
+ [
2724
+ {
2725
+ "alignItems": "flex-end",
2726
+ "bottom": 0,
2727
+ "justifyContent": "flex-end",
2728
+ "left": 0,
2729
+ "position": "absolute",
2730
+ "right": 0,
2731
+ "top": 0,
2732
+ },
2733
+ undefined,
2734
+ ]
2735
+ }
2736
+ >
2737
+ <View
2738
+ collapsable={false}
2739
+ style={
2740
+ {
2741
+ "opacity": 1,
2742
+ }
2743
+ }
2744
+ >
2745
+ <View
2746
+ accessibilityValue={
2747
+ {
2748
+ "max": undefined,
2749
+ "min": undefined,
2750
+ "now": undefined,
2751
+ "text": undefined,
2752
+ }
2753
+ }
2754
+ accessible={true}
2755
+ focusable={false}
2756
+ onClick={[Function]}
2757
+ onLayout={[Function]}
2758
+ onResponderGrant={[Function]}
2759
+ onResponderMove={[Function]}
2760
+ onResponderRelease={[Function]}
2761
+ onResponderTerminate={[Function]}
2762
+ onResponderTerminationRequest={[Function]}
2763
+ onStartShouldSetResponder={[Function]}
2764
+ style={
2765
+ [
2766
+ {
2767
+ "alignItems": "center",
2768
+ "alignSelf": "flex-start",
2769
+ "backgroundColor": "#401960",
2770
+ "borderRadius": 999,
2771
+ "elevation": 3,
2772
+ "flexDirection": "row",
2773
+ "justifyContent": "center",
2774
+ "padding": 20,
2775
+ "shadowColor": "#001f23",
2776
+ "shadowOffset": {
2777
+ "height": 2,
2778
+ "width": 0,
2779
+ },
2780
+ "shadowOpacity": 0.12,
2781
+ "shadowRadius": 4,
2782
+ },
2783
+ [
2784
+ [
2785
+ {
2786
+ "alignSelf": "flex-end",
2787
+ "marginRight": 24,
2788
+ "marginTop": 24,
2789
+ },
2790
+ undefined,
2791
+ ],
2792
+ {
2793
+ "bottom": undefined,
2794
+ },
2795
+ ],
2796
+ ]
2797
+ }
2798
+ testID="fab"
2799
+ >
2800
+ <View
2801
+ style={
2802
+ [
2803
+ {},
2804
+ [
2805
+ {
2806
+ "alignItems": "center",
2807
+ "height": 24,
2808
+ "justifyContent": "center",
2809
+ "width": 24,
2810
+ },
2811
+ undefined,
2812
+ ],
2813
+ ]
2814
+ }
2815
+ >
2816
+ <HeroIcon
2817
+ name="add"
2818
+ style={
2819
+ [
2820
+ {
2821
+ "color": "#001f23",
2822
+ "fontSize": 16,
2823
+ },
2824
+ [
2825
+ {
2826
+ "color": "#ffffff",
2827
+ "lineHeight": 24,
2828
+ "textAlign": "center",
2829
+ "textAlignVertical": "center",
2830
+ },
2831
+ undefined,
2832
+ ],
2833
+ ]
2834
+ }
2835
+ testID="styled-fab-icon"
2836
+ themeIntent="text"
2837
+ themeSize="xsmall"
2838
+ />
2839
+ </View>
2840
+ <Text
2841
+ allowFontScaling={false}
2842
+ style={
2843
+ [
2844
+ {
2845
+ "color": "#001f23",
2846
+ "fontFamily": "BeVietnamPro-Regular",
2847
+ "fontSize": 16,
2848
+ "letterSpacing": 0.48,
2849
+ "lineHeight": 24,
2850
+ },
2851
+ [
2852
+ {
2853
+ "color": "#ffffff",
2854
+ "marginHorizontal": 8,
2855
+ "textAlign": "center",
2856
+ "textAlignVertical": "center",
2857
+ },
2858
+ undefined,
2859
+ ],
2860
+ ]
2861
+ }
2862
+ themeIntent="body"
2863
+ themeTypeface="neutral"
2864
+ themeVariant="regular"
2865
+ >
2866
+ Shout out
2867
+ </Text>
2868
+ </View>
2869
+ </View>
2870
+ <Modal
2871
+ animationType="fade"
2872
+ hardwareAccelerated={false}
2873
+ statusBarTranslucent={true}
2874
+ transparent={true}
2875
+ visible={false}
2876
+ />
2877
+ </View>
2878
+ <View
2879
+ pointerEvents="box-none"
2880
+ position="bottom"
2881
+ style={
2882
+ [
2883
+ {
2884
+ "bottom": 0,
2885
+ "elevation": 9999,
2886
+ "flexDirection": "column-reverse",
2887
+ "left": 0,
2888
+ "paddingHorizontal": 24,
2889
+ "paddingVertical": 16,
2890
+ "position": "absolute",
2891
+ "right": 0,
2892
+ "top": 0,
2893
+ },
2894
+ undefined,
2895
+ ]
2896
+ }
2897
+ />
2898
+ </View>
2899
+ `;
2900
+
2901
+ exports[`Scrollables With FAB [Function ExampleSectionListWithFAB] renders FAB correctly 1`] = `
2902
+ <View
2903
+ style={
2904
+ {
2905
+ "flex": 1,
2906
+ }
2907
+ }
2908
+ >
2909
+ <RCTScrollView
2910
+ data={
2911
+ [
2912
+ {
2913
+ "data": [
2914
+ "Content 1",
2915
+ "Content 2",
2916
+ "Content 3",
2917
+ "Content 4",
2918
+ ],
2919
+ "title": "Title 1",
2920
+ },
2921
+ {
2922
+ "data": [
2923
+ "Content 5",
2924
+ "Content 6",
2925
+ "Content 7",
2926
+ ],
2927
+ "title": "Title 2",
2928
+ },
2929
+ ]
2930
+ }
2931
+ getItem={[Function]}
2932
+ getItemCount={[Function]}
2933
+ keyExtractor={[Function]}
2934
+ onContentSizeChange={[Function]}
2935
+ onLayout={[Function]}
2936
+ onMomentumScrollBegin={[Function]}
2937
+ onMomentumScrollEnd={[Function]}
2938
+ onScroll={[Function]}
2939
+ onScrollBeginDrag={[Function]}
2940
+ onScrollEndDrag={[Function]}
2941
+ renderItem={[Function]}
2942
+ scrollEventThrottle={100}
2943
+ stickyHeaderIndices={
2944
+ [
2945
+ 0,
2946
+ 6,
2947
+ ]
2948
+ }
2949
+ testID="scrollable-with-fab"
2950
+ >
2951
+ <View>
2952
+ <View
2953
+ onFocusCapture={[Function]}
2954
+ onLayout={[Function]}
2955
+ style={null}
2956
+ >
2957
+ <View
2958
+ style={
2959
+ [
2960
+ {
2961
+ "alignContent": "center",
2962
+ "backgroundColor": "#f6f6f7",
2963
+ "display": "flex",
2964
+ "flexDirection": "row",
2965
+ "justifyContent": "space-between",
2966
+ "marginBottom": 16,
2967
+ "paddingHorizontal": 16,
2968
+ "paddingVertical": 8,
2969
+ },
2970
+ undefined,
2971
+ ]
2972
+ }
2973
+ themeSize="medium"
2974
+ >
2975
+ <View
2976
+ style={
2977
+ [
2978
+ {
2979
+ "alignItems": "center",
2980
+ "display": "flex",
2981
+ "flexDirection": "row",
2982
+ },
2983
+ undefined,
2984
+ ]
2985
+ }
2986
+ >
2987
+ <View
2988
+ style={
2989
+ [
2990
+ {
2991
+ "marginRight": 12,
2992
+ },
2993
+ undefined,
2994
+ ]
2995
+ }
2996
+ />
2997
+ <Text
2998
+ allowFontScaling={false}
2999
+ style={
3000
+ [
3001
+ {
3002
+ "color": "#001f23",
3003
+ "fontFamily": "BeVietnamPro-Regular",
3004
+ "fontSize": 14,
3005
+ "letterSpacing": 0.48,
3006
+ "lineHeight": 22,
3007
+ },
3008
+ undefined,
3009
+ ]
3010
+ }
3011
+ themeIntent="body"
3012
+ themeTypeface="neutral"
3013
+ themeVariant="small"
3014
+ >
3015
+ Title 1
3016
+ </Text>
3017
+ </View>
3018
+ </View>
3019
+ </View>
3020
+ <View
3021
+ onFocusCapture={[Function]}
3022
+ onLayout={[Function]}
3023
+ style={null}
3024
+ >
3025
+ <Text
3026
+ allowFontScaling={false}
3027
+ style={
3028
+ [
3029
+ {
3030
+ "color": "#001f23",
3031
+ "fontFamily": "BeVietnamPro-Regular",
3032
+ "fontSize": 42,
3033
+ "letterSpacing": 0,
3034
+ "lineHeight": 50,
3035
+ },
3036
+ {
3037
+ "marginBottom": 56,
3038
+ },
3039
+ ]
3040
+ }
3041
+ themeIntent="body"
3042
+ themeLevel="h1"
3043
+ themeTypeface="neutral"
3044
+ >
3045
+ Content 1
3046
+ </Text>
3047
+ </View>
3048
+ <View
3049
+ onFocusCapture={[Function]}
3050
+ onLayout={[Function]}
3051
+ style={null}
3052
+ >
3053
+ <Text
3054
+ allowFontScaling={false}
3055
+ style={
3056
+ [
3057
+ {
3058
+ "color": "#001f23",
3059
+ "fontFamily": "BeVietnamPro-Regular",
3060
+ "fontSize": 42,
3061
+ "letterSpacing": 0,
3062
+ "lineHeight": 50,
3063
+ },
3064
+ {
3065
+ "marginBottom": 56,
3066
+ },
3067
+ ]
3068
+ }
3069
+ themeIntent="body"
3070
+ themeLevel="h1"
3071
+ themeTypeface="neutral"
3072
+ >
3073
+ Content 2
3074
+ </Text>
3075
+ </View>
3076
+ <View
3077
+ onFocusCapture={[Function]}
3078
+ onLayout={[Function]}
3079
+ style={null}
3080
+ >
3081
+ <Text
3082
+ allowFontScaling={false}
3083
+ style={
3084
+ [
3085
+ {
3086
+ "color": "#001f23",
3087
+ "fontFamily": "BeVietnamPro-Regular",
3088
+ "fontSize": 42,
3089
+ "letterSpacing": 0,
3090
+ "lineHeight": 50,
3091
+ },
3092
+ {
3093
+ "marginBottom": 56,
3094
+ },
3095
+ ]
3096
+ }
3097
+ themeIntent="body"
3098
+ themeLevel="h1"
3099
+ themeTypeface="neutral"
3100
+ >
3101
+ Content 3
3102
+ </Text>
3103
+ </View>
3104
+ <View
3105
+ onFocusCapture={[Function]}
3106
+ onLayout={[Function]}
3107
+ style={null}
3108
+ >
3109
+ <Text
3110
+ allowFontScaling={false}
3111
+ style={
3112
+ [
3113
+ {
3114
+ "color": "#001f23",
3115
+ "fontFamily": "BeVietnamPro-Regular",
3116
+ "fontSize": 42,
3117
+ "letterSpacing": 0,
3118
+ "lineHeight": 50,
3119
+ },
3120
+ {
3121
+ "marginBottom": 56,
3122
+ },
3123
+ ]
3124
+ }
3125
+ themeIntent="body"
3126
+ themeLevel="h1"
3127
+ themeTypeface="neutral"
3128
+ >
3129
+ Content 4
3130
+ </Text>
3131
+ </View>
3132
+ <View
3133
+ onFocusCapture={[Function]}
3134
+ onLayout={[Function]}
3135
+ style={null}
3136
+ />
3137
+ <View
3138
+ onFocusCapture={[Function]}
3139
+ onLayout={[Function]}
3140
+ style={null}
3141
+ >
3142
+ <View
3143
+ style={
3144
+ [
3145
+ {
3146
+ "alignContent": "center",
3147
+ "backgroundColor": "#f6f6f7",
3148
+ "display": "flex",
3149
+ "flexDirection": "row",
3150
+ "justifyContent": "space-between",
3151
+ "marginBottom": 16,
3152
+ "paddingHorizontal": 16,
3153
+ "paddingVertical": 8,
3154
+ },
3155
+ undefined,
3156
+ ]
3157
+ }
3158
+ themeSize="medium"
3159
+ >
3160
+ <View
3161
+ style={
3162
+ [
3163
+ {
3164
+ "alignItems": "center",
3165
+ "display": "flex",
3166
+ "flexDirection": "row",
3167
+ },
3168
+ undefined,
3169
+ ]
3170
+ }
3171
+ >
3172
+ <View
3173
+ style={
3174
+ [
3175
+ {
3176
+ "marginRight": 12,
3177
+ },
3178
+ undefined,
3179
+ ]
3180
+ }
3181
+ />
3182
+ <Text
3183
+ allowFontScaling={false}
3184
+ style={
3185
+ [
3186
+ {
3187
+ "color": "#001f23",
3188
+ "fontFamily": "BeVietnamPro-Regular",
3189
+ "fontSize": 14,
3190
+ "letterSpacing": 0.48,
3191
+ "lineHeight": 22,
3192
+ },
3193
+ undefined,
3194
+ ]
3195
+ }
3196
+ themeIntent="body"
3197
+ themeTypeface="neutral"
3198
+ themeVariant="small"
3199
+ >
3200
+ Title 2
3201
+ </Text>
3202
+ </View>
3203
+ </View>
3204
+ </View>
3205
+ <View
3206
+ onFocusCapture={[Function]}
3207
+ onLayout={[Function]}
3208
+ style={null}
3209
+ >
3210
+ <Text
3211
+ allowFontScaling={false}
3212
+ style={
3213
+ [
3214
+ {
3215
+ "color": "#001f23",
3216
+ "fontFamily": "BeVietnamPro-Regular",
3217
+ "fontSize": 42,
3218
+ "letterSpacing": 0,
3219
+ "lineHeight": 50,
3220
+ },
3221
+ {
3222
+ "marginBottom": 56,
3223
+ },
3224
+ ]
3225
+ }
3226
+ themeIntent="body"
3227
+ themeLevel="h1"
3228
+ themeTypeface="neutral"
3229
+ >
3230
+ Content 5
3231
+ </Text>
3232
+ </View>
3233
+ <View
3234
+ onFocusCapture={[Function]}
3235
+ onLayout={[Function]}
3236
+ style={null}
3237
+ >
3238
+ <Text
3239
+ allowFontScaling={false}
3240
+ style={
3241
+ [
3242
+ {
3243
+ "color": "#001f23",
3244
+ "fontFamily": "BeVietnamPro-Regular",
3245
+ "fontSize": 42,
3246
+ "letterSpacing": 0,
3247
+ "lineHeight": 50,
3248
+ },
3249
+ {
3250
+ "marginBottom": 56,
3251
+ },
3252
+ ]
3253
+ }
3254
+ themeIntent="body"
3255
+ themeLevel="h1"
3256
+ themeTypeface="neutral"
3257
+ >
3258
+ Content 6
3259
+ </Text>
3260
+ </View>
3261
+ <View
3262
+ onFocusCapture={[Function]}
3263
+ onLayout={[Function]}
3264
+ style={null}
3265
+ >
3266
+ <Text
3267
+ allowFontScaling={false}
3268
+ style={
3269
+ [
3270
+ {
3271
+ "color": "#001f23",
3272
+ "fontFamily": "BeVietnamPro-Regular",
3273
+ "fontSize": 42,
3274
+ "letterSpacing": 0,
3275
+ "lineHeight": 50,
3276
+ },
3277
+ {
3278
+ "marginBottom": 56,
3279
+ },
3280
+ ]
3281
+ }
3282
+ themeIntent="body"
3283
+ themeLevel="h1"
3284
+ themeTypeface="neutral"
3285
+ >
3286
+ Content 7
3287
+ </Text>
3288
+ </View>
3289
+ <View
3290
+ style={
3291
+ {
3292
+ "height": 0,
3293
+ }
3294
+ }
3295
+ />
3296
+ </View>
3297
+ </RCTScrollView>
3298
+ <View
3299
+ accessibilityValue={
3300
+ {
3301
+ "max": undefined,
3302
+ "min": undefined,
3303
+ "now": undefined,
3304
+ "text": undefined,
3305
+ }
3306
+ }
3307
+ accessible={true}
3308
+ focusable={false}
3309
+ onClick={[Function]}
3310
+ onLayout={[Function]}
3311
+ onResponderGrant={[Function]}
3312
+ onResponderMove={[Function]}
3313
+ onResponderRelease={[Function]}
3314
+ onResponderTerminate={[Function]}
3315
+ onResponderTerminationRequest={[Function]}
3316
+ onStartShouldSetResponder={[Function]}
3317
+ style={
3318
+ [
3319
+ {
3320
+ "alignItems": "center",
3321
+ "alignSelf": "flex-start",
3322
+ "backgroundColor": "#401960",
3323
+ "borderRadius": 999,
3324
+ "elevation": 3,
3325
+ "flexDirection": "row",
3326
+ "justifyContent": "center",
3327
+ "padding": 20,
3328
+ "shadowColor": "#001f23",
3329
+ "shadowOffset": {
3330
+ "height": 2,
3331
+ "width": 0,
3332
+ },
3333
+ "shadowOpacity": 0.12,
3334
+ "shadowRadius": 4,
3335
+ },
3336
+ [
3337
+ undefined,
3338
+ {
3339
+ "bottom": undefined,
3340
+ },
3341
+ ],
3342
+ ]
3343
+ }
3344
+ >
3345
+ <View
3346
+ style={
3347
+ [
3348
+ {},
3349
+ [
3350
+ {
3351
+ "alignItems": "center",
3352
+ "height": 24,
3353
+ "justifyContent": "center",
3354
+ "width": 24,
3355
+ },
3356
+ undefined,
3357
+ ],
3358
+ ]
3359
+ }
3360
+ >
3361
+ <HeroIcon
3362
+ name="speaker"
3363
+ style={
3364
+ [
3365
+ {
3366
+ "color": "#001f23",
3367
+ "fontSize": 16,
3368
+ },
3369
+ [
3370
+ {
3371
+ "color": "#ffffff",
3372
+ "lineHeight": 24,
3373
+ "textAlign": "center",
3374
+ "textAlignVertical": "center",
3375
+ },
3376
+ undefined,
3377
+ ],
3378
+ ]
3379
+ }
3380
+ testID="styled-fab-icon"
3381
+ themeIntent="text"
3382
+ themeSize="xsmall"
3383
+ />
3384
+ </View>
3385
+ <Text
3386
+ allowFontScaling={false}
3387
+ style={
3388
+ [
3389
+ {
3390
+ "color": "#001f23",
3391
+ "fontFamily": "BeVietnamPro-Regular",
3392
+ "fontSize": 16,
3393
+ "letterSpacing": 0.48,
3394
+ "lineHeight": 24,
3395
+ },
3396
+ [
3397
+ {
3398
+ "color": "#ffffff",
3399
+ "marginHorizontal": 8,
3400
+ "textAlign": "center",
3401
+ "textAlignVertical": "center",
3402
+ },
3403
+ undefined,
3404
+ ],
3405
+ ]
3406
+ }
3407
+ themeIntent="body"
3408
+ themeTypeface="neutral"
3409
+ themeVariant="regular"
3410
+ >
3411
+ Shout out
3412
+ </Text>
3413
+ </View>
3414
+ <View
3415
+ pointerEvents="box-none"
3416
+ position="bottom"
3417
+ style={
3418
+ [
3419
+ {
3420
+ "bottom": 0,
3421
+ "elevation": 9999,
3422
+ "flexDirection": "column-reverse",
3423
+ "left": 0,
3424
+ "paddingHorizontal": 24,
3425
+ "paddingVertical": 16,
3426
+ "position": "absolute",
3427
+ "right": 0,
3428
+ "top": 0,
3429
+ },
3430
+ undefined,
3431
+ ]
3432
+ }
3433
+ />
3434
+ </View>
3435
+ `;