@hero-design/rn 8.25.0 → 8.25.2

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 (30) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/es/index.js +67 -61
  3. package/lib/index.js +65 -59
  4. package/package.json +5 -5
  5. package/src/components/Collapse/index.tsx +11 -10
  6. package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap +21 -15
  7. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +7 -5
  8. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap +7 -5
  9. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +7 -5
  10. package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap +152 -180
  11. package/src/components/FAB/FAB.tsx +15 -20
  12. package/src/components/FAB/StyledFAB.tsx +5 -10
  13. package/src/components/FAB/__tests__/StyledFAB.spec.tsx +4 -4
  14. package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap +28 -13
  15. package/src/components/FAB/__tests__/__snapshots__/index.spec.tsx.snap +170 -212
  16. package/src/components/PinInput/index.tsx +119 -88
  17. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +28 -20
  18. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +28 -20
  19. package/src/components/TextInput/StyledTextInput.tsx +4 -0
  20. package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap +21 -1
  21. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +112 -78
  22. package/src/components/TextInput/index.tsx +1 -4
  23. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +14 -10
  24. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +14 -10
  25. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +5 -1
  26. package/src/theme/components/textInput.ts +16 -2
  27. package/types/components/Collapse/index.d.ts +1 -1
  28. package/types/components/FAB/StyledFAB.d.ts +1 -5
  29. package/types/components/PinInput/index.d.ts +12 -1
  30. package/types/theme/components/textInput.d.ts +4 -0
package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap CHANGED
@@ -88,7 +88,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
88
88
  "left": 16,
89
89
  "paddingHorizontal": 4,
90
90
  "position": "absolute",
91
- "top": -10,
91
+ "top": -5,
92
92
  "zIndex": 1,
93
93
  },
94
94
  Object {
@@ -105,13 +105,15 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
105
105
  Object {
106
106
  "color": "#001f23",
107
107
  "fontFamily": "BeVietnamPro-Regular",
108
- "fontSize": 12,
109
- "letterSpacing": 0.36,
110
- "lineHeight": 20,
108
+ "fontSize": 14,
109
+ "letterSpacing": 0.42,
110
+ "lineHeight": 22,
111
111
  },
112
112
  Array [
113
113
  Object {
114
114
  "color": "#001f23",
115
+ "fontSize": 12,
116
+ "lineHeight": 12,
115
117
  },
116
118
  Object {
117
119
  "backgroundColor": "#ffffff",
@@ -120,7 +122,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
120
122
  ]
121
123
  }
122
124
  testID="input-label"
123
- themeFontSize="small"
125
+ themeFontSize="medium"
124
126
  themeFontWeight="regular"
125
127
  themeIntent="body"
126
128
  themeState="filled"
@@ -311,7 +313,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
311
313
  "left": 16,
312
314
  "paddingHorizontal": 4,
313
315
  "position": "absolute",
314
- "top": -10,
316
+ "top": -5,
315
317
  "zIndex": 1,
316
318
  },
317
319
  Object {
@@ -328,13 +330,15 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
328
330
  Object {
329
331
  "color": "#001f23",
330
332
  "fontFamily": "BeVietnamPro-Regular",
331
- "fontSize": 12,
332
- "letterSpacing": 0.36,
333
- "lineHeight": 20,
333
+ "fontSize": 14,
334
+ "letterSpacing": 0.42,
335
+ "lineHeight": 22,
334
336
  },
335
337
  Array [
336
338
  Object {
337
339
  "color": "#001f23",
340
+ "fontSize": 12,
341
+ "lineHeight": 12,
338
342
  },
339
343
  Object {
340
344
  "backgroundColor": "#ffffff",
@@ -343,7 +347,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
343
347
  ]
344
348
  }
345
349
  testID="input-label"
346
- themeFontSize="small"
350
+ themeFontSize="medium"
347
351
  themeFontWeight="regular"
348
352
  themeIntent="body"
349
353
  themeState="filled"
@@ -540,7 +544,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
540
544
  "left": 16,
541
545
  "paddingHorizontal": 4,
542
546
  "position": "absolute",
543
- "top": -10,
547
+ "top": -5,
544
548
  "zIndex": 1,
545
549
  },
