Fix intermittent failures to measure tiled components on Android.

jameswilddev · Jul 29, 2024 · 0471621 · 0471621
1 parent 381c5e1
commit 0471621
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 2 deletions.
diff --git a/react-native/components/createTiledComponent/index.tsx b/react-native/components/createTiledComponent/index.tsx
@@ -57,6 +57,7 @@ export const createTiledComponent = (
     if (sizing === null) {
       return (
         <View
+          collapsable={false}
           ref={ref}
           onLayout={onLayout}
           style={globalStyles.outerView}
@@ -103,6 +104,7 @@ export const createTiledComponent = (
 
       return (
         <View
+          collapsable={false}
           ref={ref}
           onLayout={onLayout}
           style={globalStyles.outerView}

diff --git a/react-native/components/createTiledComponent/unit.tsx b/react-native/components/createTiledComponent/unit.tsx
@@ -12,6 +12,7 @@ test('renders as expected without any children', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none'
@@ -42,6 +43,7 @@ test('renders as expected without any children', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none',
@@ -67,6 +69,7 @@ test('renders as expected with less than one row', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none'
@@ -97,6 +100,7 @@ test('renders as expected with less than one row', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none',
@@ -159,6 +163,7 @@ test('renders as expected with exactly one row', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none'
@@ -189,6 +194,7 @@ test('renders as expected with exactly one row', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none',
@@ -271,6 +277,7 @@ test('renders as expected with less than two rows', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none'
@@ -301,6 +308,7 @@ test('renders as expected with less than two rows', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none',
@@ -421,6 +429,7 @@ test('renders as expected with exactly two rows', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none'
@@ -451,6 +460,7 @@ test('renders as expected with exactly two rows', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none',
@@ -592,6 +602,7 @@ test('renders as expected with less than three rows', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none'
@@ -622,6 +633,7 @@ test('renders as expected with less than three rows', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none',
@@ -801,6 +813,7 @@ test('renders as expected with exactly three rows', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none'
@@ -831,6 +844,7 @@ test('renders as expected with exactly three rows', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none',
@@ -1029,6 +1043,7 @@ test('renders as expected without column spacing', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none'
@@ -1059,6 +1074,7 @@ test('renders as expected without column spacing', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none',
@@ -1251,6 +1267,7 @@ test('renders as expected without row spacing', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none'
@@ -1281,6 +1298,7 @@ test('renders as expected without row spacing', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none',
@@ -1473,6 +1491,7 @@ test('renders as expected without an aspect ratio or row spacing', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none'
@@ -1503,6 +1522,7 @@ test('renders as expected without an aspect ratio or row spacing', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none',
@@ -1686,6 +1706,7 @@ test('renders as expected without an aspect ratio', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none'
@@ -1716,6 +1737,7 @@ test('renders as expected without an aspect ratio', async () => {
     rendered: expect.objectContaining({
       type: View,
       props: {
+        collapsable: false,
         onLayout: expect.any(Function),
         style: { width: '100%', flexDirection: 'row', flexWrap: 'wrap' },
         pointerEvents: 'box-none',

diff --git a/react-native/hooks/useMeasure/index.tsx b/react-native/hooks/useMeasure/index.tsx
@@ -7,7 +7,8 @@ import type {
 
 /**
  * A React hook which executes a callback when an element's dimensions are first
- * known or change.
+ * known or change.  You MUST set collapsable to false on the associated view
+ * for this to work reliably on Android.
  * @param onMeasure The callback executed when the element's dimensions are
  *                  first known or change.
  * @returns         A "ref" callback and "onLayout" callback to pass to the

diff --git a/react-native/hooks/useMeasure/readme.md b/react-native/hooks/useMeasure/readme.md
@@ -3,6 +3,9 @@
 A React hook which executes a callback when an element's dimensions are first
 known or change.
 
+You MUST set collapsable to false on the associated view for this to work
+reliably on Android.
+
 ## Usage
 
 ```tsx
@@ -14,7 +17,7 @@ const ExampleScreen = () => {
   });
 
   return (
-    <Button ref={ref} onLayout={onLayout} />
+    <View collapsable={false} ref={ref} onLayout={onLayout} />
   );
 };
 ```