@hero-design/rn 8.55.1-rc2.3 → 8.56.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 (84) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/CHANGELOG.md +5 -34
  3. package/es/index.js +5385 -4937
  4. package/lib/index.js +5390 -4939
  5. package/package.json +8 -8
  6. package/sonar-project.properties +1 -0
  7. package/src/components/AnimatedScroller/AnimatedFAB.tsx +105 -0
  8. package/src/components/AnimatedScroller/AnimatedScrollable.tsx +55 -0
  9. package/src/components/AnimatedScroller/FlatListWithFAB.tsx +23 -0
  10. package/src/components/AnimatedScroller/ScrollViewWithFAB.tsx +21 -0
  11. package/src/components/AnimatedScroller/SectionListWithFAB.tsx +26 -0
  12. package/src/components/AnimatedScroller/index.tsx +5 -0
  13. package/src/components/Carousel/__tests__/__snapshots__/index.spec.tsx.snap +26 -833
  14. package/src/components/Carousel/__tests__/index.spec.tsx +9 -3
  15. package/src/components/Carousel/index.tsx +19 -6
  16. package/src/components/FAB/FAB.tsx +6 -6
  17. package/src/index.ts +8 -0
  18. package/types/components/Accordion/StyledAccordion.d.ts +5 -5
  19. package/types/components/Alert/StyledAlert.d.ts +5 -5
  20. package/types/components/AnimatedScroller/AnimatedFAB.d.ts +10 -0
  21. package/types/components/AnimatedScroller/AnimatedScrollable.d.ts +16 -0
  22. package/types/components/AnimatedScroller/FlatListWithFAB.d.ts +12 -0
  23. package/types/components/AnimatedScroller/ScrollViewWithFAB.d.ts +12 -0
  24. package/types/components/AnimatedScroller/SectionListWithFAB.d.ts +12 -0
  25. package/types/components/AnimatedScroller/index.d.ts +4 -0
  26. package/types/components/Attachment/StyledAttachment.d.ts +4 -4
  27. package/types/components/Avatar/AvatarStack/StyledAvatarStack.d.ts +3 -3
  28. package/types/components/Avatar/StyledAvatar.d.ts +4 -4
  29. package/types/components/Badge/StyledBadge.d.ts +3 -3
  30. package/types/components/BottomNavigation/StyledBottomNavigation.d.ts +7 -7
  31. package/types/components/BottomSheet/StyledBottomSheet.d.ts +8 -8
  32. package/types/components/Box/StyledBox.d.ts +1 -1
  33. package/types/components/Button/LoadingIndicator/StyledLoadingIndicator.d.ts +2 -2
  34. package/types/components/Button/StyledButton.d.ts +5 -5
  35. package/types/components/Button/UtilityButton/StyledUtilityButton.d.ts +3 -3
  36. package/types/components/Calendar/StyledCalendar.d.ts +9 -9
  37. package/types/components/Card/DataCard/StyledDataCard.d.ts +2 -2
  38. package/types/components/Card/StyledCard.d.ts +1 -1
  39. package/types/components/Carousel/StyledCardCarousel.d.ts +4 -4
  40. package/types/components/Carousel/StyledCarousel.d.ts +9 -9
  41. package/types/components/Checkbox/StyledCheckbox.d.ts +5 -5
  42. package/types/components/Chip/StyledChip.d.ts +4 -4
  43. package/types/components/Collapse/StyledCollapse.d.ts +3 -3
  44. package/types/components/ContentNavigator/StyledContentNavigator.d.ts +1 -1
  45. package/types/components/DatePicker/StyledDatePicker.d.ts +1 -1
  46. package/types/components/Divider/StyledDivider.d.ts +1 -1
  47. package/types/components/Drawer/StyledDrawer.d.ts +7 -7
  48. package/types/components/Empty/StyledEmpty.d.ts +3 -3
  49. package/types/components/Error/StyledError.d.ts +10 -10
  50. package/types/components/FAB/ActionGroup/StyledActionGroup.d.ts +5 -5
  51. package/types/components/FAB/ActionGroup/StyledActionItem.d.ts +3 -3
  52. package/types/components/FAB/StyledFAB.d.ts +4 -4
  53. package/types/components/Icon/HeroIcon/index.d.ts +1 -1
  54. package/types/components/List/StyledBasicListItem.d.ts +4 -4
  55. package/types/components/List/StyledListItem.d.ts +7 -7
  56. package/types/components/PageControl/StyledPageControl.d.ts +2 -2
  57. package/types/components/PinInput/StyledPinInput.d.ts +10 -10
  58. package/types/components/Progress/StyledProgressBar.d.ts +2 -2
  59. package/types/components/Progress/StyledProgressCircle.d.ts +6 -6
  60. package/types/components/Radio/StyledRadio.d.ts +3 -3
  61. package/types/components/Rate/StyledRate.d.ts +2 -2
  62. package/types/components/RichTextEditor/StyledRichTextEditor.d.ts +2 -2
  63. package/types/components/RichTextEditor/StyledToolbar.d.ts +3 -3
  64. package/types/components/SectionHeading/StyledHeading.d.ts +3 -3
  65. package/types/components/Select/StyledSelect.d.ts +3 -3
  66. package/types/components/Skeleton/StyledSkeleton.d.ts +2 -2
  67. package/types/components/Spinner/StyledSpinner.d.ts +4 -4
  68. package/types/components/Success/StyledSuccess.d.ts +9 -9
  69. package/types/components/Swipeable/StyledSwipeable.d.ts +1 -1
  70. package/types/components/Switch/SelectorSwitch/StyledSelectorSwitch.d.ts +4 -4
  71. package/types/components/Switch/StyledSwitch.d.ts +2 -2
  72. package/types/components/Tabs/StyledScrollableTabs.d.ts +8 -8
  73. package/types/components/Tabs/StyledTabs.d.ts +8 -8
  74. package/types/components/Tag/StyledTag.d.ts +2 -2
  75. package/types/components/TextInput/StyledTextInput.d.ts +13 -13
  76. package/types/components/TimePicker/StyledTimePicker.d.ts +1 -1
  77. package/types/components/Toast/StyledToast.d.ts +6 -6
  78. package/types/components/Toolbar/StyledToolbar.d.ts +5 -5
  79. package/types/components/Typography/Body/StyledBody.d.ts +1 -1
  80. package/types/components/Typography/Caption/StyledCaption.d.ts +1 -1
  81. package/types/components/Typography/Label/StyledLabel.d.ts +1 -1
  82. package/types/components/Typography/Text/StyledText.d.ts +1 -1
  83. package/types/components/Typography/Title/StyledTitle.d.ts +1 -1
  84. package/types/index.d.ts +2 -1
