[Mobile] Remove Keyboard Aware Flatlist (#48791)

* Remove react-native-keyboard-aware-scroll-view dependency

* Mobile - AztecView/AztecInputState:

- Remove usage of onCaretVerticalPositionChange
- Add support for adding a listener when the caret Y coordinate position changes

* Mobile - VisualEditor - Remove keyboard listeners and the usage of isAutoScrollEnabled in the state of the component

* Mobile - RichText - Remove usage useNativeProps which used to handle the caret position's changes for iOS

* Mobile - BlockList and Keyboard Aware FlatList for iOS:

- Removes usage of the react-native-keyboard-aware-scroll-view library
- Adds custom implementation to scroll to the focused TextInput element

* Mobile - Remove patch for react-native-keyboard-aware-scroll-view

* Mobile - Update Block insertion E2E test

* Mobile - Block List - Update isFloatingToolbarVisible logic

* Mobile - KeyboardAwareFlatList - Remove usage of inputAccessoryViewHeight

* Mobile - KeyboardAwareFlatList - Prevent adding listeners on re-renders and prevent scrolling if the scroll reference doesn't exist

* Mobile - E2E - Improve editor paragraph test

* Mobile - KeyboardAwareFlatList - Refactors the code to split it in several hooks, it also fixes a few cases that weren't working correctly.

* Mobile - useScrollToTextInput - Fix typo in type

* Mobile - RCTAztecView - Send caret's height along with its coords

* Mobile - Keyboard Aware Flat list - Rewrite hooks to take into account the measurement of the TextInput to its parent, use the caret's height to add extra padding and correct calculation of the top and bottom offsets

* Mobile - Keyboard Aware Flatlist - Update hooks to fix several bugs

* Mobile - Keyboard Aware Flatlist - Add tests for new hooks

* Mobile - Keyboard Aware FlatList - Remove duplicated condition and adds comments

* Mobile - Keyboard Aware Flatlist - Update useScrollToTextInput to fix bugs and simplify logic

* Mobile - Keyboard Aware Flatlist - Add missing styles for inner blocks

* Mobile - Keyboard Aware Flatlist - Fix issue when the title is focused and it shouldn't scroll down

* Mobile - Keyboard Aware Flatlist - Don't take into account null values

* Mobile - AztecView - iOS: Pass the caret data when the TextInput is focused

* Mobile - Keyboard Aware FlatList - Remove unused shouldPreventAutomaticScroll prop

* Mobile - Keyboard Aware FlatList - useKeyboardOffset - Add case where it should remove listeners if the scrollEnabled prop changes from true to false

* Mobile - Keyboard Aware FlatList - useTextInputOffset: Prevent measuring the TextInput if the caretY is null since we are no longer taking that as a valid value

* Mobile - Keyboard Aware FlatList - useScrollToTextInput: Add documentation for scrollToTextInputOffset

* Mobile - Keyboard Aware FlatList - useScrollToTextInput: Update "does not scroll when the ScrollView ref is not available" test to check scrollTo wasn't called

* Mobile - AztecInputState - Fix spacing in comment

* Mobile - E2E Tests - Paragraph and Block Insertion: Remove adding isAndroid conditions

* Revert "Mobile - Keyboard Aware FlatList - useScrollToTextInput: Update "does not scroll when the ScrollView ref is not available" test to check scrollTo wasn't called"

This reverts commit fd42475.

* Mobile - KeyboardAwareFlatList - Reset scrollViewMeasurements to null everythime the dependecies change

* Mobile - useKeyboardOffset - Remove if condition if there's an AztecView currently focused, it is not needed anymore

* Mobile - AztecView - Pass caret data when the content size of the TextInput changes e.g the orientation changes. Also update the caret data if the AztecView is focused

* Mobile - AztecInputState - Don't notify caret change listeners if there's no caret data (avoid triggering them with null values)

* Mobile - useKeyboardOffset: Remove usage of keyboardWillShow and just rely on keyboardDidShow and keyboardDidHide, this will be useful when this logic is shared with Android. It also updates the hook to just store the current keyboard offset avoiding storing the keyboard visibility as well.

* Mobile - KeyboardAwareFlatList - Remove usage of isKeboardVisible since we just need to know if there's a keyboard offset set or not. It also removes measureScrollView from the useEffect that listens to device orientation changes

* Mobile - BlockList - Restore usage of shouldFlatListPreventAutomaticScroll

* Mobile -useKeyboardOffset: Update hook to use a setTiemout to remove the keyboard offset, it also updates the unit test

* Mobile - useScrollToTextInput: Remove dash

* Mobile - KeyboardAwareFlatList: Remove dashes

* Mobile - useKeyboardOffset - Reset timeout when willShowSubscription is called

* Mobile - useTextInputOffset - Add example when a caretY value would be -1

* Mobile - useKeyboardOffset - Remove duplicated test and use a different keyboard height end coordinates to check different offset value

* Mobile - useKeyboardOffset - Update test to also remove the keyboardWillShow listener

* Mobile - Update Changelog

* Components - Update changelog to include the KeyboardAwareFlatList mobile refactor

* Mobile - useTextInputOffset - Update comment to use permanent link

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

@@ -6,7 +6,7 @@ import { View, Platform, TouchableWithoutFeedback } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Component, createContext } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { createBlock } from '@wordpress/blocks';
@@ -33,7 +33,6 @@ import {
 import { BlockDraggableWrapper } from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
 
-export const OnCaretVerticalPositionChange = createContext();
 const identity = ( x ) => x;
 
 const stylesMemo = {};
@@ -70,8 +69,6 @@ export class BlockList extends Component {
 		};
 		this.renderItem = this.renderItem.bind( this );
 		this.renderBlockListFooter = this.renderBlockListFooter.bind( this );
-		this.onCaretVerticalPositionChange =
-			this.onCaretVerticalPositionChange.bind( this );
 		this.scrollViewInnerRef = this.scrollViewInnerRef.bind( this );
 		this.addBlockToEndOfPost = this.addBlockToEndOfPost.bind( this );
 		this.shouldFlatListPreventAutomaticScroll =
@@ -94,15 +91,6 @@ export class BlockList extends Component {
 		this.props.insertBlock( newBlock, this.props.blockCount );
 	}
 
-	onCaretVerticalPositionChange( targetId, caretY, previousCaretY ) {
-		KeyboardAwareFlatList.handleCaretVerticalPositionChange(
-			this.scrollViewRef,
-			targetId,
-			caretY,
-			previousCaretY
-		);
-	}
-
 	scrollViewInnerRef( ref ) {
 		this.scrollViewRef = ref;
 	}
@@ -209,13 +197,7 @@ export class BlockList extends Component {
 			</BlockListConsumer>
 		);
 
-		return (
-			<OnCaretVerticalPositionChange.Provider
-				value={ this.onCaretVerticalPositionChange }
-			>
-				{ blockList }
-			</OnCaretVerticalPositionChange.Provider>
-		);
+		return blockList;
 	}
 
 	renderList( extraProps = {} ) {
@@ -237,8 +219,7 @@ export class BlockList extends Component {
 		} = this.props;
 		const { parentScrollRef, onScroll } = extraProps;
 
-		const { blockToolbar, blockBorder, headerToolbar, floatingToolbar } =
-			styles;
+		const { blockToolbar, headerToolbar, floatingToolbar } = styles;
 
 		const containerStyle = {
 			flex: isRootList ? 1 : 0,
@@ -250,6 +231,15 @@ export class BlockList extends Component {
 		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
@@ -263,24 +253,12 @@ export class BlockList extends Component {
 						? { 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"
-					autoScroll={ this.props.autoScroll }
 					innerRef={ ( ref ) => {
 						this.scrollViewInnerRef( parentScrollRef || ref );
 					} }
-					extraScrollHeight={
-						blockToolbar.height + blockBorder.width
-					}
-					inputAccessoryViewHeight={
-						headerToolbar.height +
-						( isFloatingToolbarVisible
-							? floatingToolbar.height
-							: 0 )
-					}
+					extraScrollHeight={ extraScrollHeight }
 					keyboardShouldPersistTaps="always"
-					scrollViewStyle={ [
-						{ flex: isRootList ? 1 : 0 },
-						! isRootList && styles.overflowVisible,
-					] }
+					scrollViewStyle={ scrollViewStyle }
 					extraData={ this.getExtraData() }
 					scrollEnabled={ isRootList }
 					contentContainerStyle={ [
@@ -407,6 +385,7 @@ export default compose( [
 		( select, { rootClientId, orientation, filterInnerBlocks } ) => {
 			const {
 				getBlockCount,
+				getBlockHierarchyRootClientId,
 				getBlockOrder,
 				getSelectedBlockClientId,
 				isBlockInsertionPointVisible,
@@ -427,10 +406,12 @@ export default compose( [
 			const isReadOnly = getSettings().readOnly;
 
 			const blockCount = getBlockCount();
-			const hasRootInnerBlocks = !! blockCount;
+			const rootBlockId = getBlockHierarchyRootClientId(
+				selectedBlockClientId
+			);
 
 			const isFloatingToolbarVisible =
-				!! selectedBlockClientId && hasRootInnerBlocks;
+				!! selectedBlockClientId && !! getBlockCount( rootBlockId );
 			const isRTL = getSettings().isRTL;
 
 			return {

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

@@ -46,7 +46,6 @@ import { useBlockEditContext } from '../block-edit';
 import { RemoveBrowserShortcuts } from './remove-browser-shortcuts';
 import { filePasteHandler } from './file-paste-handler';
 import FormatToolbarContainer from './format-toolbar-container';
-import { useNativeProps } from './use-native-props';
 import { store as blockEditorStore } from '../../store';
 import {
 	addActiveFormats,
@@ -120,7 +119,6 @@ function RichTextWrapper(
 
 	const fallbackRef = useRef();
 	const { clientId, isSelected: blockIsSelected } = useBlockEditContext();
-	const nativeProps = useNativeProps();
 	const embedHandlerPickerRef = useRef();
 	const selector = ( select ) => {
 		const {
@@ -219,6 +217,7 @@ function RichTextWrapper(
 				selectionChangeEnd
 			);
 		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ clientId, identifier ]
 	);
 
@@ -372,6 +371,7 @@ function RichTextWrapper(
 				}
 			}
 		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[
 			onReplace,
 			onSplit,
@@ -614,7 +614,6 @@ function RichTextWrapper(
 			}
 			__unstableMultilineRootTag={ __unstableMultilineRootTag }
 			// Native props.
-			{ ...nativeProps }
 			blockIsSelected={
 				originalIsSelected !== undefined
 					? originalIsSelected

packages/components/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Internal
+
+-   `Mobile` Refactor of the KeyboardAwareFlatList component.
+
 ### Enhancements
 
 -   `DropZone`: Smooth animation ([#49517](https://github.com/WordPress/gutenberg/pull/49517)).

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

@@ -24,8 +24,4 @@ export const KeyboardAwareFlatList = ( { innerRef, onScroll, ...props } ) => {
 	);
 };
 
-KeyboardAwareFlatList.handleCaretVerticalPositionChange = () => {
-	// no need to handle on Android, it is system managed
-};
-
 export default KeyboardAwareFlatList;