@hero-design/rn 8.45.0 → 8.45.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.
Files changed (18) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/CHANGELOG.md +11 -0
  3. package/es/index.js +61 -22
  4. package/lib/index.js +61 -22
  5. package/package.json +6 -6
  6. package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.spec.tsx.snap +12 -6
  7. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap +4 -2
  8. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap +4 -2
  9. package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap +4 -2
  10. package/src/components/RichTextEditor/RichTextEditor.tsx +18 -5
  11. package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap +8 -4
  12. package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap +24 -12
  13. package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap +20 -10
  14. package/src/components/TextInput/StyledTextInput.tsx +2 -1
  15. package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap +67 -34
  16. package/src/components/TextInput/index.tsx +21 -6
  17. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap +8 -4
  18. package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap +8 -4
package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap CHANGED
@@ -86,7 +86,8 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
86
86
  {
87
87
  "alignItems": "center",
88
88
  "flexDirection": "row",
89
- "left": -32,
89
+ "justifyContent": "center",
90
+ "left": 0,
90
91
  "position": "absolute",
91
92
  "right": 0,
92
93
  "top": -10.666666666666666,
@@ -95,7 +96,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
95
96
  "translateY": 0,
96
97
  },
97
98
  {
98
- "translateX": 0,
99
+ "translateX": 24,
99
100
  },
