[Mobile] - BlockList - Add internal onLayout from CellRendererComponent to BlockListItemCell (#41105)

* Mobile - BlockList - Pass FlatList internal onLayout through CellRendererComponent

* Mobile - Update onLayout naming for BlockListItemCell

Author: Gerardo Pacheco

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;

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 }
 			/>
 		);