From 047162115886a24a7f3e75e07bbcd29fbbcf2835 Mon Sep 17 00:00:00 2001
From: jameswilddev <jameswilddev@outlook.com>
Date: Mon, 29 Jul 2024 11:37:30 +0100
Subject: [PATCH] Fix intermittent failures to measure tiled components on
 Android.

---
 .../components/createTiledComponent/index.tsx |  2 ++
 .../components/createTiledComponent/unit.tsx  | 22 +++++++++++++++++++
 react-native/hooks/useMeasure/index.tsx       |  3 ++-
 react-native/hooks/useMeasure/readme.md       |  5 ++++-
 4 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/react-native/components/createTiledComponent/index.tsx b/react-native/components/createTiledComponent/index.tsx
index a30c8443..0e2ad5e4 100644
--- 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
index 714755c9..672414ce 100644
--- 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
index 71ebd7cf..4c081118 100644
--- 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
index 412b476e..3d2e9a81 100644
--- 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} />
   );
 };
 ```