From 140b3f162ac0904cdf21d7bd9c1a398fad0ddc27 Mon Sep 17 00:00:00 2001
From: Gerardo <gerardo.pacheco@automattic.com>
Date: Tue, 17 May 2022 10:51:12 +0200
Subject: [PATCH 1/2] Mobile - BlockList - Pass FlatList internal onLayout
 through CellRendererComponent

---
 .../block-list/block-list-item-cell.native.js  | 18 +++++++++++++++---
 .../src/components/block-list/index.native.js  |  3 ++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block-list-item-cell.native.js b/packages/block-editor/src/components/block-list/block-list-item-cell.native.js
index c399643a63399..27adf3beaa76d 100644
--- a/packages/block-editor/src/components/block-list/block-list-item-cell.native.js
+++ b/packages/block-editor/src/components/block-list/block-list-item-cell.native.js
@@ -13,7 +13,12 @@ import { useEffect, useCallback } from '@wordpress/element';
  */
 import { useBlockListContext } from './block-list-context';
 
-function BlockListItemCell( { children, clientId, rootClientId } ) {
+function BlockListItemCell( {
+	children,
+	clientId,
+	rootClientId,
+	listOnLayout,
+} ) {
 	const { blocksLayouts, updateBlocksLayouts } = useBlockListContext();
 
 	useEffect( () => {
@@ -26,14 +31,21 @@ function BlockListItemCell( { children, clientId, rootClientId } ) {
 	}, [] );
 
 	const onLayout = useCallback(
-		( { nativeEvent: { layout } } ) => {
+		( event ) => {
+			const {
+				nativeEvent: { layout },
+			} = event;
 			updateBlocksLayouts( blocksLayouts, {
 				clientId,
 				rootClientId,
 				...layout,
 			} );
+
+			if ( listOnLayout ) {
+				listOnLayout( event );
+			}
 		},
-		[ clientId, rootClientId, updateBlocksLayouts ]
+		[ clientId, rootClientId, updateBlocksLayouts, listOnLayout ]
 	);
 
 	return <View onLayout={ onLayout }>{ children }</View>;
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
index 3ec3fefc8207b..850441e411641 100644
--- a/packages/block-editor/src/components/block-list/index.native.js
+++ b/packages/block-editor/src/components/block-list/index.native.js
@@ -162,12 +162,13 @@ export class BlockList extends Component {
 		return this.extraData;
 	}
 
-	getCellRendererComponent( { children, item } ) {
+	getCellRendererComponent( { children, item, onLayout } ) {
 		const { rootClientId } = this.props;
 		return (
 			<BlockListItemCell
 				children={ children }
 				clientId={ item }
+				listOnLayout={ onLayout }
 				rootClientId={ rootClientId }
 			/>
 		);

From f68a4b707b6af4e8ce60cce06465071fb41228cd Mon Sep 17 00:00:00 2001
From: Gerardo <gerardo.pacheco@automattic.com>
Date: Tue, 17 May 2022 16:31:55 +0200
Subject: [PATCH 2/2] Mobile - Update onLayout naming for BlockListItemCell

---
 .../block-list/block-list-item-cell.native.js   | 17 ++++++-----------
 .../src/components/block-list/index.native.js   |  2 +-
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block-list-item-cell.native.js b/packages/block-editor/src/components/block-list/block-list-item-cell.native.js
index 27adf3beaa76d..e32d793af46d6 100644
--- a/packages/block-editor/src/components/block-list/block-list-item-cell.native.js
+++ b/packages/block-editor/src/components/block-list/block-list-item-cell.native.js
@@ -13,12 +13,7 @@ import { useEffect, useCallback } from '@wordpress/element';
  */
 import { useBlockListContext } from './block-list-context';
 
-function BlockListItemCell( {
-	children,
-	clientId,
-	rootClientId,
-	listOnLayout,
-} ) {
+function BlockListItemCell( { children, clientId, rootClientId, onLayout } ) {
 	const { blocksLayouts, updateBlocksLayouts } = useBlockListContext();
 
 	useEffect( () => {
@@ -30,7 +25,7 @@ function BlockListItemCell( {
 		};
 	}, [] );
 
-	const onLayout = useCallback(
+	const onCellLayout = useCallback(
 		( event ) => {
 			const {
 				nativeEvent: { layout },
@@ -41,14 +36,14 @@ function BlockListItemCell( {
 				...layout,
 			} );
 
-			if ( listOnLayout ) {
-				listOnLayout( event );
+			if ( onLayout ) {
+				onLayout( event );
 			}
 		},
-		[ clientId, rootClientId, updateBlocksLayouts, listOnLayout ]
+		[ clientId, rootClientId, updateBlocksLayouts, onLayout ]
 	);
 
-	return <View onLayout={ onLayout }>{ children }</View>;
+	return <View onLayout={ onCellLayout }>{ children }</View>;
 }
 
 export default BlockListItemCell;
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
index 850441e411641..a4248327589ed 100644
--- a/packages/block-editor/src/components/block-list/index.native.js
+++ b/packages/block-editor/src/components/block-list/index.native.js
@@ -168,7 +168,7 @@ export class BlockList extends Component {
 			<BlockListItemCell
 				children={ children }
 				clientId={ item }
-				listOnLayout={ onLayout }
+				onLayout={ onLayout }
 				rootClientId={ rootClientId }
 			/>
 		);