diff --git a/packages/block-editor/src/components/block-list/block-list-compact.native.js b/packages/block-editor/src/components/block-list/block-list-compact.native.js
deleted file mode 100644
index ad9d0c7301eed3..00000000000000
--- a/packages/block-editor/src/components/block-list/block-list-compact.native.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * External dependencies
- */
-import { View } from 'react-native';
-
-/**
- * WordPress dependencies
- */
-import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import styles from './style.scss';
-import BlockListBlock from './block';
-
-/**
- * NOTE: This is a component currently used by the List block (V2)
- * It only passes the needed props for this block, if other blocks will use it
- * make sure you pass other props that might be required coming from:
- * components/inner-blocks/index.native.js
- */
-
-function BlockListCompact( props ) {
-	const {
-		marginHorizontal = styles.defaultBlock.marginLeft,
-		marginVertical = styles.defaultBlock.marginTop,
-		rootClientId,
-	} = props;
-	const { blockClientIds } = useSelect(
-		( select ) => {
-			const { getBlockOrder } = select( blockEditorStore );
-			const blockOrder = getBlockOrder( rootClientId );
-
-			return {
-				blockClientIds: blockOrder,
-			};
-		},
-		[ rootClientId ]
-	);
-
-	const containerStyle = {
-		marginVertical: -marginVertical,
-		marginHorizontal: -marginHorizontal,
-	};
-
-	return (
-		<View style={ containerStyle } testID="block-list-wrapper">
-			{ blockClientIds.map( ( currentClientId ) => (
-				<BlockListBlock
-					clientId={ currentClientId }
-					rootClientId={ rootClientId }
-					key={ currentClientId }
-					marginHorizontal={ marginHorizontal }
-					marginVertical={ marginVertical }
-				/>
-			) ) }
-		</View>
-	);
-}
-
-export default BlockListCompact;
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 48f839b156d455..587d03dd882542 100644
--- a/packages/block-editor/src/components/block-list/index.native.js
+++ b/packages/block-editor/src/components/block-list/index.native.js
@@ -26,7 +26,6 @@ import BlockListItem from './block-list-item';
 import BlockListItemCell from './block-list-item-cell';
 import {
 	BlockListProvider,
-	BlockListConsumer,
 	DEFAULT_BLOCK_LIST_CONTEXT,
 } from './block-list-context';
 import { BlockDraggableWrapper } from '../block-draggable';
@@ -35,14 +34,7 @@ import { store as blockEditorStore } from '../../store';
 const identity = ( x ) => x;
 
 const stylesMemo = {};