package/src/components/Carousel/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -97,6 +97,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
97
97
  }
98
98
  getItem={[Function]}
99
99
  getItemCount={[Function]}
100
+ getItemLayout={[Function]}
100
101
  horizontal={true}
101
102
  keyExtractor={[Function]}
102
103
  onContentSizeChange={[Function]}
@@ -133,7 +134,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
133
134
  <View>
134
135
  <View
135
136
  onFocusCapture={[Function]}
136
- onLayout={[Function]}
137
137
  style={
138
138
  [
139
139
  {
@@ -148,7 +148,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
148
148
  [
149
149
  {},
150
150
  {
151
- "width": 750,
151
+ "width": 300,
152
152
  },
153
153
  ]
154
154
  }
@@ -185,13 +185,13 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
185
185
  },
186
186
  [
187
187
  {
188
- "width": 750,
188
+ "width": 300,
189
189
  },
190
190
  undefined,
191
191
  ],
192
192
  ]
193
193
  }
194
- width={750}
194
+ width={300}
195
195
  >
196
196
  <Text
197
197
  allowFontScaling={false}
@@ -244,7 +244,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
244
244
  </View>
245
245
  <View
246
246
  onFocusCapture={[Function]}
247
- onLayout={[Function]}
248
247
  style={
249
248
  [
250
249
  {
@@ -259,7 +258,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
259
258
  [
260
259
  {},
261
260
  {
262
- "width": 750,
261
+ "width": 300,
263
262
  },
264
263
  ]
265
264
  }
@@ -300,13 +299,13 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
300
299
  },
301
300
  [
302
301
  {
303
- "width": 750,
302
+ "width": 300,
304
303
  },
305
304
  undefined,
306
305
  ],
307
306
  ]
308
307
  }
309
- width={750}
308
+ width={300}
310
309
  >
311
310
  <Image
