[Mobile] - KeyboardAwareFlatList - Enable FlatList virtualization for iOS

packages/block-editor/src/components/block-list/index.native.js

@@ -211,7 +211,7 @@ export default function BlockList( {
 		);
 	};
 
-	const { blockToolbar, headerToolbar, floatingToolbar } = styles;
+	const { blockToolbar, floatingToolbar } = styles;
 
 	const containerStyle = {
 		flex: isRootList ? 1 : 0,
@@ -224,7 +224,6 @@ export default function BlockList( {
 	const isMultiBlocks = blockClientIds.length > 1;
 	const { isWider } = alignmentHelpers;
 	const extraScrollHeight =
-		headerToolbar.height +
 		blockToolbar.height +
 		( isFloatingToolbarVisible ? floatingToolbar.height : 0 );
 
@@ -245,14 +244,10 @@ export default function BlockList( {
 					<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"
 								ref={ scrollRef }
 								extraScrollHeight={ extraScrollHeight }
 								keyboardShouldPersistTaps="always"
-								scrollViewStyle={ { flex: 1 } }
 								extraData={ getExtraData() }
 								scrollEnabled={ isRootList }
 								contentContainerStyle={ [

packages/block-editor/src/components/rich-text/index.native.js

@@ -118,6 +118,7 @@ export function RichTextWrapper(
 			getBlock,
 			isMultiSelecting,
 			hasMultiSelection,
+			getSelectedBlockClientId,
 		} = select( blockEditorStore );
 
 		const selectionStart = getSelectionStart();
@@ -154,6 +155,7 @@ export function RichTextWrapper(
 			didAutomaticChange: didAutomaticChange(),
 			disabled: isMultiSelecting() || hasMultiSelection(),
 			undo,
+			getSelectedBlockClientId,
 			...extraProps,
 		};
 	};
@@ -164,6 +166,7 @@ export function RichTextWrapper(
 		selectionStart,
 		selectionEnd,
 		isSelected,
+		getSelectedBlockClientId,
 		didAutomaticChange,
 		disabled,
 		undo,
@@ -175,6 +178,7 @@ export function RichTextWrapper(
 		exitFormattedText,
 		selectionChange,
 		__unstableMarkAutomaticChange,
+		clearSelectedBlock,
 	} = useDispatch( blockEditorStore );
 	const adjustedAllowedFormats = getAllowedFormats( {
 		allowedFormats,
@@ -209,6 +213,12 @@ export function RichTextWrapper(
 		[ clientId, identifier ]
 	);
 
+	const clearCurrentSelectionOnUnmount = useCallback( () => {
+		if ( getSelectedBlockClientId() === clientId ) {
+			clearSelectedBlock();
+		}
+	}, [ clearSelectedBlock, clientId, getSelectedBlockClientId ] );
+
 	const onDelete = useCallback(
 		( { value, isReverse } ) => {
 			if ( onMerge ) {
@@ -590,6 +600,7 @@ export function RichTextWrapper(
 			disableSuggestions={ disableSuggestions }
 			disableAutocorrection={ disableAutocorrection }
 			containerWidth={ containerWidth }
+			clearCurrentSelectionOnUnmount={ clearCurrentSelectionOnUnmount }
 			// Props to be set on the editable container are destructured on the
 			// element itself for web (see below), but passed through rich text
 			// for native.

packages/block-editor/src/components/rich-text/native/index.native.js

@@ -873,6 +873,17 @@ export class RichText extends Component {
 		}
 	}
 
+	componentWillUnmount() {
+		const { clearCurrentSelectionOnUnmount } = this.props;
+
+		// There are cases when the component is unmounted e.g. scrolling in a
+		// long post due to virtualization, so the block selection needs to be cleared
+		// so it doesn't auto-focus when it's added back.
+		if ( this._editor?.isFocused() ) {
+			clearCurrentSelectionOnUnmount?.();
+		}
+	}
+
 	getHtmlToRender( record, tagName ) {
 		// Save back to HTML from React tree.
 		let value = this.valueToFormat( record );

packages/components/src/mobile/keyboard-aware-flat-list/index.android.js

@@ -18,8 +18,10 @@ import {
  */
 import useScroll from './use-scroll';
 import KeyboardAvoidingView from '../keyboard-avoiding-view';
+import { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from './shared';
 
 const AnimatedFlatList = Animated.createAnimatedComponent( FlatList );
+const EMPTY_OBJECT = {};
 
 export const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {
 	const { extraScrollHeight, scrollEnabled, shouldPreventAutomaticScroll } =
@@ -41,8 +43,6 @@ export const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {
 
 	const getFlatListRef = useCallback(
 		( flatListRef ) => {
-			// On Android, we get the ref of the associated scroll
-			// view to the FlatList.
 			scrollViewRef.current = flatListRef?.getNativeScrollRef();
 		},
 		[ scrollViewRef ]
@@ -57,12 +57,21 @@ export const KeyboardAwareFlatList = ( { onScroll, ...props }, ref ) => {
 		};
 	} );
 
+	const optimizationProps =
+		props.data?.length > OPTIMIZATION_ITEMS_THRESHOLD
+			? OPTIMIZATION_PROPS
+			: EMPTY_OBJECT;
+
 	return (
 		<KeyboardAvoidingView style={ { flex: 1 } }>
 			<AnimatedFlatList
 				ref={ getFlatListRef }
 				onScroll={ scrollHandler }
 				onContentSizeChange={ onContentSizeChange }
+				// Disable clipping to fix focus losing.
+				// See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
+				removeClippedSubviews={ false }
+				{ ...optimizationProps }
 				{ ...props }
 			/>
 		</KeyboardAvoidingView>

packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-
-import { ScrollView, FlatList } from 'react-native';
+import { FlatList, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 /**
@@ -22,9 +21,12 @@ import { useThrottle } from '@wordpress/compose';
 import useScroll from './use-scroll';
 import useTextInputOffset from './use-text-input-offset';
 import useTextInputCaretPosition from './use-text-input-caret-position';
+import { OPTIMIZATION_ITEMS_THRESHOLD, OPTIMIZATION_PROPS } from './shared';
+import styles from './styles.scss';
 
 const DEFAULT_FONT_SIZE = 16;
-const AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );
+const AnimatedFlatList = Animated.createAnimatedComponent( FlatList );
+const EMPTY_OBJECT = {};
 
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 /**
@@ -35,7 +37,6 @@ const AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );
  * @param {number}    props.extraScrollHeight            Extra scroll height for the content.
  * @param {Function}  props.onScroll                     Function to be called when the list is scrolled.
  * @param {boolean}   props.scrollEnabled                Whether the list can be scrolled.
- * @param {Object}    props.scrollViewStyle              Additional style for the ScrollView component.
  * @param {boolean}   props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
  * @param {Object}    props...                           Other props to pass to the FlatList component.
  * @param {RefObject} ref
@@ -46,7 +47,6 @@ export const KeyboardAwareFlatList = (
 		extraScrollHeight,
 		onScroll,
 		scrollEnabled,
-		scrollViewStyle,
 		shouldPreventAutomaticScroll,
 		...props
 	},
@@ -105,7 +105,12 @@ export const KeyboardAwareFlatList = (
 	// extra padding at the bottom.
 	const contentInset = { bottom: keyboardOffset };
 
-	const style = [ { flex: 1 }, scrollViewStyle ];
+	const getFlatListRef = useCallback(
+		( flatListRef ) => {
+			scrollViewRef.current = flatListRef?.getNativeScrollRef();
+		},
+		[ scrollViewRef ]
+	);
 
 	useImperativeHandle( ref, () => {
 		return {
@@ -116,20 +121,26 @@ export const KeyboardAwareFlatList = (
 		};
 	} );
 
+	const optimizationProps =
+		props.data?.length > OPTIMIZATION_ITEMS_THRESHOLD
+			? OPTIMIZATION_PROPS
+			: EMPTY_OBJECT;
+
 	return (
-		<AnimatedScrollView
-			automaticallyAdjustContentInsets={ false }
-			contentInset={ contentInset }
-			keyboardShouldPersistTaps="handled"
-			onContentSizeChange={ onContentSizeChange }
-			onScroll={ scrollHandler }
-			ref={ scrollViewRef }
-			scrollEnabled={ scrollEnabled }
-			scrollEventThrottle={ 16 }
-			style={ style }
-		>
-			<FlatList { ...props } scrollEnabled={ false } />
-		</AnimatedScrollView>
+		<View style={ styles.list__container }>
+			<AnimatedFlatList
+				ref={ getFlatListRef }
+				automaticallyAdjustContentInsets={ false }
+				contentInset={ contentInset }
+				keyboardShouldPersistTaps="handled"
+				onContentSizeChange={ onContentSizeChange }
+				onScroll={ scrollHandler }
+				scrollEventThrottle={ 16 }
+				style={ styles.list__content }
+				{ ...optimizationProps }
+				{ ...props }
+			/>
+		</View>
 	);
 };
 

packages/components/src/mobile/keyboard-aware-flat-list/shared.native.js

@@ -0,0 +1,6 @@
+export const OPTIMIZATION_PROPS = {
+	windowSize: 17,
+	maxToRenderPerBatch: 15,
+};
+
+export const OPTIMIZATION_ITEMS_THRESHOLD = 30;

packages/components/src/mobile/keyboard-aware-flat-list/styles.native.scss

@@ -0,0 +1,8 @@
+.list__container {
+	flex-grow: 1;
+	align-items: stretch;
+}
+
+.list__content {
+	margin-bottom: $mobile-block-toolbar-height;
+}

packages/react-native-editor/CHANGELOG.md

@@ -10,6 +10,7 @@ For each user feature we should also add a importance categorization label  to i
 -->
 
 ## Unreleased
+-   [*] KeyboardAwareFlatList - Enable FlatList virtualization for iOS [#59833]
 
 ## 1.117.0
 -   [*] Add empty fallback option for the BottomSheetSelectControl component [#60333]