-const getStyles = (
-	isRootList,
-	isStackedHorizontally,
-	horizontalAlignment
-) => {
-	if ( isRootList ) {
-		return;
-	}
+const getStyles = ( isStackedHorizontally, horizontalAlignment ) => {
 	const styleName = `${ isStackedHorizontally }-${ horizontalAlignment }`;
 	if ( stylesMemo[ styleName ] ) {
 		return stylesMemo[ styleName ];
@@ -74,7 +66,6 @@ export default function BlockList( {
 	renderAppender,
 	renderFooterAppender,
 	rootClientId,
-	title,
 	withFooter = true,
 } ) {
 	const {
@@ -190,114 +181,6 @@ export default function BlockList( {
 		}
 	};
 
-	const renderList = ( extraProps = {} ) => {
-		const { parentScrollRef, onScroll } = extraProps;
-
-		const { blockToolbar, headerToolbar, floatingToolbar } = styles;
-
-		const containerStyle = {
-			flex: isRootList ? 1 : 0,
-			// We set negative margin in the parent to remove the edge spacing between parent block and child block in ineer blocks.
-			marginVertical: isRootList ? 0 : -marginVertical,
-			marginHorizontal: isRootList ? 0 : -marginHorizontal,
-		};
-
-		const isContentStretch = contentResizeMode === 'stretch';
-		const isMultiBlocks = blockClientIds.length > 1;
-		const { isWider } = alignmentHelpers;
-		const extraScrollHeight =
-			headerToolbar.height +
-			blockToolbar.height +
-			( isFloatingToolbarVisible ? floatingToolbar.height : 0 );
-
-		const scrollViewStyle = [
-			{ flex: isRootList ? 1 : 0 },
-			! isRootList && styles.overflowVisible,
-		];
-
-		return (
-			<View
-				style={ containerStyle }
-				onAccessibilityEscape={ clearSelectedBlock }
-				onLayout={ onLayout }
-				testID="block-list-wrapper"
-			>
-				<KeyboardAwareFlatList
-					{ ...( Platform.OS === 'android'
-						? { removeClippedSubviews: false }
-						: {} ) } // Disable clipping on Android to fix focus losing. See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
-					accessibilityLabel="block-list"
-					innerRef={ ( ref ) => {
-						scrollViewRef.current = parentScrollRef || ref;
-					} }
-					extraScrollHeight={ extraScrollHeight }
-					keyboardShouldPersistTaps="always"
-					scrollViewStyle={ scrollViewStyle }
-					extraData={ getExtraData() }
-					scrollEnabled={ isRootList }
-					contentContainerStyle={ [
-						horizontal && styles.horizontalContentContainer,
-						isWider( blockWidth, 'medium' ) &&
-							( isContentStretch && isMultiBlocks
-								? styles.horizontalContentContainerStretch
-								: styles.horizontalContentContainerCenter ),
-					] }
-					style={ getStyles(
-						isRootList,
-						isStackedHorizontally,
-						horizontalAlignment
-					) }
-					data={ blockClientIds }
-					keyExtractor={ identity }
-					listKey={
-						rootClientId ? `list-${ rootClientId }` : 'list-root'
-					}
-					renderItem={ renderItem }
-					CellRendererComponent={ BlockListItemCell }
-					shouldPreventAutomaticScroll={
-						shouldFlatListPreventAutomaticScroll
-					}
-					title={ title }
-					ListHeaderComponent={ header }
-					ListEmptyComponent={
-						! isReadOnly && (
-							<EmptyList
-								orientation={ orientation }
-								rootClientId={ rootClientId }
-								renderAppender={ renderAppender }
-								renderFooterAppender={ renderFooterAppender }
-							/>
-						)
-					}
-					ListFooterComponent={
-						<Footer
-							addBlockToEndOfPost={ addBlockToEndOfPost }
-							isReadOnly={ isReadOnly }
-							renderFooterAppender={ renderFooterAppender }
-							withFooter={ withFooter }
-						/>
-					}
-					onScroll={ onScroll }
-				/>
-				{ shouldShowInnerBlockAppender() && (
-					<View
-						style={ {
-							marginHorizontal:
-								marginHorizontal -
-								styles.innerAppender.marginLeft,
-						} }
-					>
-						<BlockListAppender
-							rootClientId={ rootClientId }
-							renderAppender={ renderAppender }
-							showSeparator
-						/>
-					</View>
-				) }
-			</View>
-		);
-	};
-
 	const renderItem = ( { item: clientId, index } ) => {
 		// Extracting the grid item properties here to avoid
 		// re-renders in the blockListItem component.
@@ -328,29 +211,159 @@ export default function BlockList( {
 		);
 	};
 
-	// Use of Context to propagate the main scroll ref to its children e.g InnerBlocks.
-	const blockList = isRootList ? (
-		<BlockListProvider
-			value={ {
-				...DEFAULT_BLOCK_LIST_CONTEXT,
-				scrollRef: scrollViewRef.current,
-			} }
+	const { blockToolbar, headerToolbar, floatingToolbar } = styles;
+
+	const containerStyle = {
+		flex: isRootList ? 1 : 0,
+		// We set negative margin in the parent to remove the edge spacing between parent block and child block in ineer blocks.
+		marginVertical: isRootList ? 0 : -marginVertical,
+		marginHorizontal: isRootList ? 0 : -marginHorizontal,
+	};
+
+	const isContentStretch = contentResizeMode === 'stretch';
+	const isMultiBlocks = blockClientIds.length > 1;
+	const { isWider } = alignmentHelpers;
+	const extraScrollHeight =
+		headerToolbar.height +
+		blockToolbar.height +
+		( isFloatingToolbarVisible ? floatingToolbar.height : 0 );
+
+	return (
+		<View
+			style={ containerStyle }
+			onAccessibilityEscape={ clearSelectedBlock }
+			onLayout={ onLayout }
+			testID="block-list-wrapper"
 		>
-			<BlockDraggableWrapper isRTL={ isRTL }>
-				{ ( { onScroll } ) => renderList( { onScroll } ) }
-			</BlockDraggableWrapper>
-		</BlockListProvider>
-	) : (
-		<BlockListConsumer>
-			{ ( { scrollRef } ) =>
-				renderList( {
-					parentScrollRef: scrollRef,
-				} )
-			}
-		</BlockListConsumer>
+			{ isRootList ? (
+				<BlockListProvider
+					value={ {
+						...DEFAULT_BLOCK_LIST_CONTEXT,
+						scrollRef: scrollViewRef.current,
+					} }
+				>
+					<BlockDraggableWrapper isRTL={ isRTL }>
+						{ ( { onScroll } ) => (
+							<KeyboardAwareFlatList
+								{ ...( Platform.OS === 'android'
+									? { removeClippedSubviews: false }
+									: {} ) } // Disable clipping on Android to fix focus losing. See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
+								accessibilityLabel="block-list"
+								innerRef={ ( ref ) => {
+									scrollViewRef.current = ref;
+								} }
+								extraScrollHeight={ extraScrollHeight }
+								keyboardShouldPersistTaps="always"
+								scrollViewStyle={ { flex: 1 } }
+								extraData={ getExtraData() }
+								scrollEnabled={ isRootList }
+								contentContainerStyle={ [
+									horizontal &&
+										styles.horizontalContentContainer,
+									isWider( blockWidth, 'medium' ) &&
+										( isContentStretch && isMultiBlocks
+											? styles.horizontalContentContainerStretch
+											: styles.horizontalContentContainerCenter ),
+								] }
+								data={ blockClientIds }
+								keyExtractor={ identity }
+								renderItem={ renderItem }
+								CellRendererComponent={ BlockListItemCell }
+								shouldPreventAutomaticScroll={
+									shouldFlatListPreventAutomaticScroll
+								}
+								ListHeaderComponent={ header }
+								ListEmptyComponent={
+									! isReadOnly && (
+										<EmptyList
+											orientation={ orientation }
+											rootClientId={ rootClientId }
+											renderAppender={ renderAppender }
+											renderFooterAppender={
+												renderFooterAppender
+											}
+										/>
+									)
+								}
+								ListFooterComponent={
+									<Footer
+										addBlockToEndOfPost={
+											addBlockToEndOfPost
+										}
+										isReadOnly={ isReadOnly }
+										renderFooterAppender={
+											renderFooterAppender
+										}
+										withFooter={ withFooter }
+									/>
+								}
+								onScroll={ onScroll }
+							/>
+						) }
+					</BlockDraggableWrapper>
+				</BlockListProvider>
+			) : (
+				<>
+					{ blockClientIds.length > 0 ? (
+						<View style={ [ { flex: 0 }, styles.overflowVisible ] }>
+							<View
+								style={ [
+									...getStyles(
+										isStackedHorizontally,
+										horizontalAlignment
+									),
+									horizontal &&
+										styles.horizontalContentContainer,
+								] }
+							>
+								{ blockClientIds.map(
+									( currentClientId, index ) => {
+										return (
+											<View key={ currentClientId }>
+												{ renderItem( {
+													item: currentClientId,
+													index,
+												} ) }
+											</View>
+										);
+									}
+								) }
+								<Footer
+									addBlockToEndOfPost={ addBlockToEndOfPost }
+									isReadOnly={ isReadOnly }
+									renderFooterAppender={
+										renderFooterAppender
+									}
+									withFooter={ withFooter }
+								/>
+							</View>
+						</View>
+					) : (
+						<EmptyList
+							orientation={ orientation }
+							rootClientId={ rootClientId }
+							renderAppender={ renderAppender }
+							renderFooterAppender={ renderFooterAppender }
+						/>
+					) }
+				</>
+			) }
+			{ shouldShowInnerBlockAppender() && (
+				<View
+					style={ {
+						marginHorizontal:
+							marginHorizontal - styles.innerAppender.marginLeft,
+					} }
+				>
+					<BlockListAppender
+						rootClientId={ rootClientId }
+						renderAppender={ renderAppender }
+						showSeparator
+					/>
+				</View>
+			) }
+		</View>
 	);
-
-	return blockList;
 }
 
 function Footer( {
@@ -375,7 +388,7 @@ function Footer( {
 			</>
 		);
 	} else if ( renderFooterAppender ) {
-		return renderFooterAppender();
+		return <View>{ renderFooterAppender() }</View>;
 	}
 
 	return null;
diff --git a/packages/block-editor/src/components/block-list/test/index.native.js b/packages/block-editor/src/components/block-list/test/index.native.js
index dee27b963d1626..e8d6c8388f1306 100644
--- a/packages/block-editor/src/components/block-list/test/index.native.js
+++ b/packages/block-editor/src/components/block-list/test/index.native.js
@@ -52,7 +52,7 @@ describe( 'BlockList', () => {
 			await addBlock( screen, 'Social Icons' );
 			const socialLinksBlock = await getBlock( screen, 'Social Icons' );
 			fireEvent.press( socialLinksBlock );
-			triggerBlockListLayout( socialLinksBlock );
+			await triggerBlockListLayout( socialLinksBlock );
 
 			// Act
 			fireEvent.press(
@@ -82,7 +82,7 @@ describe( 'BlockList', () => {
 			await initializeEditor();
 			await addBlock( screen, 'Group' );
 			const groupBlock = await getBlock( screen, 'Group' );
-			triggerBlockListLayout( groupBlock );
+			await triggerBlockListLayout( groupBlock );
 
 			// Assert
 			expect(
diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js
index 3ba3b8e8321a2b..e635230b5c2425 100644
--- a/packages/block-editor/src/components/inner-blocks/index.native.js
+++ b/packages/block-editor/src/components/inner-blocks/index.native.js
@@ -17,7 +17,6 @@ import useBlockContext from './use-block-context';
  * Internal dependencies
  */
 import BlockList from '../block-list';
-import BlockListCompact from '../block-list/block-list-compact';
 import { useBlockEditContext } from '../block-edit/context';
 import useBlockSync from '../provider/use-block-sync';
 import { BlockContextProvider } from '../block-context';
@@ -92,7 +91,6 @@ function UncontrolledInnerBlocks( props ) {
 		blockWidth,
 		__experimentalLayout: layout = defaultLayout,
 		gridProperties,
-		useCompactList,
 	} = props;
 
 	const context = useBlockContext( clientId );
@@ -106,12 +104,10 @@ function UncontrolledInnerBlocks( props ) {
 		templateInsertUpdatesSelection
 	);
 
-	const BlockListComponent = useCompactList ? BlockListCompact : BlockList;
-
 	return (
 		<LayoutProvider value={ layout }>
 			<BlockContextProvider value={ context }>
-				<BlockListComponent
+				<BlockList
 					marginVertical={ marginVertical }
 					marginHorizontal={ marginHorizontal }
 					rootClientId={ clientId }
diff --git a/packages/block-library/src/list-item/edit.native.js b/packages/block-library/src/list-item/edit.native.js
index 5f365dd9a5816b..cf2e77c08d2e83 100644
--- a/packages/block-library/src/list-item/edit.native.js
+++ b/packages/block-library/src/list-item/edit.native.js
@@ -91,7 +91,7 @@ export default function ListItemEdit( {
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list' ],
-		useCompactList: true,
+		renderAppender: false,
 	} );
 
 	// Set default placeholder text color from light/dark scheme or base colors
diff --git a/packages/block-library/src/list/edit.js b/packages/block-library/src/list/edit.js
index 2d68aaf909f45e..24d5ead74c47d4 100644
--- a/packages/block-library/src/list/edit.js
+++ b/packages/block-library/src/list/edit.js
@@ -135,7 +135,7 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
 		...( Platform.isNative && {
 			marginVertical: NATIVE_MARGIN_SPACING,
 			marginHorizontal: NATIVE_MARGIN_SPACING,
-			useCompactList: true,
+			renderAppender: false,
 		} ),
 	} );
 	useMigrateOnLoad( attributes, clientId );
diff --git a/packages/block-library/src/list/test/edit.native.js b/packages/block-library/src/list/test/edit.native.js
index 67470228afc63e..5374071f4e8090 100644
--- a/packages/block-library/src/list/test/edit.native.js
+++ b/packages/block-library/src/list/test/edit.native.js
@@ -70,6 +70,7 @@ describe( 'List block', () => {
 		// Select List block
 		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select List Item block
 		const [ listItemBlock ] = screen.getAllByLabelText(
@@ -117,14 +118,15 @@ describe( 'List block', () => {
 
 		// Select List block
 		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
-
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select List Item block
 		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 2/
 		);
 		fireEvent.press( firstNestedLevelBlock );
+		await triggerBlockListLayout( firstNestedLevelBlock );
 
 		// Select second level list
 		const [ secondNestedLevelBlock ] = within(
@@ -152,6 +154,7 @@ describe( 'List block', () => {
 		// Select List block
 		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select Secont List Item block
 		const [ listItemBlock ] = screen.getAllByLabelText(
@@ -163,6 +166,12 @@ describe( 'List block', () => {
 		const indentButton = screen.getByLabelText( 'Indent' );
 		fireEvent.press( indentButton );
 
+		// Await recently indented list item layout
+		const [ listItemBlock1 ] = screen.getAllByLabelText(
+			/List item Block\. Row 1/
+		);
+		await triggerBlockListLayout( listItemBlock1 );
+
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
@@ -184,17 +193,21 @@ describe( 'List block', () => {
 		// Select List block
 		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select List Item block
 		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( firstNestedLevelBlock );
+		await triggerBlockListLayout( firstNestedLevelBlock );
 
 		// Select Inner block List
 		const [ innerBlockList ] = within(
 			firstNestedLevelBlock
 		).getAllByLabelText( /List Block\. Row 1/ );
+		fireEvent.press( innerBlockList );
+		await triggerBlockListLayout( innerBlockList );
 
 		// Select nested List Item block
 		const [ listItemBlock ] = within( innerBlockList ).getAllByLabelText(
@@ -336,6 +349,7 @@ describe( 'List block', () => {
 		// Select List block
 		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 2/ );
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select List Item block
 		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
@@ -384,6 +398,7 @@ describe( 'List block', () => {
 		// Select List block
 		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 2/ );
 		fireEvent.press( listBlock );
+		await triggerBlockListLayout( listBlock );
 
 		// Select List Item block
 		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
diff --git a/packages/react-native-editor/__device-tests__/pages/editor-page.js b/packages/react-native-editor/__device-tests__/pages/editor-page.js
index 433c3cd706c9cc..4c0b7249a8e77e 100644
--- a/packages/react-native-editor/__device-tests__/pages/editor-page.js
+++ b/packages/react-native-editor/__device-tests__/pages/editor-page.js
@@ -547,10 +547,6 @@ class EditorPage {
 			: '//XCUIElementTypeButton';
 		const blockActionsMenuButtonIdentifier = `Open Block Actions Menu`;
 		const blockActionsMenuButtonLocator = `${ buttonElementName }[contains(@${ this.accessibilityIdXPathAttrib }, "${ blockActionsMenuButtonIdentifier }")]`;
-		const blockActionsMenuButton = await waitForVisible(
-			this.driver,
-			blockActionsMenuButtonLocator
-		);
 		if ( isAndroid() ) {
 			const block = await this.getBlockAtPosition( blockName, position );
 			let checkList = await this.driver.elementsByXPath(
@@ -564,6 +560,10 @@ class EditorPage {
 			}
 		}
 
+		const blockActionsMenuButton = await waitForVisible(
+			this.driver,
+			blockActionsMenuButtonLocator
+		);
 		await blockActionsMenuButton.click();
 		const removeActionButtonIdentifier = 'Remove block';
 		const removeActionButtonLocator = `${ buttonElementName }[contains(@${ this.accessibilityIdXPathAttrib }, "${ removeActionButtonIdentifier }")]`;
@@ -911,7 +911,7 @@ class EditorPage {
 	async addButtonWithInlineAppender( position = 1 ) {
 		const appenderButton = isAndroid()
 			? await this.waitForElementToBeDisplayedByXPath(
-					`//android.view.ViewGroup[@content-desc="block-list"]/android.view.ViewGroup[${ position }]/android.widget.Button`
+					`//android.widget.Button[@content-desc="Buttons Block. Row 1"]/android.view.ViewGroup/android.view.ViewGroup[1]/android.widget.Button[${ position }]`
 			  )
 			: await this.waitForElementToBeDisplayedById( 'appender-button' );
 		await appenderButton.click();