312
311
  source={
@@ -376,7 +375,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
376
375
  </View>
377
376
  <View
378
377
  onFocusCapture={[Function]}
379
- onLayout={[Function]}
380
378
  style={
381
379
  [
382
380
  {
@@ -391,7 +389,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
391
389
  [
392
390
  {},
393
391
  {
394
- "width": 750,
392
+ "width": 300,
395
393
  },
396
394
  ]
397
395
  }
@@ -438,13 +436,13 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
438
436
  },
439
437
  [
440
438
  {
441
- "width": 750,
439
+ "width": 300,
442
440
  },
443
441
  undefined,
444
442
  ],
445
443
  ]
446
444
  }
447
- width={750}
445
+ width={300}
448
446
  >
449
447
  <Text
450
448
  allowFontScaling={false}
@@ -497,7 +495,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
497
495
  </View>
498
496
  <View
499
497
  onFocusCapture={[Function]}
500
- onLayout={[Function]}
501
498
  style={
502
499
  [
503
500
  {
@@ -512,7 +509,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
512
509
  [
513
510
  {},
514
511
  {
515
- "width": 750,
512
+ "width": 300,
516
513
  },
517
514
  ]
518
515
  }
@@ -557,13 +554,13 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
557
554
  },
558
555
  [
559
556
  {
560
- "width": 750,
557
+ "width": 300,
561
558
  },
562
559
  undefined,
563
560
  ],
564
561
  ]
565
562
  }
566
- width={750}
563
+ width={300}
567
564
  >
568
565
  <Text
569
566
  allowFontScaling={false}
@@ -991,6 +988,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
991
988
  }
992
989
  getItem={[Function]}
993
990
  getItemCount={[Function]}
991
+ getItemLayout={[Function]}
994
992
  horizontal={true}
995
993
  keyExtractor={[Function]}
996
994
  onContentSizeChange={[Function]}
@@ -1027,7 +1025,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1027
1025
  <View>
1028
1026
  <View
1029
1027
  onFocusCapture={[Function]}
1030
- onLayout={[Function]}
1031
1028
  style={
1032
1029
  [
1033
1030
  {
@@ -1042,7 +1039,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1042
1039
  [
1043
1040
  {},
1044
1041
  {
1045
- "width": 750,
1042
+ "width": 300,
1046
1043
  },
1047
1044
  ]
1048
1045
  }
@@ -1079,13 +1076,13 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1079
1076
  },
1080
1077
  [
1081
1078
  {
1082
- "width": 750,
1079
+ "width": 300,
1083
1080
  },
1084
1081
  undefined,
1085
1082
  ],
1086
1083
  ]
1087
1084
  }
1088
- width={750}
1085
+ width={300}
1089
1086
  >
1090
1087
  <Text
1091
1088
  allowFontScaling={false}
@@ -1138,7 +1135,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1138
1135
  </View>
1139
1136
  <View
1140
1137
  onFocusCapture={[Function]}
1141
- onLayout={[Function]}
1142
1138
  style={
1143
1139
  [
1144
1140
  {
@@ -1153,7 +1149,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1153
1149
  [
1154
1150
  {},
1155
1151
  {
1156
- "width": 750,
1152
+ "width": 300,
1157
1153
  },
1158
1154
  ]
1159
1155
  }
@@ -1194,13 +1190,13 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1194
1190
  },
1195
1191
  [
1196
1192
  {
1197
- "width": 750,
1193
+ "width": 300,
1198
1194
  },
1199
1195
  undefined,
1200
1196
  ],
1201
1197
  ]
1202
1198
  }
1203
- width={750}
1199
+ width={300}
1204
1200
  >
1205
1201
  <Image
1206
1202
  source={
@@ -1270,7 +1266,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1270
1266
  </View>
1271
1267
  <View
1272
1268
  onFocusCapture={[Function]}
1273
- onLayout={[Function]}
1274
1269
  style={
1275
1270
  [
1276
1271
  {
@@ -1285,7 +1280,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1285
1280
  [
1286
1281
  {},
1287
1282
  {
1288
- "width": 750,
1283
+ "width": 300,
1289
1284
  },
1290
1285
  ]
1291
1286
  }
@@ -1332,13 +1327,13 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1332
1327
  },
1333
1328
  [
1334
1329
  {
1335
- "width": 750,
1330
+ "width": 300,
1336
1331
  },
1337
1332
  undefined,
1338
1333
  ],
1339
1334
  ]
1340
1335
  }