546
550
  Object {
@@ -557,13 +561,15 @@ exports[`DatePicker renders variant Calendar 1`] = `
557
561
  Object {
558
562
  "color": "#001f23",
559
563
  "fontFamily": "BeVietnamPro-Regular",
560
- "fontSize": 12,
561
- "letterSpacing": 0.36,
562
- "lineHeight": 20,
564
+ "fontSize": 14,
565
+ "letterSpacing": 0.42,
566
+ "lineHeight": 22,
563
567
  },
564
568
  Array [
565
569
  Object {
566
570
  "color": "#001f23",
571
+ "fontSize": 12,
572
+ "lineHeight": 12,
567
573
  },
568
574
  Object {
569
575
  "backgroundColor": "#ffffff",
@@ -572,7 +578,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
572
578
  ]
573
579
  }
574
580
  testID="input-label"
575
- themeFontSize="small"
581
+ themeFontSize="medium"
576
582
  themeFontWeight="regular"
577
583
  themeIntent="body"
578
584
  themeState="filled"
package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap CHANGED
@@ -88,7 +88,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
88
88
  "left": 16,
89
89
  "paddingHorizontal": 4,
90
90
  "position": "absolute",
91
- "top": -10,
91
+ "top": -5,
92
92
  "zIndex": 1,
93
93
  },
94
94
  Object {
@@ -105,13 +105,15 @@ exports[`DatePickerAndroid renders correctly 1`] = `
105
105
  Object {
106
106
  "color": "#001f23",
107
107
  "fontFamily": "BeVietnamPro-Regular",
108
- "fontSize": 12,
109
- "letterSpacing": 0.36,
110
- "lineHeight": 20,
108
+ "fontSize": 14,
109
+ "letterSpacing": 0.42,
110
+ "lineHeight": 22,
111
111
  },
112
112
  Array [
113
113
  Object {
114
114
  "color": "#001f23",
115
+ "fontSize": 12,
116
+ "lineHeight": 12,
115
117
  },
116
118
  Object {
117
119
  "backgroundColor": "#ffffff",
@@ -120,7 +122,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
120
122
  ]
121
123
  }
122
124
  testID="input-label"
123
- themeFontSize="small"
125
+ themeFontSize="medium"
124
126
  themeFontWeight="regular"
125
127
  themeIntent="body"
126
128
  themeState="filled"
package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap CHANGED
@@ -88,7 +88,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
88
88
  "left": 16,
89
89
  "paddingHorizontal": 4,
90
90
  "position": "absolute",
91
- "top": -10,
91
+ "top": -5,
92
92
  "zIndex": 1,
93
93
  },
