From 4aab1983badaf5b5e8607a84e4e10915de647458 Mon Sep 17 00:00:00 2001
From: Carlos Garcia <fluiddot@gmail.com>
Date: Fri, 25 Jun 2021 13:18:50 +0200
Subject: [PATCH 1/2] Update KeyboardAwareFlatList iOS implementation

Use KeyboardAwareFlatList component instead of KeyboardAwareScrollView to prevent triggering the error:
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.
---
 .../keyboard-aware-flat-list/index.ios.js     | 107 +++++++++---------
 1 file changed, 56 insertions(+), 51 deletions(-)

diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js b/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js
index 87b319c711041a..fe2af11f65550e 100644
--- a/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js
@@ -1,16 +1,12 @@
 /**
  * External dependencies
  */
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
-import { FlatList } from 'react-native';
-import { isEqual } from 'lodash';
+import { KeyboardAwareFlatList as RNKeyboardAwareFlatList } from 'react-native-keyboard-aware-scroll-view';
 
 /**
  * WordPress dependencies
  */
-import { memo } from '@wordpress/element';
-
-const List = memo( FlatList, isEqual );
+import { useRef } from '@wordpress/element';
 
 export const KeyboardAwareFlatList = ( {
 	extraScrollHeight,
@@ -19,53 +15,62 @@ export const KeyboardAwareFlatList = ( {
 	autoScroll,
 	scrollViewStyle,
 	inputAccessoryViewHeight,
+	scrollEnabled,
 	...listProps
-} ) => (
-	<KeyboardAwareScrollView
-		style={ [ { flex: 1 }, scrollViewStyle ] }
-		keyboardDismissMode="none"
-		enableResetScrollToCoords={ false }
-		keyboardShouldPersistTaps="handled"
-		extraScrollHeight={ extraScrollHeight }
-		extraHeight={ 0 }
-		inputAccessoryViewHeight={ inputAccessoryViewHeight }
-		enableAutomaticScroll={ autoScroll === undefined ? false : autoScroll }
-		ref={ ( ref ) => {
-			this.scrollViewRef = ref;
-			innerRef( ref );
-		} }
-		onKeyboardWillHide={ () => {
-			this.keyboardWillShowIndicator = false;
-		} }
-		onKeyboardDidHide={ () => {
-			setTimeout( () => {
-				if (
-					! this.keyboardWillShowIndicator &&
-					this.latestContentOffsetY !== undefined &&
-					! shouldPreventAutomaticScroll()
-				) {
-					// Reset the content position if keyboard is still closed
-					if ( this.scrollViewRef ) {
-						this.scrollViewRef.scrollToPosition(
-							0,
-							this.latestContentOffsetY,
-							true
-						);
+} ) => {
+	const scrollViewRef = useRef();
+	const keyboardWillShowIndicator = useRef();
+	const latestContentOffsetY = useRef();
+	return (
+		<RNKeyboardAwareFlatList
+			style={ [ { flex: 1 }, scrollViewStyle ] }
+			contentContainerStyle={ { flexGrow: 1, backgroundColor: 'red' } }
+			keyboardDismissMode="none"
+			enableResetScrollToCoords={ false }
+			keyboardShouldPersistTaps="handled"
+			extraScrollHeight={ extraScrollHeight }
+			extraHeight={ 0 }
+			inputAccessoryViewHeight={ inputAccessoryViewHeight }
+			enableAutomaticScroll={
+				autoScroll === undefined ? false : autoScroll
+			}
+			ref={ ( ref ) => {
+				scrollViewRef.current = ref;
+				innerRef( ref );
+			} }
+			onKeyboardWillHide={ () => {
+				keyboardWillShowIndicator.current = false;
+			} }
+			onKeyboardDidHide={ () => {
+				setTimeout( () => {
+					if (
+						! keyboardWillShowIndicator.current &&
+						latestContentOffsetY.current !== undefined &&
+						! shouldPreventAutomaticScroll()
+					) {
+						// Reset the content position if keyboard is still closed
+						if ( scrollViewRef.current ) {
+							scrollViewRef.current.scrollToPosition(
+								0,
+								latestContentOffsetY.current,
+								true
+							);
+						}
 					}
-				}
-			}, 50 );
-		} }
-		onKeyboardWillShow={ () => {
-			this.keyboardWillShowIndicator = true;
-		} }
-		scrollEnabled={ listProps.scrollEnabled }
-		onScroll={ ( event ) => {
-			this.latestContentOffsetY = event.nativeEvent.contentOffset.y;
-		} }
-	>
-		<List { ...listProps } />
-	</KeyboardAwareScrollView>
-);
+				}, 50 );
+			} }
+			onKeyboardWillShow={ () => {
+				keyboardWillShowIndicator.current = true;
+			} }
+			scrollEnabled={ scrollEnabled }
+			onScroll={ ( event ) => {
+				latestContentOffsetY.current =
+					event.nativeEvent.contentOffset.y;
+			} }
+			{ ...listProps }
+		/>
+	);
+};
 
 KeyboardAwareFlatList.handleCaretVerticalPositionChange = (
 	scrollView,

From 3b898adaf10efe28003f2e630c12c05bf5b9c3fd Mon Sep 17 00:00:00 2001
From: Carlos Garcia <fluiddot@gmail.com>
Date: Fri, 12 Nov 2021 16:15:50 +0100
Subject: [PATCH 2/2] Update
 packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js

Co-authored-by: David Calhoun <438664+dcalhoun@users.noreply.github.com>
---
 .../components/src/mobile/keyboard-aware-flat-list/index.ios.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js b/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js
index fe2af11f65550e..37adfcca2bd5f9 100644
--- a/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js
+++ b/packages/components/src/mobile/keyboard-aware-flat-list/index.ios.js
@@ -24,7 +24,7 @@ export const KeyboardAwareFlatList = ( {
 	return (
 		<RNKeyboardAwareFlatList
 			style={ [ { flex: 1 }, scrollViewStyle ] }
-			contentContainerStyle={ { flexGrow: 1, backgroundColor: 'red' } }
+			contentContainerStyle={ { flexGrow: 1 } }
 			keyboardDismissMode="none"
 			enableResetScrollToCoords={ false }
 			keyboardShouldPersistTaps="handled"