@hero-design/rn 8.42.0 → 8.42.1

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.
@@ -229,53 +229,40 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
229
229
  `;
230
230
 
231
231
  exports[`TimePickerIOS renders correctly 1`] = `
232
- <View
233
- accessibilityState={
234
- {
235
- "disabled": false,
232
+ [
233
+ <View
234
+ accessibilityState={
235
+ {
236
+ "disabled": false,
237
+ }
236
238
  }
237
- }
238
- accessible={true}
239
- collapsable={false}
240
- focusable={true}
241
- onClick={[Function]}
242
- onResponderGrant={[Function]}
243
- onResponderMove={[Function]}
244
- onResponderRelease={[Function]}
245
- onResponderTerminate={[Function]}
246
- onResponderTerminationRequest={[Function]}
247
- onStartShouldSetResponder={[Function]}
248
- style={
249
- {
250
- "opacity": 1,
239
+ accessible={true}
240
+ collapsable={false}
241
+ focusable={true}
242
+ onClick={[Function]}
243
+ onResponderGrant={[Function]}
244
+ onResponderMove={[Function]}
245
+ onResponderRelease={[Function]}
246
+ onResponderTerminate={[Function]}
247
+ onResponderTerminationRequest={[Function]}
248
+ onStartShouldSetResponder={[Function]}
249
+ style={
250
+ {
251
+ "opacity": 1,
252
+ }
251
253
  }
252
- }
253
- >
254
- <View
255
- pointerEvents="none"
256
- testID="timePickerInputIOS"
257
254
  >
258
255
  <View
259
- pointerEvents="auto"
260
- style={
261
- [
262
- {
263
- "marginTop": 8,
264
- "width": "100%",
265
- },
266
- undefined,
267
- ]
268
- }
256
+ pointerEvents="none"
257
+ testID="timePickerInputIOS"
269
258
  >
270
259
  <View
260
+ pointerEvents="auto"
271
261
  style={
272
262
  [
273
263
  {
274
- "alignItems": "center",
275
- "backgroundColor": "#ffffff",
276
- "borderRadius": 8,
277
- "flexDirection": "row",
278
- "padding": 16,
264
+ "marginTop": 8,
265
+ "width": "100%",
279
266
  },
280
267
  undefined,
281
268
  ]
@@ -285,247 +272,358 @@ exports[`TimePickerIOS renders correctly 1`] = `
285
272
  style={
286
273
  [
287
274
  {
288
- "borderColor": "#001f23",
289
- "borderRadius": 8,
290
- "borderWidth": 1,
291
- "bottom": 0,
292
- "left": 0,
293
- "position": "absolute",
294
- "right": 0,
295
- "top": 0,
296
- },
297
- [
298
- {
299
- "backgroundColor": "#ffffff",
300
- },
301
- undefined,
302
- ],
303
- ]
304
- }
305
- testID="text-input-border"
306
- themeFocused={false}
307
- themeState="filled"
308
- />
309
- <View
310
- pointerEvents="none"
311
- style={
312
- [
313
- {
275
+ "alignItems": "center",
314
276
  "backgroundColor": "#ffffff",
277
+ "borderRadius": 8,
315
278
  "flexDirection": "row",
316
- "left": 16,
317
- "paddingHorizontal": 4,
318
- "position": "absolute",
319
- "top": -4,
320
- "zIndex": 1,
321
- },
322
- {
323
- "backgroundColor": "#ffffff",
279
+ "padding": 16,
324
280
  },
281
+ undefined,
325
282
  ]
326
283
  }
327
- testID="label-container"
328
284
  >
329
- <Text
330
- allowFontScaling={false}
285
+ <View
331
286
  style={
332
287
  [
333
288
  {
334
- "color": "#001f23",
335
- "fontFamily": "BeVietnamPro-Regular",
336
- "fontSize": 12,
337
- "letterSpacing": 0.48,
338
- "lineHeight": 16,
289
+ "borderColor": "#001f23",
290
+ "borderRadius": 8,
291
+ "borderWidth": 1,
292
+ "bottom": 0,
293
+ "left": 0,
294
+ "position": "absolute",
295
+ "right": 0,
296
+ "top": 0,
339
297
  },
340
298
  [
341
- {
342
- "color": "#001f23",
343
- "lineHeight": 12,
344
- },
345
299
  {
346
300
  "backgroundColor": "#ffffff",
347
301
  },
302
+ undefined,
348
303
  ],
349
304
  ]
350
305
  }
351
- testID="input-label"
352
- themeFontWeight="regular"
353
- themeIntent="body"
306
+ testID="text-input-border"
307
+ themeFocused={false}
354
308
  themeState="filled"
309
+ />
310
+ <View
311
+ pointerEvents="none"
312
+ style={
313
+ [
314
+ {
315
+ "backgroundColor": "#ffffff",
316
+ "flexDirection": "row",
317
+ "left": 16,
318
+ "paddingHorizontal": 4,
319
+ "position": "absolute",
320
+ "top": -4,
321
+ "zIndex": 1,
322
+ },
323
+ {
324
+ "backgroundColor": "#ffffff",
325
+ },
326
+ ]
327
+ }
328
+ testID="label-container"
355
329
  >
356
- Break time
357
- </Text>
358
- </View>
359
- <View
360
- style={
361
- [
362
- {
363
- "alignItems": "center",
364
- "alignSelf": "stretch",
365
- "flexDirection": "row",
366
- "flexGrow": 2,
367
- "flexShrink": 1,
368
- },
369
- undefined,
370
- ]
371
- }
372
- >
373
- <TextInput
374
- accessibilityState={
375
- {
376
- "disabled": false,
330
+ <Text
331
+ allowFontScaling={false}
332
+ style={
333
+ [
334
+ {
335
+ "color": "#001f23",
336
+ "fontFamily": "BeVietnamPro-Regular",
337
+ "fontSize": 12,
338
+ "letterSpacing": 0.48,
339
+ "lineHeight": 16,
340
+ },
341
+ [
342
+ {
343
+ "color": "#001f23",
344
+ "lineHeight": 12,
345
+ },
346
+ {
347
+ "backgroundColor": "#ffffff",
348
+ },
349
+ ],
350
+ ]
377
351
  }
378
- }
379
- allowFontScaling={false}
380
- editable={true}
381
- onBlur={[Function]}
382
- onChangeText={[Function]}
383
- onFocus={[Function]}
384
- placeholder=" "
352
+ testID="input-label"
353
+ themeFontWeight="regular"
354
+ themeIntent="body"
355
+ themeState="filled"
356
+ >
357
+ Break time
358
+ </Text>
359
+ </View>
360
+ <View
385
361
  style={
386
362
  [
387
363
  {
364
+ "alignItems": "center",
388
365
  "alignSelf": "stretch",
366
+ "flexDirection": "row",
389
367
  "flexGrow": 2,
390
- "fontFamily": "BeVietnamPro-Regular",
391
- "fontSize": 16,
392
- "height": undefined,
393
- "marginHorizontal": 8,
394
- "maxHeight": 144,
395
- "paddingVertical": 0,
396
- "textAlignVertical": "center",
368
+ "flexShrink": 1,
397
369
  },
370
+ undefined,
371
+ ]
372
+ }
373
+ >
374
+ <TextInput
375
+ accessibilityState={
376
+ {
377
+ "disabled": false,
378
+ }
379
+ }
380
+ allowFontScaling={false}
381
+ editable={true}
382
+ onBlur={[Function]}
383
+ onChangeText={[Function]}
384
+ onFocus={[Function]}
385
+ placeholder=" "
386
+ style={
387
+ [
388
+ {
389
+ "alignSelf": "stretch",
390
+ "flexGrow": 2,
391
+ "fontFamily": "BeVietnamPro-Regular",
392
+ "fontSize": 16,
393
+ "height": undefined,
394
+ "marginHorizontal": 8,
395
+ "maxHeight": 144,
396
+ "paddingVertical": 0,
397
+ "textAlignVertical": "center",
398
+ },
399
+ {
400
+ "backgroundColor": "#ffffff",
401
+ "color": "#001f23",
402
+ },
403
+ ]
404
+ }
405
+ testID="text-input"
406
+ themeVariant="text"
407
+ value="03:24 AM"
408
+ />
409
+ </View>
410
+ <HeroIcon
411
+ name="clock-3"
412
+ style={
413
+ [
398
414
  {
399
- "backgroundColor": "#ffffff",
400
415
  "color": "#001f23",
416
+ "fontSize": 24,
401
417
  },
418
+ undefined,
402
419
  ]
403
420
  }
404
- testID="text-input"
405
- themeVariant="text"
406
- value="03:24 AM"
421
+ testID="input-suffix"
422
+ themeIntent="text"
423
+ themeSize="medium"
407
424
  />
408
425
  </View>
409
- <HeroIcon
410
- name="clock-3"
411
- style={
412
- [
413
- {
414
- "color": "#001f23",
415
- "fontSize": 24,
416
- },
417
- undefined,
418
- ]
419
- }
420
- testID="input-suffix"
421
- themeIntent="text"
422
- themeSize="medium"
423
- />
424
- </View>
425
- <View
426
- style={
427
- [
428
- {
429
- "minHeight": 16,
430
- "paddingLeft": 16,
431
- "paddingTop": 2,
432
- },
433
- undefined,
434
- ]
435
- }
436
- >
437
426
  <View
438
427
  style={
439
428
  [
440
429
  {
441
- "flexDirection": "row",
442
- "justifyContent": "space-between",
430
+ "minHeight": 16,
431
+ "paddingLeft": 16,
432
+ "paddingTop": 2,
443
433
  },
444
434
  undefined,
445
435
  ]
446
436
  }
447
- />
437
+ >
438
+ <View
439
+ style={
440
+ [
441
+ {
442
+ "flexDirection": "row",
443
+ "justifyContent": "space-between",
444
+ },
445
+ undefined,
446
+ ]
447
+ }
448
+ />
449
+ </View>
448
450
  </View>
449
451
  </View>
450
- </View>
451
- <RCTModalHostView
452
- animationType="none"
453
- hardwareAccelerated={false}
454
- identifier={0}
455
- onDismiss={[Function]}
456
- onRequestClose={[Function]}
457
- onStartShouldSetResponder={[Function]}
458
- presentationStyle="overFullScreen"
452
+ </View>,
453
+ <View
454
+ collapsable={false}
455
+ style={
456
+ {
457
+ "backgroundColor": "transparent",
458
+ "bottom": 0,
459
+ "left": 0,
460
+ "opacity": 0.4,
461
+ "position": "absolute",
462
+ "right": 0,
463
+ "top": 0,
464
+ }
465
+ }
466
+ />,
467
+ <View
468
+ collapsable={false}
459
469
  style={
460
470
  {
471
+ "bottom": 0,
472
+ "left": 0,
473
+ "opacity": 1,
461
474
  "position": "absolute",
475
+ "right": 0,
476
+ "top": 0,
477
+ "transform": [
478
+ {
479
+ "translateY": 0,
480
+ },
481
+ ],
462
482
  }
463
483
  }
464
- transparent={true}
465
- visible={true}
466
484
  >
467
485
  <View
468
- collapsable={false}
486
+ pointerEvents="box-none"
469
487
  style={
470
488
  [
471
489
  {
472
- "flex": 1,
490
+ "bottom": 0,
491
+ "flexDirection": "column-reverse",
473
492
  "left": 0,
493
+ "position": "absolute",
494
+ "right": 0,
474
495
  "top": 0,
475
496
  },
476
- {
477
- "backgroundColor": "transparent",
478
- },
497
+ undefined,
479
498
  ]
480
499
  }
481
500
  >
482
501
  <View
483
- pointerEvents="box-none"
502
+ onLayout={[Function]}
484
503
  style={
485
- {
486
- "flex": 1,
487
- }
504
+ [
505
+ [
506
+ {
507
+ "flex": 1,
508
+ "flexDirection": "column-reverse",
509
+ },
510
+ undefined,
511
+ ],
512
+ {
513
+ "paddingBottom": 0,
514
+ },
515
+ ]
488
516
  }
489
517
  >
490
518
  <View
491
- collapsable={true}
492
- pointerEvents="box-none"
519
+ accessible={true}
520
+ collapsable={false}
521
+ focusable={true}
522
+ onBlur={[Function]}
523
+ onClick={[Function]}
524
+ onFocus={[Function]}
525
+ onResponderGrant={[Function]}
526
+ onResponderMove={[Function]}
527
+ onResponderRelease={[Function]}
528
+ onResponderTerminate={[Function]}
529
+ onResponderTerminationRequest={[Function]}
530
+ onStartShouldSetResponder={[Function]}
493
531
  style={
494
532
  {
495
- "flex": 1,
533
+ "backgroundColor": "#000000",
534
+ "bottom": 0,
535
+ "left": 0,
536
+ "opacity": 0.48,
537
+ "position": "absolute",
538
+ "right": 0,
539
+ "top": 0,
540
+ }
541
+ }
542
+ />
543
+ <RCTSafeAreaView
544
+ collapsable={false}
545
+ emulateUnlessSupported={true}
546
+ style={
547
+ {
548
+ "backgroundColor": "#ffffff",
549
+ "borderTopLeftRadius": 16,
550
+ "borderTopRightRadius": 16,
551
+ "elevation": 10,
552
+ "maxHeight": "94%",
553
+ "shadowColor": "#001f23",
554
+ "shadowOffset": {
555
+ "height": 3,
556
+ "width": 0,
557
+ },
558
+ "shadowOpacity": 0.4,
559
+ "shadowRadius": 16,
560
+ "transform": [
561
+ {
562
+ "scaleY": 1,
563
+ },
564
+ {
565
+ "translateY": 0,
566
+ },
567
+ ],
568
+ "width": "100%",
496
569
  }
497
570
  }
498
571
  >
499
572
  <View
500
- pointerEvents="box-none"
501
573
  style={
502
574
  [
503
575
  {
504
- "bottom": 0,
505
- "flexDirection": "column-reverse",
506
- "left": 0,
507
- "position": "absolute",
508
- "right": 0,
509
- "top": 0,
576
+ "flexDirection": "row",
577
+ "paddingHorizontal": 16,
578
+ "paddingVertical": 8,
510
579
  },
511
580
  undefined,
512
581
  ]
513
582
  }
514
583
  >
515
584
  <View
516
- onLayout={[Function]}
517
585
  style={
518
586
  [
587
+ {
588
+ "flex": 1,
589
+ "justifyContent": "center",
590
+ },
591
+ undefined,
592
+ ]
593
+ }
594
+ >
595
+ <Text
596
+ allowFontScaling={false}
597
+ style={
519
598
  [
520
599
  {
521
- "flex": 1,
522
- "flexDirection": "column-reverse",
600
+ "color": "#001f23",
601
+ "fontFamily": "BeVietnamPro-SemiBold",
602
+ "fontSize": 16,
603
+ "letterSpacing": 0.24,
604
+ "lineHeight": 24,
523
605
  },
524
606
  undefined,
525
- ],
607
+ ]
608
+ }
609
+ themeIntent="body"
610
+ themeTypeface="neutral"
611
+ themeVariant="regular-bold"
612
+ >
613
+ Break time
614
+ </Text>
615
+ </View>
616
+ <View
617
+ style={
618
+ [
526
619
  {
527
- "paddingBottom": 0,
620
+ "alignItems": "center",
621
+ "height": 48,
622
+ "justifyContent": "center",
623
+ "marginLeft": 12,
624
+ "width": 48,
528
625
  },
626
+ undefined,
529
627
  ]
530
628
  }
531
629
  >
@@ -533,9 +631,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
533
631
  accessible={true}
534
632
  collapsable={false}
535
633
  focusable={true}
536
- onBlur={[Function]}
537
634
  onClick={[Function]}
538
- onFocus={[Function]}
539
635
  onResponderGrant={[Function]}
540
636
  onResponderMove={[Function]}
541
637
  onResponderRelease={[Function]}
@@ -544,248 +640,135 @@ exports[`TimePickerIOS renders correctly 1`] = `
544
640
  onStartShouldSetResponder={[Function]}
545
641
  style={
546
642
  {
547
- "backgroundColor": "#000000",
548
- "bottom": 0,
549
- "left": 0,
550
- "opacity": 0.48,
551
- "position": "absolute",
552
- "right": 0,
553
- "top": 0,
554
- }
555
- }
556
- />
557
- <RCTSafeAreaView
558
- collapsable={false}
559
- emulateUnlessSupported={true}
560
- style={
561
- {
562
- "backgroundColor": "#ffffff",
563
- "borderTopLeftRadius": 16,
564
- "borderTopRightRadius": 16,
565
- "elevation": 10,
566
- "maxHeight": "94%",
567
- "shadowColor": "#001f23",
568
- "shadowOffset": {
569
- "height": 3,
570
- "width": 0,
571
- },
572
- "shadowOpacity": 0.4,
573
- "shadowRadius": 16,
574
- "transform": [
575
- {
576
- "scaleY": 1,
577
- },
578
- {
579
- "translateY": 0,
580
- },
581
- ],
582
- "width": "100%",
643
+ "opacity": 1,
583
644
  }
584
645
  }
646
+ testID="bottom-sheet-close-icon"
585
647
  >
586
- <View
648
+ <HeroIcon
649
+ name="cancel"
587
650
  style={
588
651
  [
589
652
  {
590
- "flexDirection": "row",
591
- "paddingHorizontal": 16,
592
- "paddingVertical": 8,
653
+ "color": "#001f23",
654
+ "fontSize": 16,
593
655
  },
594
656
  undefined,
595
657
  ]
596
658
  }
597
- >
598
- <View
599
- style={
600
- [
601
- {
602
- "flex": 1,
603
- "justifyContent": "center",
604
- },
605
- undefined,
606
- ]
607
- }
608
- >
609
- <Text
610
- allowFontScaling={false}
611
- style={
612
- [
613
- {
614
- "color": "#001f23",
615
- "fontFamily": "BeVietnamPro-SemiBold",
616
- "fontSize": 16,
617
- "letterSpacing": 0.24,
618
- "lineHeight": 24,
619
- },
620
- undefined,
621
- ]
622
- }
623
- themeIntent="body"
624
- themeTypeface="neutral"
625
- themeVariant="regular-bold"
626
- >
627
- Break time
628
- </Text>
629
- </View>
630
- <View
631
- style={
632
- [
633
- {
634
- "alignItems": "center",
635
- "height": 48,
636
- "justifyContent": "center",
637
- "marginLeft": 12,
638
- "width": 48,
639
- },
640
- undefined,
641
- ]
642
- }
643
- >
644
- <View
645
- accessible={true}
646
- collapsable={false}
647
- focusable={true}
648
- onClick={[Function]}
649
- onResponderGrant={[Function]}
650
- onResponderMove={[Function]}
651
- onResponderRelease={[Function]}
652
- onResponderTerminate={[Function]}
653
- onResponderTerminationRequest={[Function]}
654
- onStartShouldSetResponder={[Function]}
655
- style={
656
- {
657
- "opacity": 1,
658
- }
659
- }
660
- testID="bottom-sheet-close-icon"
661
- >
662
- <HeroIcon
663
- name="cancel"
664
- style={
665
- [
666
- {
667
- "color": "#001f23",
668
- "fontSize": 16,
669
- },
670
- undefined,
671
- ]
672
- }
673
- themeIntent="text"
674
- themeSize="xsmall"
675
- />
676
- </View>
677
- </View>
678
- </View>
679
- <View
659
+ themeIntent="text"
660
+ themeSize="xsmall"
661
+ />
662
+ </View>
663
+ </View>
664
+ </View>
665
+ <View
666
+ style={
667
+ [
668
+ {
669
+ "height": 176,
670
+ },
671
+ undefined,
672
+ ]
673
+ }
674
+ >
675
+ <Picker
676
+ display="spinner"
677
+ mode="time"
678
+ onChange={[Function]}
679
+ style={
680
+ {
681
+ "flex": 1,
682
+ }
683
+ }
684
+ testID="timePickerIOS"
685
+ textColor="#001f23"
686
+ value={1995-12-17T03:24:00.000Z}
687
+ />
688
+ </View>
689
+ <View>
690
+ <View
691
+ style={
692
+ [
693
+ {
694
+ "alignItems": "center",
695
+ "flexDirection": "row",
696
+ "justifyContent": "flex-end",
697
+ "paddingHorizontal": 12,
698
+ "paddingVertical": 2,
699
+ },
700
+ undefined,
701
+ ]
702
+ }
703
+ >
704
+ <View
705
+ accessibilityState={
706
+ {
707
+ "disabled": false,
708
+ }
709
+ }
710
+ accessible={true}
711
+ focusable={true}
712
+ onClick={[Function]}
713
+ onResponderGrant={[Function]}
714
+ onResponderMove={[Function]}
715
+ onResponderRelease={[Function]}
716
+ onResponderTerminate={[Function]}
717
+ onResponderTerminationRequest={[Function]}
718
+ onStartShouldSetResponder={[Function]}
719
+ style={
720
+ [
721
+ {
722
+ "alignItems": "center",
723
+ "backgroundColor": "transparent",
724
+ "borderRadius": 4,
725
+ "borderWidth": 0,
726
+ "flexDirection": "row",
727
+ "justifyContent": "center",
728
+ "padding": 12,
729
+ },
730
+ undefined,
731
+ ]
732
+ }
733
+ >
734
+ <Text
735
+ allowFontScaling={false}
736
+ disabled={false}
737
+ ellipsizeMode="tail"
738
+ numberOfLines={1}
680
739
  style={
681
740
  [
682
741
  {
683
- "height": 176,
742
+ "color": "#001f23",
743
+ "fontFamily": "BeVietnamPro-SemiBold",
744
+ "fontSize": 16,
745
+ "letterSpacing": 0.24,
746
+ "lineHeight": 24,
684
747
  },
685
- undefined,
686
- ]
687
- }
688
- >
689
- <Picker
690
- display="spinner"
691
- mode="time"
692
- onChange={[Function]}
693
- style={
694
- {
695
- "flex": 1,
696
- }
697
- }
698
- testID="timePickerIOS"
699
- textColor="#001f23"
700
- value={1995-12-17T03:24:00.000Z}
701
- />
702
- </View>
703
- <View>
704
- <View
705
- style={
706
748
  [
707
749
  {
708
- "alignItems": "center",
709
- "flexDirection": "row",
710
- "justifyContent": "flex-end",
711
- "paddingHorizontal": 12,
712
- "paddingVertical": 2,
750
+ "color": "#401960",
751
+ "flexShrink": 1,
752
+ "lineHeight": 22,
753
+ "textAlign": "center",
713
754
  },
714
755
  undefined,
715
- ]
716
- }
717
- >
718
- <View
719
- accessibilityState={
720
- {
721
- "disabled": false,
722
- }
723
- }
724
- accessible={true}
725
- focusable={true}
726
- onClick={[Function]}
727
- onResponderGrant={[Function]}
728
- onResponderMove={[Function]}
729
- onResponderRelease={[Function]}
730
- onResponderTerminate={[Function]}
731
- onResponderTerminationRequest={[Function]}
732
- onStartShouldSetResponder={[Function]}
733
- style={
734
- [
735
- {
736
- "alignItems": "center",
737
- "backgroundColor": "transparent",
738
- "borderRadius": 4,
739
- "borderWidth": 0,
740
- "flexDirection": "row",
741
- "justifyContent": "center",
742
- "padding": 12,
743
- },
744
- undefined,
745
- ]
746
- }
747
- >
748
- <Text
749
- allowFontScaling={false}
750
- disabled={false}
751
- ellipsizeMode="tail"
752
- numberOfLines={1}
753
- style={
754
- [
755
- {
756
- "color": "#001f23",
757
- "fontFamily": "BeVietnamPro-SemiBold",
758
- "fontSize": 16,
759
- "letterSpacing": 0.24,
760
- "lineHeight": 24,
761
- },
762
- [
763
- {
764
- "color": "#401960",
765
- "flexShrink": 1,
766
- "lineHeight": 22,
767
- "textAlign": "center",
768
- },
769
- undefined,
770
- ],
771
- ]
772
- }
773
- themeButtonVariant="text-primary"
774
- themeIntent="body"
775
- themeTypeface="neutral"
776
- themeVariant="regular-bold"
777
- >
778
- Confirm
779
- </Text>
780
- </View>
781
- </View>
782
- </View>
783
- </RCTSafeAreaView>
756
+ ],
757
+ ]
758
+ }
759
+ themeButtonVariant="text-primary"
760
+ themeIntent="body"
761
+ themeTypeface="neutral"
762
+ themeVariant="regular-bold"
763
+ >
764
+ Confirm
765
+ </Text>
766
+ </View>
784
767
  </View>
785
768
  </View>
786
- </View>
769
+ </RCTSafeAreaView>
787
770
  </View>
788
771
  </View>
789
- </RCTModalHostView>
790
- </View>
772
+ </View>,
773
+ ]
791
774
  `;