From 01f947636f6899d0175ac872b54b4c2dacc9fa15 Mon Sep 17 00:00:00 2001
From: Gerardo Pacheco <gerardo.pacheco@automattic.com>
Date: Wed, 18 May 2022 10:52:53 +0200
Subject: [PATCH] [Mobile] - BlockList - Add internal onLayout from
 CellRendererComponent to BlockListItemCell (#41105)

* Mobile - BlockList - Pass FlatList internal onLayout through CellRendererComponent

* Mobile - Update onLayout naming for BlockListItemCell
---
 .../block-list/block-list-item-cell.native.js   | 17 ++++++++++++-----
 .../src/components/block-list/index.native.js   |  3 ++-
 2 files changed, 14 insertions(+), 6 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 c399643a633996..e32d793af46d67 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,7 @@ import { useEffect, useCallback } from '@wordpress/element';
  */
 import { useBlockListContext } from './block-list-context';
 
-function BlockListItemCell( { children, clientId, rootClientId } ) {
+function BlockListItemCell( { children, clientId, rootClientId, onLayout } ) {
 	const { blocksLayouts, updateBlocksLayouts } = useBlockListContext();
 
 	useEffect( () => {
@@ -25,18 +25,25 @@ function BlockListItemCell( { children, clientId, rootClientId } ) {
 		};
 	}, [] );
 
-	const onLayout = useCallback(
-		( { nativeEvent: { layout } } ) => {
+	const onCellLayout = useCallback(
+		( event ) => {
+			const {
+				nativeEvent: { layout },
+			} = event;
 			updateBlocksLayouts( blocksLayouts, {
 				clientId,
 				rootClientId,
 				...layout,
 			} );
+
+			if ( onLayout ) {
+				onLayout( event );
+			}
 		},
-		[ clientId, rootClientId, updateBlocksLayouts ]
+		[ 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 3ec3fefc8207b3..a4248327589ed1 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 }
+				onLayout={ onLayout }
 				rootClientId={ rootClientId }
 			/>
 		);