Add ScrollView example in KeyboardAvoidingViewExample

Summary:
Add a new RNTester example in KeyboardAvoidingView for using the component with a ScrollView. This reproduces the issue raised in [#16826](#16826) where keyboard avoiding behavior fails for multi-line text fields in a ScrollView on iOS. As this is a common use case, the example acts as a reference to show intended behavior and prevent future regressions.

Changelog:
[Internal]

Differential Revision: D119204439

Author: jasozh

packages/rn-tester/js/examples/KeyboardAvoidingView/KeyboardAvoidingViewExample.js

@@ -20,6 +20,7 @@ import {
   KeyboardAvoidingView,
   Modal,
   Pressable,
+  ScrollView,
   StyleSheet,
   Text,
   TextInput,
@@ -57,54 +58,56 @@ const CloseButton = (props: {setModalOpen: boolean => void}) => {
   );
 };
 
+type KeyboardAvoidingBehavior = 'padding' | 'position' | 'height';
+
+const BEHAVIORS: Array<KeyboardAvoidingBehavior> = [
+  'padding',
+  'position',
+  'height',
+];
+
+const BehaviorPicker = (props: {
+  behavior: KeyboardAvoidingBehavior,
+  setBehavior: KeyboardAvoidingBehavior => void,
+}) => {
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        justifyContent: 'center',
+      }}>
+      {BEHAVIORS.map(behavior => {
+        const selected = props.behavior === behavior;
+        return (
+          <TouchableOpacity
+            key={behavior}
+            onPress={() => props.setBehavior(behavior)}
+            style={[
+              styles.pillStyle,
+              {backgroundColor: selected ? 'blue' : 'white'},
+            ]}>
+            <Text
+              style={{
+                textTransform: 'capitalize',
+                color: selected ? 'white' : 'blue',
+              }}>
+              {behavior}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
 const KeyboardAvoidingViewBehaviour = () => {
   const [modalOpen, setModalOpen] = useState(false);
-  const [behavior, setBehavior] = useState('padding');
+  const [behavior, setBehavior] = useState<KeyboardAvoidingBehavior>('padding');
   return (
     <View style={styles.outerContainer}>
       <Modal animationType="fade" visible={modalOpen}>
-        {/* $FlowFixMe[incompatible-type] Natural Inference rollout. See
-         * https://fburl.com/workplace/6291gfvu */}
         <KeyboardAvoidingView behavior={behavior} style={styles.container}>
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'center',
-            }}>
-            <TouchableOpacity
-              onPress={() => setBehavior('padding')}
-              style={[
-                styles.pillStyle,
-                {backgroundColor: behavior === 'padding' ? 'blue' : 'white'},
-              ]}>
-              <Text style={{color: behavior === 'padding' ? 'white' : 'blue'}}>
-                Padding
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              onPress={() => setBehavior('position')}
-              style={[
-                styles.pillStyle,
-                {backgroundColor: behavior === 'position' ? 'blue' : 'white'},
-              ]}>
-              <Text style={{color: behavior === 'position' ? 'white' : 'blue'}}>
-                Position
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              onPress={() => setBehavior('height')}
-              style={[
-                styles.pillStyle,
-                {backgroundColor: behavior === 'height' ? 'blue' : 'white'},
-              ]}>
-              <Text
-                style={{
-                  color: behavior === 'height' ? 'white' : 'blue',
-                }}>
-                Height
-              </Text>
-            </TouchableOpacity>
-          </View>
+          <BehaviorPicker behavior={behavior} setBehavior={setBehavior} />
           <CloseButton setModalOpen={setModalOpen} />
           <TextInputForm />
         </KeyboardAvoidingView>
@@ -189,6 +192,46 @@ const KeyboardAvoidingContentContainerStyle = () => {
   );
 };
 
+const KeyboardAvoidingScrollView = () => {
+  const [modalOpen, setModalOpen] = useState(false);
+  const [behavior, setBehavior] = useState<KeyboardAvoidingBehavior>('padding');
+  return (
+    <View>
+      <Modal animationType="fade" visible={modalOpen}>
+        <KeyboardAvoidingView
+          behavior={behavior}
+          style={styles.scrollViewContainer}
+          contentContainerStyle={{flex: 1}}>
+          <View style={{paddingHorizontal: 20}}>
+            <BehaviorPicker behavior={behavior} setBehavior={setBehavior} />
+            <CloseButton setModalOpen={setModalOpen} />
+          </View>
+          <ScrollView
+            style={{flex: 1}}
+            contentContainerStyle={styles.scrollViewContent}>
+            {Array.from({length: 10}, (_, index) => (
+              <View key={index} style={styles.fillerItem}>
+                <Text style={{fontSize: 16}}>Item {index + 1}</Text>
+              </View>
+            ))}
+            <TextInput placeholder="Name" style={[styles.textInput]} />
+            <TextInput
+              placeholder="Message"
+              multiline
+              style={[styles.textInput, styles.multilineTextInput]}
+            />
+          </ScrollView>
+        </KeyboardAvoidingView>
+      </Modal>
+      <View>
+        <Pressable onPress={() => setModalOpen(true)}>
+          <Text style={styles.touchableText}>Open Example</Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+};
+
 const styles = StyleSheet.create({
   outerContainer: {
     flex: 1,
@@ -204,13 +247,34 @@ const styles = StyleSheet.create({
     paddingTop: 20,
     backgroundColor: '#abdebf',
   },
+  scrollViewContainer: {
+    flex: 1,
+    paddingTop: 100,
+  },
+  scrollViewContent: {
+    paddingBottom: 60,
+    paddingHorizontal: 20,
+  },
+  fillerItem: {
+    backgroundColor: '#eeeeee',
+    borderRadius: 8,
+    paddingVertical: 16,
+    paddingHorizontal: 12,
+    marginBottom: 20,
+    alignItems: 'center',
+  },
   textInput: {
     borderRadius: 5,
     borderWidth: 1,
-    height: 44,
+    minHeight: 44,
     marginBottom: 20,
     paddingHorizontal: 10,
   },
+  multilineTextInput: {
+    minHeight: 88,
+    paddingVertical: 10,
+    textAlignVertical: 'top',
+  },
   pillStyle: {
     padding: 10,
     marginHorizontal: 5,
@@ -267,4 +331,13 @@ exports.examples = [
       return <KeyboardAvoidingContentContainerStyle />;
     },
   },
+  {
+    title: 'Keyboard Avoiding View with ScrollView',
+    description:
+      ('A ScrollView with filler content and TextInputs at the bottom inside the scrollable content. ' +
+        'TextInputs should still be visible when focused.') as string,
+    render(): React.Node {
+      return <KeyboardAvoidingScrollView />;
+    },
+  },
 ] as Array<RNTesterModuleExample>;