94
94
  Object {
@@ -105,13 +105,15 @@ exports[`DatePickerCalendar renders correctly 1`] = `
105
105
  Object {
106
106
  "color": "#001f23",
107
107
  "fontFamily": "BeVietnamPro-Regular",
108
- "fontSize": 12,
109
- "letterSpacing": 0.36,
110
- "lineHeight": 20,
108
+ "fontSize": 14,
109
+ "letterSpacing": 0.42,
110
+ "lineHeight": 22,
111
111
  },
112
112
  Array [
113
113
  Object {
114
114
  "color": "#001f23",
115
+ "fontSize": 12,
116
+ "lineHeight": 12,
115
117
  },
116
118
  Object {
117
119
  "backgroundColor": "#ffffff",
@@ -120,7 +122,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
120
122
  ]
121
123
  }
122
124
  testID="input-label"
123
- themeFontSize="small"
125
+ themeFontSize="medium"
124
126
  themeFontWeight="regular"
125
127
  themeIntent="body"
126
128
  themeState="filled"
package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap CHANGED
@@ -88,7 +88,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
88
88
  "left": 16,
89
89
  "paddingHorizontal": 4,
90
90
  "position": "absolute",
91
- "top": -10,
91
+ "top": -5,
92
92
  "zIndex": 1,
93
93
  },
94
94
  Object {
@@ -105,13 +105,15 @@ exports[`DatePickerIOS renders correctly 1`] = `
105
105
  Object {
106
106
  "color": "#001f23",
107
107
  "fontFamily": "BeVietnamPro-Regular",
108
- "fontSize": 12,
109
- "letterSpacing": 0.36,
110
- "lineHeight": 20,
108
+ "fontSize": 14,
109
+ "letterSpacing": 0.42,
110
+ "lineHeight": 22,
111
111
  },
112
112
  Array [
113
113
  Object {
114
114
  "color": "#001f23",
115
+ "fontSize": 12,
116
+ "lineHeight": 12,
115
117
  },
116
118
  Object {
117
119
  "backgroundColor": "#ffffff",
@@ -120,7 +122,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
120
122
  ]
121
123
  }
122
124
  testID="input-label"
123
- themeFontSize="small"
125
+ themeFontSize="medium"
124
126
  themeFontWeight="regular"
125
127
  themeIntent="body"
126
128
  themeState="filled"
package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -494,116 +494,102 @@ exports[`ActionGroup has active false 1`] = `
494
494
  </View>
495
495
  </View>
496
496
  <View
497
+ accessible={true}
498
+ focusable={false}
499
+ onClick={[Function]}
500
+ onResponderGrant={[Function]}
501
+ onResponderMove={[Function]}
502
+ onResponderRelease={[Function]}
503
+ onResponderTerminate={[Function]}
504
+ onResponderTerminationRequest={[Function]}
505
+ onStartShouldSetResponder={[Function]}
497
506
  style={
498
507
  Array [
499
- Object {},
508
+ Object {
509
+ "alignItems": "center",
510
+ "alignSelf": "flex-start",
511
+ "backgroundColor": "#401960",
512
+ "borderRadius": 999,
513
+ "elevation": 2,
514
+ "flexDirection": "row",
515
+ "justifyContent": "center",
516
+ "paddingHorizontal": 16,
517
+ "paddingVertical": 16,
518
+ "shadowColor": "#001f23",
519
+ "shadowOffset": Object {
520
+ "height": 2,
521
+ "width": 0,
522
+ },
523
+ "shadowOpacity": 0.12,
524
+ "shadowRadius": 8,
525
+ },
500
526
  Array [
501
527
  Object {
502
- "shadowColor": "#001f23",
503
- "shadowOffset": Object {
504
- "height": 2,
505
- "width": 0,
506
- },
507
- "shadowOpacity": 0.12,
508
- "shadowRadius": 8,
528
+ "alignSelf": "flex-end",
529
+ "marginRight": 24,
530
+ "marginTop": 24,
509
531
  },
510
- Array [
511
- Object {
512
- "alignSelf": "flex-end",
513
- "marginRight": 24,
514
- "marginTop": 24,
515
- },
516
- undefined,
517
- ],
532
+ undefined,
518
533
  ],
519
534
  ]
520
535
  }
521
536
  testID="fab"
522
537
  >
523
- <View
524
- accessible={true}
525
- focusable={false}
526
- onClick={[Function]}
527
- onResponderGrant={[Function]}
528
- onResponderMove={[Function]}
529
- onResponderRelease={[Function]}
530
- onResponderTerminate={[Function]}
531
- onResponderTerminationRequest={[Function]}
532
- onStartShouldSetResponder={[Function]}
538
+ <HeroIcon
539
+ name="add"
533
540
  style={
534
541
  Array [
535
542
  Object {
536
- "alignItems": "center",
537
- "alignSelf": "flex-start",
538
- "backgroundColor": "#401960",
539
- "borderRadius": 999,
540
- "elevation": 2,
541
- "flexDirection": "row",
542
- "justifyContent": "center",
543
- "overflow": "hidden",
544
- "paddingHorizontal": 16,
545
- "paddingVertical": 16,
543
+ "color": "#001f23",
544
+ "fontSize": 16,
546
545
  },
547
- undefined,
548
- ]
549
- }
550
- >
551
- <HeroIcon
552
- name="add"
553
- style={
554
546
  Array [
555
547
  Object {
556
- "color": "#001f23",
557
- "fontSize": 16,
548
+ "color": "#ffffff",
549
+ "lineHeight": 24,
550
+ "textAlign": "center",
551
+ "textAlignVertical": "center",
558
552
  },
559
- Array [
560
- Object {
561
- "color": "#ffffff",
562
- "lineHeight": 24,
563
- "textAlign": "center",
564
- "textAlignVertical": "center",
565
- },
566
- undefined,
567
- ],
568
- ]
569
- }
570
- testID="styled-fab-icon"
571
- themeIntent="text"
572
- themeSize="xsmall"
573
- />
574
- <Text
575
- allowFontScaling={false}
576
- style={
553
+ undefined,
554
+ ],
555
+ ]
556
+ }
557
+ testID="styled-fab-icon"
558
+ themeIntent="text"
559
+ themeSize="xsmall"
560
+ />
561
+ <Text
562
+ allowFontScaling={false}
563
+ style={
564
+ Array [
565
+ Object {
566
+ "color": "#001f23",
567
+ "fontFamily": "BeVietnamPro-Regular",
568
+ "fontSize": 14,
569
+ "letterSpacing": 0.42,
570
+ "lineHeight": 22,
571
+ },
577
572
  Array [
578
573
  Object {
579
- "color": "#001f23",
580
- "fontFamily": "BeVietnamPro-Regular",
581
- "fontSize": 14,
582
- "letterSpacing": 0.42,
583
- "lineHeight": 22,
574
+ "color": "#ffffff",
575
+ "fontFamily": "BeVietnamPro-SemiBold",
576
+ "fontSize": 16,
577
+ "lineHeight": 24,
578
+ "marginHorizontal": 8,
579
+ "textAlign": "center",
580
+ "textAlignVertical": "center",
584
581
  },
585
- Array [
586
- Object {
587
- "color": "#ffffff",
588
- "fontFamily": "BeVietnamPro-SemiBold",
589
- "fontSize": 16,
590
- "lineHeight": 24,
591
- "marginHorizontal": 8,
592
- "textAlign": "center",
593
- "textAlignVertical": "center",
594
- },
595
- undefined,
596
- ],
597
- ]
598
- }
599
- themeFontSize="medium"
600
- themeFontWeight="regular"
601
- themeIntent="body"
602
- themeTypeface="neutral"
603
- >
604
- Shout out
605
- </Text>
606
- </View>
582
+ undefined,
583
+ ],
584
+ ]
585
+ }
586
+ themeFontSize="medium"
587
+ themeFontWeight="regular"
588
+ themeIntent="body"
589
+ themeTypeface="neutral"
590
+ >
591
+ Shout out
592
+ </Text>
607
593
  </View>
608
594
  </View>
609
595
  `;
@@ -1102,116 +1088,102 @@ exports[`ActionGroup has active true 1`] = `
1102
1088
  </View>
1103
1089
  </View>
1104
1090
  <View
1091
+ accessible={true}
1092
+ focusable={false}
1093
+ onClick={[Function]}
1094
+ onResponderGrant={[Function]}
1095
+ onResponderMove={[Function]}
1096
+ onResponderRelease={[Function]}
1097
+ onResponderTerminate={[Function]}
1098
+ onResponderTerminationRequest={[Function]}
1099
+ onStartShouldSetResponder={[Function]}
1105
1100
  style={
1106
1101
  Array [
1107
- Object {},
1102
+ Object {
1103
+ "alignItems": "center",
1104
+ "alignSelf": "flex-start",
1105
+ "backgroundColor": "#401960",
1106
+ "borderRadius": 999,
1107
+ "elevation": 2,
1108
+ "flexDirection": "row",
1109
+ "justifyContent": "center",
1110
+ "paddingHorizontal": 16,
1111
+ "paddingVertical": 16,
1112
+ "shadowColor": "#001f23",
1113
+ "shadowOffset": Object {
1114
+ "height": 2,
1115
+ "width": 0,
1116
+ },
1117
+ "shadowOpacity": 0.12,
1118
+ "shadowRadius": 8,
1119
+ },
1108
1120
  Array [
1109
1121
  Object {
1110
- "shadowColor": "#001f23",
1111
- "shadowOffset": Object {
1112
- "height": 2,
1113
- "width": 0,
1114
- },
1115
- "shadowOpacity": 0.12,
1116
- "shadowRadius": 8,
1122
+ "alignSelf": "flex-end",
1123
+ "marginRight": 24,
1124
+ "marginTop": 24,
1117
1125
  },
1118
- Array [
1119
- Object {
1120
- "alignSelf": "flex-end",
1121
- "marginRight": 24,
1122
- "marginTop": 24,
1123
- },
1124
- undefined,
1125
- ],
1126
+ undefined,
1126
1127
  ],
1127
1128
  ]
1128
1129
  }
1129
1130
  testID="fab"
1130
1131
  >
1131
- <View
1132
- accessible={true}
1133
- focusable={false}
1134
- onClick={[Function]}
1135
- onResponderGrant={[Function]}
1136
- onResponderMove={[Function]}
1137
- onResponderRelease={[Function]}
1138
- onResponderTerminate={[Function]}
1139
- onResponderTerminationRequest={[Function]}
1140
- onStartShouldSetResponder={[Function]}
1132
+ <HeroIcon
1133
+ name="add"
1141
1134
  style={
1142
1135
  Array [
1143
1136
  Object {
1144
- "alignItems": "center",
1145
- "alignSelf": "flex-start",
1146
- "backgroundColor": "#401960",
1147
- "borderRadius": 999,
1148
- "elevation": 2,
1149
- "flexDirection": "row",
1150
- "justifyContent": "center",
1151
- "overflow": "hidden",
1152
- "paddingHorizontal": 16,
1153
- "paddingVertical": 16,
1137
+ "color": "#001f23",
1138
+ "fontSize": 16,
1154
1139
  },
1155
- undefined,
1156
- ]
1157
- }
1158
- >
1159
- <HeroIcon
1160
- name="add"
1161
- style={
1162
1140
  Array [
1163
1141
  Object {
1164
- "color": "#001f23",
1165
- "fontSize": 16,
1142
+ "color": "#ffffff",
1143
+ "lineHeight": 24,
1144
+ "textAlign": "center",
1145
+ "textAlignVertical": "center",
1166
1146
  },
1167
- Array [
1168
- Object {
1169
- "color": "#ffffff",
1170
- "lineHeight": 24,
1171
- "textAlign": "center",
1172
- "textAlignVertical": "center",
1173
- },
1174
- undefined,
1175
- ],
1176
- ]
1177
- }
1178
- testID="styled-fab-icon"
1179
- themeIntent="text"
1180
- themeSize="xsmall"
1181
- />
1182
- <Text
1183
- allowFontScaling={false}
1184
- style={
1147
+ undefined,
1148
+ ],
1149
+ ]
1150
+ }
1151
+ testID="styled-fab-icon"
1152
+ themeIntent="text"
1153
+ themeSize="xsmall"
1154
+ />
1155
+ <Text
1156
+ allowFontScaling={false}
1157
+ style={
1158
+ Array [
1159
+ Object {
1160
+ "color": "#001f23",
1161
+ "fontFamily": "BeVietnamPro-Regular",
1162
+ "fontSize": 14,
1163
+ "letterSpacing": 0.42,
1164
+ "lineHeight": 22,
1165
+ },
1185
1166
  Array [
1186
1167
  Object {
1187
- "color": "#001f23",
1188
- "fontFamily": "BeVietnamPro-Regular",
1189
- "fontSize": 14,
1190
- "letterSpacing": 0.42,
1191
- "lineHeight": 22,
1168
+ "color": "#ffffff",
1169
+ "fontFamily": "BeVietnamPro-SemiBold",
1170
+ "fontSize": 16,
1171
+ "lineHeight": 24,
1172
+ "marginHorizontal": 8,
1173
+ "textAlign": "center",
1174
+ "textAlignVertical": "center",
1192
1175
  },
1193
- Array [
1194
- Object {
1195
- "color": "#ffffff",
1196
- "fontFamily": "BeVietnamPro-SemiBold",
1197
- "fontSize": 16,
1198
- "lineHeight": 24,
1199
- "marginHorizontal": 8,
1200
- "textAlign": "center",
1201
- "textAlignVertical": "center",
1202
- },
1203
- undefined,
1204
- ],
1205
- ]
1206
- }
1207
- themeFontSize="medium"
1208
- themeFontWeight="regular"
1209
- themeIntent="body"
1210
- themeTypeface="neutral"
1211
- >
1212
- Shout out
1213
- </Text>
1214
- </View>
1176
+ undefined,
1177
+ ],
1178
+ ]
1179
+ }
1180
+ themeFontSize="medium"
1181
+ themeFontWeight="regular"
1182
+ themeIntent="body"
1183
+ themeTypeface="neutral"
1184
+ >
1185
+ Shout out
1186
+ </Text>
1215
1187
  </View>
1216
1188
  </View>
1217
1189
  `;
package/src/components/FAB/FAB.tsx CHANGED
@@ -1,14 +1,9 @@
1
1
  import React from 'react';
2
2
  import type { StyleProp, ViewStyle } from 'react-native';
3
- import { AnimatedFABIcon } from './AnimatedFABIcon';
4
- import {
5
- StyledFAB,
6
- StyledFABIcon,
7
- StyledFABText,
8
- StyledFABContainer,
9
- } from './StyledFAB';
10
- import type { IconName } from '../Icon';
11
3
  import { useTheme } from '../../theme';
4
+ import type { IconName } from '../Icon';
5
+ import { AnimatedFABIcon } from './AnimatedFABIcon';
6
+ import { StyledFAB, StyledFABIcon, StyledFABText } from './StyledFAB';
12
7
 
13
8
  export interface FABProps {
14
9
  /**
@@ -89,18 +84,18 @@ const FAB = ({
89
84
  const isIconOnly = !title;
90
85
  const theme = useTheme();
91
86
  return (
92
- <StyledFABContainer style={style} testID={testID}>
93
- <StyledFAB
94
- underlayColor={theme.__hd__.fab.colors.buttonPressedBackground}
95
- onPress={onPress}
96
- >
97
- {isIconOnly ? (
98
- <IconOnlyContent animated={animated} active={active} icon={icon} />
99
- ) : (
100
- <IconWithTextContent icon={icon} title={title} />
101
- )}
102
- </StyledFAB>
103
- </StyledFABContainer>
87
+ <StyledFAB
88
+ underlayColor={theme.__hd__.fab.colors.buttonPressedBackground}
89
+ onPress={onPress}
90
+ style={style}
91
+ testID={testID}
92
+ >
93
+ {isIconOnly ? (
94
+ <IconOnlyContent animated={animated} active={active} icon={icon} />
95
+ ) : (
96
+ <IconWithTextContent icon={icon} title={title} />
97
+ )}
98
+ </StyledFAB>
104
99
  );
105
100
  };
106
101