Skip to content

Commit 0471621

Browse files
jameswilddevjameswilddev
committed
Fix intermittent failures to measure tiled components on Android.
1 parent 381c5e1 commit 0471621

File tree

4 files changed

+30
-2
lines changed

4 files changed

+30
-2
lines changed

‎react-native/components/createTiledComponent/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export const createTiledComponent = (
5757
if (sizing === null) {
5858
return (
5959
<View
60+
collapsable={false}
6061
ref={ref}
6162
onLayout={onLayout}
6263
style={globalStyles.outerView}
@@ -103,6 +104,7 @@ export const createTiledComponent = (
103104

104105
return (
105106
<View
107+
collapsable={false}
106108
ref={ref}
107109
onLayout={onLayout}
108110
style={globalStyles.outerView}

‎react-native/components/createTiledComponent/unit.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ test('renders as expected without any children', async () => {
1212
rendered: expect.objectContaining({
1313
type: View,
1414
props: {
15+
collapsable: false,
1516
onLayout: expect.any(Function),
1617
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
1718
pointerEvents: 'box-none'
@@ -42,6 +43,7 @@ test('renders as expected without any children', async () => {
4243
rendered: expect.objectContaining({
4344
type: View,
4445
props: {
46+
collapsable: false,
4547
onLayout: expect.any(Function),
4648
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
4749
pointerEvents: 'box-none',
@@ -67,6 +69,7 @@ test('renders as expected with less than one row', async () => {
6769
rendered: expect.objectContaining({
6870
type: View,
6971
props: {
72+
collapsable: false,
7073
onLayout: expect.any(Function),
7174
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
7275
pointerEvents: 'box-none'
@@ -97,6 +100,7 @@ test('renders as expected with less than one row', async () => {
97100
rendered: expect.objectContaining({
98101
type: View,
99102
props: {
103+
collapsable: false,
100104
onLayout: expect.any(Function),
101105
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
102106
pointerEvents: 'box-none',
@@ -159,6 +163,7 @@ test('renders as expected with exactly one row', async () => {
159163
rendered: expect.objectContaining({
160164
type: View,
161165
props: {
166+
collapsable: false,
162167
onLayout: expect.any(Function),
163168
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
164169
pointerEvents: 'box-none'
@@ -189,6 +194,7 @@ test('renders as expected with exactly one row', async () => {
189194
rendered: expect.objectContaining({
190195
type: View,
191196
props: {
197+
collapsable: false,
192198
onLayout: expect.any(Function),
193199
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
194200
pointerEvents: 'box-none',
@@ -271,6 +277,7 @@ test('renders as expected with less than two rows', async () => {
271277
rendered: expect.objectContaining({
272278
type: View,
273279
props: {
280+
collapsable: false,
274281
onLayout: expect.any(Function),
275282
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
276283
pointerEvents: 'box-none'
@@ -301,6 +308,7 @@ test('renders as expected with less than two rows', async () => {
301308
rendered: expect.objectContaining({
302309
type: View,
303310
props: {
311+
collapsable: false,
304312
onLayout: expect.any(Function),
305313
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
306314
pointerEvents: 'box-none',
@@ -421,6 +429,7 @@ test('renders as expected with exactly two rows', async () => {
421429
rendered: expect.objectContaining({
422430
type: View,
423431
props: {
432+
collapsable: false,
424433
onLayout: expect.any(Function),
425434
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
426435
pointerEvents: 'box-none'
@@ -451,6 +460,7 @@ test('renders as expected with exactly two rows', async () => {
451460
rendered: expect.objectContaining({
452461
type: View,
453462
props: {
463+
collapsable: false,
454464
onLayout: expect.any(Function),
455465
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
456466
pointerEvents: 'box-none',
@@ -592,6 +602,7 @@ test('renders as expected with less than three rows', async () => {
592602
rendered: expect.objectContaining({
593603
type: View,
594604
props: {
605+
collapsable: false,
595606
onLayout: expect.any(Function),
596607
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
597608
pointerEvents: 'box-none'
@@ -622,6 +633,7 @@ test('renders as expected with less than three rows', async () => {
622633
rendered: expect.objectContaining({
623634
type: View,
624635
props: {
636+
collapsable: false,
625637
onLayout: expect.any(Function),
626638
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
627639
pointerEvents: 'box-none',
@@ -801,6 +813,7 @@ test('renders as expected with exactly three rows', async () => {
801813
rendered: expect.objectContaining({
802814
type: View,
803815
props: {
816+
collapsable: false,
804817
onLayout: expect.any(Function),
805818
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
806819
pointerEvents: 'box-none'
@@ -831,6 +844,7 @@ test('renders as expected with exactly three rows', async () => {
831844
rendered: expect.objectContaining({
832845
type: View,
833846
props: {
847+
collapsable: false,
834848
onLayout: expect.any(Function),
835849
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
836850
pointerEvents: 'box-none',
@@ -1029,6 +1043,7 @@ test('renders as expected without column spacing', async () => {
10291043
rendered: expect.objectContaining({
10301044
type: View,
10311045
props: {
1046+
collapsable: false,
10321047
onLayout: expect.any(Function),
10331048
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
10341049
pointerEvents: 'box-none'
@@ -1059,6 +1074,7 @@ test('renders as expected without column spacing', async () => {
10591074
rendered: expect.objectContaining({
10601075
type: View,
10611076
props: {
1077+
collapsable: false,
10621078
onLayout: expect.any(Function),
10631079
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
10641080
pointerEvents: 'box-none',
@@ -1251,6 +1267,7 @@ test('renders as expected without row spacing', async () => {
12511267
rendered: expect.objectContaining({
12521268
type: View,
12531269
props: {
1270+
collapsable: false,
12541271
onLayout: expect.any(Function),
12551272
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
12561273
pointerEvents: 'box-none'
@@ -1281,6 +1298,7 @@ test('renders as expected without row spacing', async () => {
12811298
rendered: expect.objectContaining({
12821299
type: View,
12831300
props: {
1301+
collapsable: false,
12841302
onLayout: expect.any(Function),
12851303
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
12861304
pointerEvents: 'box-none',
@@ -1473,6 +1491,7 @@ test('renders as expected without an aspect ratio or row spacing', async () => {
14731491
rendered: expect.objectContaining({
14741492
type: View,
14751493
props: {
1494+
collapsable: false,
14761495
onLayout: expect.any(Function),
14771496
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
14781497
pointerEvents: 'box-none'
@@ -1503,6 +1522,7 @@ test('renders as expected without an aspect ratio or row spacing', async () => {
15031522
rendered: expect.objectContaining({
15041523
type: View,
15051524
props: {
1525+
collapsable: false,
15061526
onLayout: expect.any(Function),
15071527
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
15081528
pointerEvents: 'box-none',
@@ -1686,6 +1706,7 @@ test('renders as expected without an aspect ratio', async () => {
16861706
rendered: expect.objectContaining({
16871707
type: View,
16881708
props: {
1709+
collapsable: false,
16891710
onLayout: expect.any(Function),
16901711
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
16911712
pointerEvents: 'box-none'
@@ -1716,6 +1737,7 @@ test('renders as expected without an aspect ratio', async () => {
17161737
rendered: expect.objectContaining({
17171738
type: View,
17181739
props: {
1740+
collapsable: false,
17191741
onLayout: expect.any(Function),
17201742
style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
17211743
pointerEvents: 'box-none',

‎react-native/hooks/useMeasure/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import type {
77

88
/**
99
* A React hook which executes a callback when an element's dimensions are first
10-
* known or change.
10+
* known or change. You MUST set collapsable to false on the associated view
11+
* for this to work reliably on Android.
1112
* @param onMeasure The callback executed when the element's dimensions are
1213
* first known or change.
1314
* @returns A "ref" callback and "onLayout" callback to pass to the

‎react-native/hooks/useMeasure/readme.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
A React hook which executes a callback when an element's dimensions are first
44
known or change.
55

6+
You MUST set collapsable to false on the associated view for this to work
7+
reliably on Android.
8+
69
## Usage
710

811
```tsx
@@ -14,7 +17,7 @@ const ExampleScreen = () => {
1417
});
1518

1619
return (
17-
<Button ref={ref} onLayout={onLayout} />
20+
<View collapsable={false} ref={ref} onLayout={onLayout} />
1821
);
1922
};
2023
```

0 commit comments

Comments
 (0)