1341
- width={750}
1336
+ width={300}
1342
1337
  >
1343
1338
  <Text
1344
1339
  allowFontScaling={false}
@@ -1391,7 +1386,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1391
1386
  </View>
1392
1387
  <View
1393
1388
  onFocusCapture={[Function]}
1394
- onLayout={[Function]}
1395
1389
  style={
1396
1390
  [
1397
1391
  {
@@ -1406,7 +1400,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1406
1400
  [
1407
1401
  {},
1408
1402
  {
1409
- "width": 750,
1403
+ "width": 300,
1410
1404
  },
1411
1405
  ]
1412
1406
  }
@@ -1451,814 +1445,13 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
1451
1445
  },
1452
1446
  [
1453
1447
  {
1454
- "width": 750,
1448
+ "width": 300,
1455
1449
  },
1456
1450
  undefined,
1457
1451
  ],
1458
1452
  ]
1459
1453
  }
1460
- width={750}
1461
- >
1462
- <Text
1463
- allowFontScaling={false}
1464
- style={
1465
- [
1466
- {
1467
- "color": "#001f23",
1468
- "fontFamily": "RebondGrotesque-SemiBold",
1469
- "fontSize": 36,
1470
- "letterSpacing": 1.5,
1471
- "lineHeight": 44,
1472
- },
1473
- [
1474
- {
1475
- "marginBottom": 16,
1476
- "marginTop": 8,
1477
- },
1478
- undefined,
1479
- ],
1480
- ]
1481
- }
1482
- themeIntent="body"
1483
- themeLevel="h1"
1484
- themeTypeface="playful"
1485
- >
1486
- Test slide 4
1487
- </Text>
1488
- </View>
1489
- </View>
1490
- </View>
1491
- </View>
1492
- </RCTScrollView>
1493
- <View
1494
- style={
1495
- [
1496
- {
1497
- "flexDirection": "row",
1498
- "justifyContent": "space-between",
1499
- "marginBottom": 24,
1500
- "paddingHorizontal": 24,
1501
- "paddingVertical": 16,
1502
- },
1503
- undefined,
1504
- ]
1505
- }
1506
- >
1507
- <View
1508
- accessibilityState={
1509
- {
1510
- "disabled": false,
1511
- }
1512
- }
1513
- accessibilityValue={
1514
- {
1515
- "max": undefined,
1516
- "min": undefined,
1517
- "now": undefined,
1518
- "text": undefined,
1519
- }
1520
- }
1521
- accessible={true}
1522
- focusable={true}
1523
- onClick={[Function]}
1524
- onResponderGrant={[Function]}
1525
- onResponderMove={[Function]}
1526
- onResponderRelease={[Function]}
1527
- onResponderTerminate={[Function]}
1528
- onResponderTerminationRequest={[Function]}
1529
- onStartShouldSetResponder={[Function]}
1530
- style={
1531
- [
1532
- {
1533
- "alignItems": "center",
1534
- "alignSelf": "stretch",
1535
- "backgroundColor": "#401960",
1536
- "borderRadius": 32,
1537
- "flexDirection": "row",
1538
- "height": 60,
1539
- "justifyContent": "center",
1540
- "padding": 16,
1541
- },
1542
- undefined,
1543
- ]
1544
- }
1545
- >
1546
- <Text
1547
- allowFontScaling={false}
1548
- disabled={false}
1549
- ellipsizeMode="tail"
1550
- numberOfLines={1}
1551
- style={
1552
- [
1553
- {
1554
- "color": "#001f23",
1555
- "fontFamily": "BeVietnamPro-SemiBold",
1556
- "fontSize": 18,
1557
- "letterSpacing": 0.24,
1558
- "lineHeight": 28,
1559
- },
1560
- [
1561
- {
1562
- "color": "#ffffff",
1563
- "flexShrink": 1,
1564
- "textAlign": "center",
1565
- },
1566
- undefined,
1567
- ],
1568
- ]
1569
- }
1570
- themeButtonVariant="filled-primary"
1571
- themeIntent="body"
1572
- themeLevel="h5"
1573
- themeTypeface="neutral"
1574
- >
1575
- Skip
1576
- </Text>
1577
- </View>
1578
- </View>
1579
- </View>
1580
- </View>
1581
- <View
1582
- pointerEvents="box-none"
1583
- position="bottom"
1584
- style={
1585
- [
1586
- {
1587
- "bottom": 0,
1588
- "elevation": 9999,
1589
- "flexDirection": "column-reverse",
1590
- "left": 0,
1591
- "paddingHorizontal": 24,
1592
- "paddingVertical": 16,
1593
- "position": "absolute",
1594
- "right": 0,
1595
- "top": 0,
1596
- },
1597
- undefined,
1598
- ]
1599
- }
1600
- />
1601
- </View>
1602
- `;
1603
-
1604
- exports[`Carousel should call skip call back when press skip 1`] = `
1605
- <View
1606
- style={
1607
- {
1608
- "flex": 1,
1609
- }
1610
- }
1611
- >
1612
- <View
1613
- testID="carousel"
1614
- >
1615
- <View
1616
- style={
1617
- [
1618
- {
1619
- "backgroundColor": "#ece8ef",
1620
- "bottom": 0,
1621
- "left": 0,
1622
- "position": "absolute",
1623
- "right": 0,
1624
- "top": 0,
1625
- },
1626
- undefined,
1627
- ]
1628
- }
1629
- themeSlideBackground="#ece8ef"
1630
- />
1631
- <View
1632
- style={
1633
- [
1634
- {
1635
- "alignItems": "center",
1636
- "height": 48,
1637
- "justifyContent": "center",
1638
- },
1639
- undefined,
1640
- ]
1641
- }
1642
- >
1643
- <View
1644
- style={
1645
- [
1646
- {
1647
- "alignItems": "center",
1648
- "flexDirection": "row",
1649
- },
1650
- [
1651
- {
1652
- "paddingVertical": 8,
1653
- },
1654
- undefined,
1655
- ],
1656
- ]
1657
- }
1658
- >
1659
- <View
1660
- accessibilityState={
1661
- {
1662
- "selected": true,
1663
- }
1664
- }
1665
- collapsable={false}
1666
- style={
1667
- {
1668
- "backgroundColor": "#401960",
1669
- "borderRadius": 999,
1670
- "height": 8,
1671
- "marginHorizontal": 8,
1672
- "opacity": 1,
1673
- "width": 24,
1674
- }
1675
- }
1676
- testID="page-control-indicator0"
1677
- />
1678
- <View
1679
- accessibilityState={
1680
- {
1681
- "selected": false,
1682
- }
1683
- }
1684
- collapsable={false}
1685
- style={
1686
- {
1687
- "backgroundColor": "#401960",
1688
- "borderRadius": 999,
1689
- "height": 8,
1690
- "marginHorizontal": 8,
1691
- "opacity": 0.5,
1692
- "width": 8,
1693
- }
1694
- }
1695
- testID="page-control-indicator1"
1696
- />
1697
- <View
1698
- accessibilityState={
1699
- {
1700
- "selected": false,
1701
- }
1702
- }
1703
- collapsable={false}
1704
- style={
1705
- {
1706
- "backgroundColor": "#401960",
1707
- "borderRadius": 999,
1708
- "height": 8,
1709
- "marginHorizontal": 8,
1710
- "opacity": 0.5,
1711
- "width": 8,
1712
- }
1713
- }
1714
- testID="page-control-indicator2"
1715
- />
1716
- <View
1717
- accessibilityState={
1718
- {
1719
- "selected": false,
1720
- }
1721
- }
1722
- collapsable={false}
1723
- style={
1724
- {
1725
- "backgroundColor": "#401960",
1726
- "borderRadius": 999,
1727
- "height": 8,
1728
- "marginHorizontal": 8,
1729
- "opacity": 0.5,
1730
- "width": 8,
1731
- }
1732
- }
1733
- testID="page-control-indicator3"
1734
- />
1735
- </View>
1736
- </View>
1737
- <View
1738
- style={
1739
- [
1740
- {
1741
- "flexGrow": 2,
1742
- "justifyContent": "space-between",
1743
- },
1744
- undefined,
1745
- ]
1746
- }
1747
- >
1748
- <RCTScrollView
1749
- bounces={false}
1750
- data={
1751
- [
1752
- {
1753
- "background": "#ece8ef",
1754
- "body": "Access your Work, Money and Benefits in the palm of your hand.",
1755
- "heading": "Welcome to the new Employment Hero app",
1756
- "image": 1,
1757
- },
1758
- {
1759
- "background": "#ccd2d3",
1760
- "body": "Our app now has a new bright clean modern look and feel with the same great features.",
1761
- "content": <Image
1762
- source={
1763
- {
1764
- "uri": "https://picsum.photos/30",
1765
- }
1766
- }
1767
- />,
1768
- "heading": "Same app with a new look!",
1769
- "image": "https://picsum.photos/800/1200",
1770
- },
1771
- {
1772
- "background": "#ccd2d3",
1773
- "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.",
1774
- "heading": "Easier to get around",
1775
- "image": {
1776
- "height": 100,
1777
- "resizeMode": "cover",
1778
- "uri": "https://picsum.photos/1200/800",
1779
- "width": 30,
1780
- },
1781
- },
1782
- {
1783
- "background": "#ccd2d3",
1784
- "heading": "Test slide 4",
1785
- "image": {
1786
- "height": 100,
1787
- "uri": "https://picsum.photos/1200/800",
1788
- "width": 30,
1789
- },
1790
- },
1791
- ]
1792
- }
1793
- getItem={[Function]}
1794
- getItemCount={[Function]}
1795
- horizontal={true}
1796
- keyExtractor={[Function]}
1797
- onContentSizeChange={[Function]}
1798
- onLayout={[Function]}
1799
- onMomentumScrollBegin={[Function]}
1800
- onMomentumScrollEnd={[Function]}
1801
- onScroll={[Function]}
1802
- onScrollBeginDrag={[Function]}
1803
- onScrollEndDrag={[Function]}
1804
- onViewableItemsChanged={[Function]}
1805
- pagingEnabled={true}
1806
- removeClippedSubviews={false}
1807
- renderItem={[Function]}
1808
- scrollEventThrottle={32}
1809
- showsHorizontalScrollIndicator={false}
1810
- stickyHeaderIndices={[]}
1811
- testID="carousel_flatlist"
1812
- viewabilityConfig={
1813
- {
1814
- "viewAreaCoveragePercentThreshold": 50,
1815
- }
1816
- }
1817
- viewabilityConfigCallbackPairs={
1818
- [
1819
- {
1820
- "onViewableItemsChanged": [Function],
1821
- "viewabilityConfig": {
1822
- "viewAreaCoveragePercentThreshold": 50,
1823
- },
1824
- },
1825
- ]
1826
- }
1827
- >
1828
- <View>
1829
- <View
1830
- onFocusCapture={[Function]}
1831
- onLayout={[Function]}
1832
- style={
1833
- [
1834
- {
1835
- "flexDirection": "row",
1836
- },
1837
- null,
1838
- ]
1839
- }
1840
- >
1841
- <View
1842
- style={
1843
- [
1844
- {},
1845
- {
1846
- "width": 750,
1847
- },
1848
- ]
1849
- }
1850
- >
1851
- <Image
1852
- source={1}
1853
- style={
1854
- [
1855
- {
1856
- "borderRadius": 0,
1857
- "height": 72,
1858
- "width": 72,
1859
- },
1860
- [
1861
- {
1862
- "flex": 1,
1863
- "flexGrow": 2,
1864
- "resizeMode": "contain",
1865
- "width": "100%",
1866
- },
1867
- undefined,
1868
- ],
1869
- ]
1870
- }
1871
- />
1872
- <View
1873
- marginTop="large"
1874
- paddingHorizontal="large"
1875
- style={
1876
- [
1877
- {
1878
- "marginTop": 24,
1879
- "paddingHorizontal": 24,
1880
- },
1881
- [
1882
- {
1883
- "width": 750,
1884
- },
1885
- undefined,
1886
- ],
1887
- ]
1888
- }
1889
- width={750}
1890
- >
1891
- <Text
1892
- allowFontScaling={false}
1893
- style={
1894
- [
1895
- {
1896
- "color": "#001f23",
1897
- "fontFamily": "RebondGrotesque-SemiBold",
1898
- "fontSize": 36,
1899
- "letterSpacing": 1.5,
1900
- "lineHeight": 44,
1901
- },
1902
- [
1903
- {
1904
- "marginBottom": 16,
1905
- "marginTop": 8,
1906
- },
1907
- undefined,
1908
- ],
1909
- ]
1910
- }
1911
- themeIntent="body"
1912
- themeLevel="h1"
1913
- themeTypeface="playful"
1914
- >
1915
- Welcome to the new Employment Hero app
1916
- </Text>
1917
- <Text
1918
- allowFontScaling={false}
1919
- style={
1920
- [
1921
- {
1922
- "color": "#001f23",
1923
- "fontFamily": "BeVietnamPro-Regular",
1924
- "fontSize": 16,
1925
- "letterSpacing": 0.48,
1926
- "lineHeight": 24,
1927
- },
1928
- undefined,
1929
- ]
1930
- }
1931
- themeIntent="body"
1932
- themeTypeface="neutral"
1933
- themeVariant="regular"
1934
- >
1935
- Access your Work, Money and Benefits in the palm of your hand.
1936
- </Text>
1937
- </View>
1938
- </View>
1939
- </View>
1940
- <View
1941
- onFocusCapture={[Function]}
1942
- onLayout={[Function]}
1943
- style={
1944
- [
1945
- {
1946
- "flexDirection": "row",
1947
- },
1948
- null,
1949
- ]
1950
- }
1951
- >
1952
- <View
1953
- style={
1954
- [
1955
- {},
1956
- {
1957
- "width": 750,
1958
- },
1959
- ]
1960
- }
1961
- >
1962
- <Image
1963
- source={
1964
- {
1965
- "uri": "https://picsum.photos/800/1200",
1966
- }
1967
- }
1968
- style={
1969
- [
1970
- {
1971
- "borderRadius": 0,
1972
- "height": 72,
1973
- "width": 72,
1974
- },
1975
- [
1976
- {
1977
- "flex": 1,
1978
- "flexGrow": 2,
1979
- "resizeMode": "contain",
1980
- "width": "100%",
1981
- },
1982
- undefined,
1983
- ],
1984
- ]
1985
- }
1986
- />
1987
- <View
1988
- marginTop="large"
1989
- paddingHorizontal="large"
1990
- style={
1991
- [
1992
- {
1993
- "marginTop": 24,
1994
- "paddingHorizontal": 24,
1995
- },
1996
- [
1997
- {
1998
- "width": 750,
1999
- },
2000
- undefined,
2001
- ],
2002
- ]
2003
- }
2004
- width={750}
2005
- >
2006
- <Image
2007
- source={
2008
- {
2009
- "uri": "https://picsum.photos/30",
2010
- }
2011
- }
2012
- style={
2013
- [
2014
- {
2015
- "borderRadius": 0,
2016
- "height": 72,
2017
- "width": 72,
2018
- },
2019
- undefined,
2020
- ]
2021
- }
2022
- />
2023
- <Text
2024
- allowFontScaling={false}
2025
- style={
2026
- [
2027
- {
2028
- "color": "#001f23",
2029
- "fontFamily": "RebondGrotesque-SemiBold",
2030
- "fontSize": 36,
2031
- "letterSpacing": 1.5,
2032
- "lineHeight": 44,
2033
- },
2034
- [
2035
- {
2036
- "marginBottom": 16,
2037
- "marginTop": 8,
2038
- },
2039
- undefined,
2040
- ],
2041
- ]
2042
- }
2043
- themeIntent="body"
2044
- themeLevel="h1"
2045
- themeTypeface="playful"
2046
- >
2047
- Same app with a new look!
2048
- </Text>
2049
- <Text
2050
- allowFontScaling={false}
2051
- style={
2052
- [
2053
- {
2054
- "color": "#001f23",
2055
- "fontFamily": "BeVietnamPro-Regular",
2056
- "fontSize": 16,
2057
- "letterSpacing": 0.48,
2058
- "lineHeight": 24,
2059
- },
2060
- undefined,
2061
- ]
2062
- }
2063
- themeIntent="body"
2064
- themeTypeface="neutral"
2065
- themeVariant="regular"
2066
- >
2067
- Our app now has a new bright clean modern look and feel with the same great features.
2068
- </Text>
2069
- </View>
2070
- </View>
2071
- </View>
2072
- <View
2073
- onFocusCapture={[Function]}
2074
- onLayout={[Function]}
2075
- style={
2076
- [
2077
- {
2078
- "flexDirection": "row",
2079
- },
2080
- null,
2081
- ]
2082
- }
2083
- >
2084
- <View
2085
- style={
2086
- [
2087
- {},
2088
- {
2089
- "width": 750,
2090
- },
2091
- ]
2092
- }
2093
- >
2094
- <Image
2095
- height={100}
2096
- resizeMode="cover"
2097
- source={
2098
- {
2099
- "height": 100,
2100
- "resizeMode": "cover",
2101
- "uri": "https://picsum.photos/1200/800",
2102
- "width": 30,
2103
- }
2104
- }
2105
- style={
2106
- [
2107
- {
2108
- "borderRadius": 0,
2109
- "height": 72,
2110
- "width": 72,
2111
- },
2112
- [
2113
- {
2114
- "alignSelf": "center",
2115
- "height": 100,
2116
- "resizeMode": "cover",
2117
- "width": 30,
2118
- },
2119
- undefined,
2120
- ],
2121
- ]
2122
- }
2123
- width={30}
2124
- />
2125
- <View
2126
- marginTop="large"
2127
- paddingHorizontal="large"
2128
- style={
2129
- [
2130
- {
2131
- "marginTop": 24,
2132
- "paddingHorizontal": 24,
2133
- },
2134
- [
2135
- {
2136
- "width": 750,
2137
- },
2138
- undefined,
2139
- ],
2140
- ]
2141
- }
2142
- width={750}
2143
- >
2144
- <Text
2145
- allowFontScaling={false}
2146
- style={
2147
- [
2148
- {
2149
- "color": "#001f23",
2150
- "fontFamily": "RebondGrotesque-SemiBold",
2151
- "fontSize": 36,
2152
- "letterSpacing": 1.5,
2153
- "lineHeight": 44,
2154
- },
2155
- [
2156
- {
2157
- "marginBottom": 16,
2158
- "marginTop": 8,
2159
- },
2160
- undefined,
2161
- ],
2162
- ]
2163
- }
2164
- themeIntent="body"
2165
- themeLevel="h1"
2166
- themeTypeface="playful"
2167
- >
2168
- Easier to get around
2169
- </Text>
2170
- <Text
2171
- allowFontScaling={false}
2172
- style={
2173
- [
2174
- {
2175
- "color": "#001f23",
2176
- "fontFamily": "BeVietnamPro-Regular",
2177
- "fontSize": 16,
2178
- "letterSpacing": 0.48,
2179
- "lineHeight": 24,
2180
- },
2181
- undefined,
2182
- ]
2183
- }
2184
- themeIntent="body"
2185
- themeTypeface="neutral"
2186
- themeVariant="regular"
2187
- >
2188
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.
2189
- </Text>
2190
- </View>
2191
- </View>
2192
- </View>
2193
- <View
2194
- onFocusCapture={[Function]}
2195
- onLayout={[Function]}
2196
- style={
2197
- [
2198
- {
2199
- "flexDirection": "row",
2200
- },
2201
- null,
2202
- ]
2203
- }
2204
- >
2205
- <View
2206
- style={
2207
- [
2208
- {},
2209
- {
2210
- "width": 750,
2211
- },
2212
- ]
2213
- }
2214
- >
2215
- <Image
2216
- height={100}
2217
- source={
2218
- {
2219
- "height": 100,
2220
- "uri": "https://picsum.photos/1200/800",
2221
- "width": 30,
2222
- }
2223
- }
2224
- style={
2225
- [
2226
- {
2227
- "borderRadius": 0,
2228
- "height": 72,
2229
- "width": 72,
2230
- },
2231
- [
2232
- {
2233
- "alignSelf": "center",
2234
- "height": 100,
2235
- "resizeMode": "contain",
2236
- "width": 30,
2237
- },
2238
- undefined,
2239
- ],
2240
- ]
2241
- }
2242
- width={30}
2243
- />
2244
- <View
2245
- marginTop="large"
2246
- paddingHorizontal="large"
2247
- style={
2248
- [
2249
- {
2250
- "marginTop": 24,
2251
- "paddingHorizontal": 24,
2252
- },
2253
- [
2254
- {
2255
- "width": 750,
2256
- },
2257
- undefined,
2258
- ],
2259
- ]
2260
- }
2261
- width={750}
1454
+ width={300}
2262
1455
  >
2263
1456
  <Text
2264
1457
  allowFontScaling={false}