100
101
  {
101
102
  "scale": 1,
@@ -137,6 +138,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
137
138
  </Text>
138
139
  <Text
139
140
  allowFontScaling={false}
141
+ onLayout={[Function]}
140
142
  style={
141
143
  [
142
144
  {
@@ -408,7 +410,8 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
408
410
  {
409
411
  "alignItems": "center",
410
412
  "flexDirection": "row",
411
- "left": -32,
413
+ "justifyContent": "center",
414
+ "left": 0,
412
415
  "position": "absolute",
413
416
  "right": 0,
414
417
  "top": -10.666666666666666,
@@ -417,7 +420,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
417
420
  "translateY": 0,
418
421
  },
419
422
  {
420
- "translateX": 0,
423
+ "translateX": 24,
421
424
  },
422
425
  {
423
426
  "scale": 1,
@@ -459,6 +462,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
459
462
  </Text>
460
463
  <Text
461
464
  allowFontScaling={false}
465
+ onLayout={[Function]}
462
466
  style={
463
467
  [
464
468
  {
@@ -729,7 +733,8 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
729
733
  {
730
734
  "alignItems": "center",
731
735
  "flexDirection": "row",
732
- "left": -32,
736
+ "justifyContent": "center",
737
+ "left": 0,
733
738
  "position": "absolute",
734
739
  "right": 0,
735
740
  "top": -10.666666666666666,
@@ -738,7 +743,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
738
743
  "translateY": 0,
739
744
  },
740
745
  {
741
- "translateX": 0,
746
+ "translateX": 24,
742
747
  },
743
748
  {
744
749
  "scale": 1,
@@ -780,6 +785,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
780
785
  </Text>
781
786
  <Text
782
787
  allowFontScaling={false}
788
+ onLayout={[Function]}
783
789
  style={
784
790
  [
785
791
  {
@@ -1036,7 +1042,8 @@ exports[`TextInput disabled renders correctly 1`] = `
1036
1042
  {
1037
1043
  "alignItems": "center",
1038
1044
  "flexDirection": "row",
1039
- "left": -32,
1045
+ "justifyContent": "center",
1046
+ "left": 0,
1040
1047
  "position": "absolute",
1041
1048
  "right": 0,
1042
1049
  "top": -10.666666666666666,
@@ -1045,7 +1052,7 @@ exports[`TextInput disabled renders correctly 1`] = `
1045
1052
  "translateY": 0,
1046
1053
  },
1047
1054
  {
1048
- "translateX": 48,
1055
+ "translateX": 24,
1049
1056
  },
1050
1057
  {
1051
1058
  "scale": 1,
@@ -1087,6 +1094,7 @@ exports[`TextInput disabled renders correctly 1`] = `
1087
1094
  </Text>
1088
1095
  <Text
1089
1096
  allowFontScaling={false}
1097
+ onLayout={[Function]}
1090
1098
  style={
1091
1099
  [
1092
1100
  {
@@ -1304,7 +1312,8 @@ exports[`TextInput error renders correctly 1`] = `
1304
1312
  {
1305
1313
  "alignItems": "center",
1306
1314
  "flexDirection": "row",
1307
- "left": -32,
1315
+ "justifyContent": "center",
1316
+ "left": 0,
1308
1317
  "position": "absolute",
1309
1318
  "right": 0,
1310
1319
  "top": -10.666666666666666,
@@ -1313,7 +1322,7 @@ exports[`TextInput error renders correctly 1`] = `
1313
1322
  "translateY": 0,
1314
1323
  },
1315
1324
  {
1316
- "translateX": 0,
1325
+ "translateX": 24,
1317
1326
  },
1318
1327
  {
1319
1328
  "scale": 1,
@@ -1355,6 +1364,7 @@ exports[`TextInput error renders correctly 1`] = `
1355
1364
  </Text>
1356
1365
  <Text
1357
1366
  allowFontScaling={false}
1367
+ onLayout={[Function]}
1358
1368
  style={
1359
1369
  [
1360
1370
  {
@@ -1628,7 +1638,8 @@ exports[`TextInput filled renders correctly 1`] = `
1628
1638
  {
1629
1639
  "alignItems": "center",
1630
1640
  "flexDirection": "row",
1631
- "left": -32,
1641
+ "justifyContent": "center",
1642
+ "left": 0,
1632
1643
  "position": "absolute",
1633
1644
  "right": 0,
1634
1645
  "top": -10.666666666666666,
@@ -1637,7 +1648,7 @@ exports[`TextInput filled renders correctly 1`] = `
1637
1648
  "translateY": 0,
1638
1649
  },
1639
1650
  {
1640
- "translateX": 0,
1651
+ "translateX": 24,
1641
1652
  },
1642
1653
  {
1643
1654
  "scale": 1,
@@ -1650,6 +1661,7 @@ exports[`TextInput filled renders correctly 1`] = `
1650
1661
  >
1651
1662
  <Text
1652
1663
  allowFontScaling={false}
1664
+ onLayout={[Function]}
1653
1665
  style={
1654
1666
  [
1655
1667
  {
@@ -1882,7 +1894,8 @@ exports[`TextInput helper text renders correctly 1`] = `
1882
1894
  {
1883
1895
  "alignItems": "center",
1884
1896
  "flexDirection": "row",
1885
- "left": -32,
1897
+ "justifyContent": "center",
1898
+ "left": 0,
1886
1899
  "position": "absolute",
1887
1900
  "right": 0,
1888
1901
  "top": -10.666666666666666,
@@ -1891,7 +1904,7 @@ exports[`TextInput helper text renders correctly 1`] = `
1891
1904
  "translateY": 0,
1892
1905
  },
1893
1906
  {
1894
- "translateX": 0,
1907
+ "translateX": 24,
1895
1908
  },
1896
1909
  {
1897
1910
  "scale": 1,
@@ -1933,6 +1946,7 @@ exports[`TextInput helper text renders correctly 1`] = `
1933
1946
  </Text>
1934
1947
  <Text
1935
1948
  allowFontScaling={false}
1949
+ onLayout={[Function]}
1936
1950
  style={
1937
1951
  [
1938
1952
  {
@@ -2172,7 +2186,8 @@ exports[`TextInput idle renders correctly 1`] = `
2172
2186
  {
2173
2187
  "alignItems": "center",
2174
2188
  "flexDirection": "row",
2175
- "left": -32,
2189
+ "justifyContent": "center",
2190
+ "left": 0,
2176
2191
  "position": "absolute",
2177
2192
  "right": 0,
2178
2193
  "top": -10.666666666666666,
@@ -2181,7 +2196,7 @@ exports[`TextInput idle renders correctly 1`] = `
2181
2196
  "translateY": 0,
2182
2197
  },
2183
2198
  {
2184
- "translateX": 0,
2199
+ "translateX": 24,
2185
2200
  },
2186
2201
  {
2187
2202
  "scale": 1,
@@ -2194,6 +2209,7 @@ exports[`TextInput idle renders correctly 1`] = `
2194
2209
  >
2195
2210
  <Text
2196
2211
  allowFontScaling={false}
2212
+ onLayout={[Function]}
2197
2213
  style={
2198
2214
  [
2199
2215
  {
@@ -2425,7 +2441,8 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
2425
2441
  {
2426
2442
  "alignItems": "center",
2427
2443
  "flexDirection": "row",
2428
- "left": -32,
2444
+ "justifyContent": "center",
2445
+ "left": 0,
2429
2446
  "position": "absolute",
2430
2447
  "right": 0,
2431
2448
  "top": -10.666666666666666,
@@ -2434,7 +2451,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
2434
2451
  "translateY": 0,
2435
2452
  },
2436
2453
  {
2437
- "translateX": 0,
2454
+ "translateX": 24,
2438
2455
  },
2439
2456
  {
2440
2457
  "scale": 1,
@@ -2476,6 +2493,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
2476
2493
  </Text>
2477
2494
  <Text
2478
2495
  allowFontScaling={false}
2496
+ onLayout={[Function]}
2479
2497
  style={
2480
2498
  [
2481
2499
  {
@@ -2691,7 +2709,8 @@ exports[`TextInput loading renders correctly 1`] = `
2691
2709
  {
2692
2710
  "alignItems": "center",
2693
2711
  "flexDirection": "row",
2694
- "left": -32,
2712
+ "justifyContent": "center",
2713
+ "left": 0,
2695
2714
  "position": "absolute",
2696
2715
  "right": 0,
2697
2716
  "top": -10.666666666666666,
@@ -2700,7 +2719,7 @@ exports[`TextInput loading renders correctly 1`] = `
2700
2719
  "translateY": 0,
2701
2720
  },
2702
2721
  {
2703
- "translateX": 48,
2722
+ "translateX": 24,
2704
2723
  },
2705
2724
  {
2706
2725
  "scale": 1,
@@ -2906,7 +2925,8 @@ exports[`TextInput max length renders correctly 1`] = `
2906
2925
  {
2907
2926
  "alignItems": "center",
2908
2927
  "flexDirection": "row",
2909
- "left": -32,
2928
+ "justifyContent": "center",
2929
+ "left": 0,
2910
2930
  "position": "absolute",
2911
2931
  "right": 0,
2912
2932
  "top": -10.666666666666666,
@@ -2915,7 +2935,7 @@ exports[`TextInput max length renders correctly 1`] = `
2915
2935
  "translateY": 0,
2916
2936
  },
2917
2937
  {
2918
- "translateX": 48,
2938
+ "translateX": 24,
2919
2939
  },
2920
2940
  {
2921
2941
  "scale": 1,
@@ -2957,6 +2977,7 @@ exports[`TextInput max length renders correctly 1`] = `
2957
2977
  </Text>
2958
2978
  <Text
2959
2979
  allowFontScaling={false}
2980
+ onLayout={[Function]}
2960
2981
  style={
2961
2982
  [
2962
2983
  {
@@ -3249,7 +3270,8 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
3249
3270
  {
3250
3271
  "alignItems": "center",
3251
3272
  "flexDirection": "row",
3252
- "left": -32,
3273
+ "justifyContent": "center",
3274
+ "left": 0,
3253
3275
  "position": "absolute",
3254
3276
  "right": 0,
3255
3277
  "top": -10.666666666666666,
@@ -3258,7 +3280,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
3258
3280
  "translateY": 0,
3259
3281
  },
3260
3282
  {
3261
- "translateX": 48,
3283
+ "translateX": 24,
3262
3284
  },
3263
3285
  {
3264
3286
  "scale": 1,
@@ -3300,6 +3322,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
3300
3322
  </Text>
3301
3323
  <Text
3302
3324
  allowFontScaling={false}
3325
+ onLayout={[Function]}
3303
3326
  style={
3304
3327
  [
3305
3328
  {
@@ -3576,7 +3599,8 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
3576
3599
  {
3577
3600
  "alignItems": "center",
3578
3601
  "flexDirection": "row",
3579
- "left": -32,
3602
+ "justifyContent": "center",
3603
+ "left": 0,
3580
3604
  "position": "absolute",
3581
3605
  "right": 0,
3582
3606
  "top": -10.666666666666666,
@@ -3585,7 +3609,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
3585
3609
  "translateY": 0,
3586
3610
  },
3587
3611
  {
3588
- "translateX": 0,
3612
+ "translateX": 24,
3589
3613
  },
3590
3614
  {
3591
3615
  "scale": 1,
@@ -3627,6 +3651,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
3627
3651
  </Text>
3628
3652
  <Text
3629
3653
  allowFontScaling={false}
3654
+ onLayout={[Function]}
3630
3655
  style={
3631
3656
  [
3632
3657
  {
@@ -3863,7 +3888,8 @@ exports[`TextInput readonly renders correctly 1`] = `
3863
3888
  {
3864
3889
  "alignItems": "center",
3865
3890
  "flexDirection": "row",
3866
- "left": -32,
3891
+ "justifyContent": "center",
3892
+ "left": 0,
3867
3893
  "position": "absolute",
3868
3894
  "right": 0,
3869
3895
  "top": -10.666666666666666,
@@ -3872,7 +3898,7 @@ exports[`TextInput readonly renders correctly 1`] = `
3872
3898
  "translateY": 0,
3873
3899
  },
3874
3900
  {
3875
- "translateX": 0,
3901
+ "translateX": 24,
3876
3902
  },
3877
3903
  {
3878
3904
  "scale": 1,
@@ -3914,6 +3940,7 @@ exports[`TextInput readonly renders correctly 1`] = `
3914
3940
  </Text>
3915
3941
  <Text
3916
3942
  allowFontScaling={false}
3943
+ onLayout={[Function]}
3917
3944
  style={
3918
3945
  [
3919
3946
  {
@@ -4130,7 +4157,8 @@ exports[`TextInput ref ref methods work correctly 1`] = `
4130
4157
  {
4131
4158
  "alignItems": "center",
4132
4159
  "flexDirection": "row",
4133
- "left": -32,
4160
+ "justifyContent": "center",
4161
+ "left": 0,
4134
4162
  "position": "absolute",
4135
4163
  "right": 0,
4136
4164
  "top": -10.666666666666666,
@@ -4139,7 +4167,7 @@ exports[`TextInput ref ref methods work correctly 1`] = `
4139
4167
  "translateY": 0,
4140
4168
  },
4141
4169
  {
4142
- "translateX": 48,
4170
+ "translateX": 24,
4143
4171
  },
4144
4172
  {
4145
4173
  "scale": 1,
@@ -4152,6 +4180,7 @@ exports[`TextInput ref ref methods work correctly 1`] = `
4152
4180
  >
4153
4181
  <Text
4154
4182
  allowFontScaling={false}
4183
+ onLayout={[Function]}
4155
4184
  style={
4156
4185
  [
4157
4186
  {
@@ -4369,7 +4398,8 @@ exports[`TextInput required renders correctly 1`] = `
4369
4398
  {
4370
4399
  "alignItems": "center",
4371
4400
  "flexDirection": "row",
4372
- "left": -32,
4401
+ "justifyContent": "center",
4402
+ "left": 0,
4373
4403
  "position": "absolute",
4374
4404
  "right": 0,
4375
4405
  "top": -10.666666666666666,
@@ -4378,7 +4408,7 @@ exports[`TextInput required renders correctly 1`] = `
4378
4408
  "translateY": 0,
4379
4409
  },
4380
4410
  {
4381
- "translateX": 0,
4411
+ "translateX": 24,
4382
4412
  },
4383
4413
  {
4384
4414
  "scale": 1,
@@ -4420,6 +4450,7 @@ exports[`TextInput required renders correctly 1`] = `
4420
4450
  </Text>
4421
4451
  <Text
4422
4452
  allowFontScaling={false}
4453
+ onLayout={[Function]}
4423
4454
  style={
4424
4455
  [
4425
4456
  {
@@ -4635,7 +4666,8 @@ exports[`TextInput variants renders textarea variant correctly 1`] = `
4635
4666
  {
4636
4667
  "alignItems": "flex-start",
4637
4668
  "flexDirection": "row",
4638
- "left": -32,
4669
+ "justifyContent": "center",
4670
+ "left": 0,
4639
4671
  "position": "absolute",
4640
4672
  "right": 0,
4641
4673
  "top": -10.666666666666666,
@@ -4644,7 +4676,7 @@ exports[`TextInput variants renders textarea variant correctly 1`] = `
4644
4676
  "translateY": 24,
4645
4677
  },
4646
4678
  {
4647
- "translateX": 48,
4679
+ "translateX": 24,
4648
4680
  },
4649
4681
  {
4650
4682
  "scale": 1,
@@ -4657,6 +4689,7 @@ exports[`TextInput variants renders textarea variant correctly 1`] = `
4657
4689
  >
4658
4690
  <Text
4659
4691
  allowFontScaling={false}
4692
+ onLayout={[Function]}
4660
4693
  style={
4661
4694
  [
4662
4695
  {
package/src/components/TextInput/index.tsx CHANGED
@@ -192,7 +192,11 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
192
192
  const isEmptyValue = displayText.length === 0;
193
193
  const actualSuffix = loading ? 'loading' : suffix;
194
194
 
195
- const [inputHeight, setInputHeight] = React.useState<number>(0);
195
+ const [inputSize, setInputSize] = React.useState<{
196
+ height: number;
197
+ width: number;
198
+ }>({ height: 0, width: 0 });
199
+ const [labelWidth, setLabelWidth] = React.useState<number>(0);
196
200
  const [prefixWidth, setPrefixWidth] = React.useState<number>(0);
197
201
 
198
202
  const [isFocused, setIsFocused] = React.useState(false);
@@ -222,14 +226,18 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
222
226
  }, [focusAnimation, isEmptyValue, isFocused]);
223
227
 
224
228
  const onLayout = useCallback((event: LayoutChangeEvent) => {
225
- const { height } = event.nativeEvent.layout;
226
- setInputHeight(height);
229
+ const { height, width } = event.nativeEvent.layout;
230
+ setInputSize((prev) => ({ ...prev, height, width }));
227
231
  }, []);
228
232
 
229
233
  const onPrefixLayout = useCallback((event: LayoutChangeEvent) => {
230
234
  const { width } = event.nativeEvent.layout;
231
235
  setPrefixWidth(width);
232
236
  }, []);
237
+ const onLabelLayout = useCallback((event: LayoutChangeEvent) => {
238
+ const { width } = event.nativeEvent.layout;
239
+ setLabelWidth(width);
240
+ }, []);
233
241
 
234
242
  const innerTextInput = React.useRef<RNTextInput | undefined | null>();
235
243
  React.useImperativeHandle(
@@ -363,7 +371,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
363
371
  inputRange: [0, 1],
364
372
  outputRange: [
365
373
  variant !== 'textarea'
366
- ? inputHeight / 2
374
+ ? inputSize.height / 2
367
375
  : theme.space.large,
368
376
  0,
369
377
  ],
@@ -373,8 +381,13 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
373
381
  translateX: focusAnimation.interpolate({
374
382
  inputRange: [0, 1],
375
383
  outputRange: [
376
- prefix ? prefixWidth * 4 : theme.space.xxxlarge,
377
- 0,
384
+ -inputSize.width / 2 +
385
+ labelWidth / 2 +
386
+ prefixWidth +
387
+ theme.space.large,
388
+ -inputSize.width / 2 +
389
+ labelWidth / 2 +
390
+ theme.space.small,
378
391
  ],
379
392
  }),
380
393
  },
@@ -403,11 +416,13 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
403
416
  nativeID={accessibilityLabelledBy}
404
417
  testID="input-label"
405
418
  themeState={state}
419
+ onLayout={onLabelLayout}
406
420
  >
407
421
  {label}
408
422
  </StyledLabelInsideTextInput>
409
423
  )}
410
424
  </StyledLabelContainerInsideTextInput>
425
+
411
426
  <StyledTextInputAndLabelContainer>
412
427
  {renderInputValue ? (
413
428
  renderInputValue(nativeInputProps)
package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap CHANGED
@@ -108,7 +108,8 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
108
108
  {
109
109
  "alignItems": "center",
110
110
  "flexDirection": "row",
111
- "left": -32,
111
+ "justifyContent": "center",
112
+ "left": 0,
112
113
  "position": "absolute",
113
114
  "right": 0,
114
115
  "top": -10.666666666666666,
@@ -117,7 +118,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
117
118
  "translateY": 0,
118
119
  },
119
120
  {
120
- "translateX": 48,
121
+ "translateX": 24,
121
122
  },
122
123
  {
123
124
  "scale": 1,
@@ -130,6 +131,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
130
131
  >
131
132
  <Text
132
133
  allowFontScaling={false}
134
+ onLayout={[Function]}
133
135
  style={
134
136
  [
135
137
  {
@@ -391,7 +393,8 @@ exports[`TimePickerAndroid renders correctly 1`] = `
391
393
  {
392
394
  "alignItems": "center",
393
395
  "flexDirection": "row",
394
- "left": -32,
396
+ "justifyContent": "center",
397
+ "left": 0,
395
398
  "position": "absolute",
396
399
  "right": 0,
397
400
  "top": -10.666666666666666,
@@ -400,7 +403,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
400
403
  "translateY": 0,
401
404
  },
402
405
  {
403
- "translateX": 48,
406
+ "translateX": 24,
404
407
  },
405
408
  {
406
409
  "scale": 1,
@@ -413,6 +416,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
413
416
  >
414
417
  <Text
415
418
  allowFontScaling={false}
419
+ onLayout={[Function]}
416
420
  style={
417
421
  [
418
422
  {
package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap CHANGED
@@ -108,7 +108,8 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
108
108
  {
109
109
  "alignItems": "center",
110
110
  "flexDirection": "row",
111
- "left": -32,
111
+ "justifyContent": "center",
112
+ "left": 0,
112
113
  "position": "absolute",
113
114
  "right": 0,
114
115
  "top": -10.666666666666666,
@@ -117,7 +118,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
117
118
  "translateY": 0,
118
119
  },
119
120
  {
120
- "translateX": 48,
121
+ "translateX": 24,
121
122
  },
122
123
  {
123
124
  "scale": 1,
@@ -130,6 +131,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
130
131
  >
131
132
  <Text
132
133
  allowFontScaling={false}
134
+ onLayout={[Function]}
133
135
  style={
134
136
  [
135
137
  {
@@ -391,7 +393,8 @@ exports[`TimePickerIOS renders correctly 1`] = `
391
393
  {
392
394
  "alignItems": "center",
393
395
  "flexDirection": "row",
394
- "left": -32,
396
+ "justifyContent": "center",
397
+ "left": 0,
395
398
  "position": "absolute",
396
399
  "right": 0,
397
400
  "top": -10.666666666666666,
@@ -400,7 +403,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
400
403
  "translateY": 0,
401
404
  },
402
405
  {
403
- "translateX": 48,
406
+ "translateX": 24,
404
407
  },
405
408
  {
406
409
  "scale": 1,
@@ -413,6 +416,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
413
416
  >
414
417
  <Text
415
418
  allowFontScaling={false}
419
+ onLayout={[Function]}
416
420
  style={
417
421
  [
418
422
  {