Modal "avoidKeyboard" prop (#52526)

Summary:
Pull Request resolved: #52526

## Changelog
[iOS] [Added] - Modal "avoidKeyboard" prop
## The problem
It seems like the default behavior is that in iOS the modal is not avoiding the keyboard, meaning that anywhere that there is a modal that can trigger the virtual keyboard, this issue can occour.
## The fix
Addign support inside the "Modal" component using a new flag called "avoidKeyboard" which is implemented by conditionally wrapping the children of the modal with "KeyboardAvoidingView" with the needed attributes to cause the modal itself to avoid the keyboard to get the desired behavior.

Reviewed By: bsalex

Differential Revision: D78010672

Author: Liron Moshkovich

packages/react-native/Libraries/Modal/Modal.js

@@ -13,6 +13,7 @@ import type {ViewProps} from '../Components/View/ViewPropTypes';
 import type {RootTag} from '../ReactNative/RootTag';
 import type {DirectEventHandler} from '../Types/CodegenTypes';
 
+import {KeyboardAvoidingView} from '../..';
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
 import {type ColorValue} from '../StyleSheet/StyleSheet';
 import {type EventSubscription} from '../vendor/emitter/EventEmitter';
@@ -153,6 +154,11 @@ export type ModalPropsIOS = {
    * This requires you to implement the `onRequestClose` prop to handle the dismissal.
    */
   allowSwipeDismissal?: ?boolean,
+
+  /**
+   * Controls whether the modal adjusts its position when the vurtual keyboard is displayed.
+   */
+  avoidKeyboard?: boolean,
 };
 
 export type ModalPropsAndroid = {
@@ -305,12 +311,25 @@ class Modal extends React.Component<ModalProps, ModalState> {
       }
     }
 
-    const innerChildren = __DEV__ ? (
+    let innerChildren = __DEV__ ? (
       <AppContainer rootTag={this.context}>{this.props.children}</AppContainer>
     ) : (
       this.props.children
     );
 
+    innerChildren = (
+      <VirtualizedListContextResetter>
+        <ScrollView.Context.Provider value={null}>
+          <View
+            // $FlowFixMe[incompatible-type]
+            style={[styles.container, containerStyles]}
+            collapsable={false}>
+            {innerChildren}
+          </View>
+        </ScrollView.Context.Provider>
+      </VirtualizedListContextResetter>
+    );
+
     const onDismiss = () => {
       // OnDismiss is implemented on iOS only.
       if (Platform.OS === 'ios') {
@@ -322,6 +341,18 @@ class Modal extends React.Component<ModalProps, ModalState> {
       }
     };
 
+    const children =
+      this.props.avoidKeyboard === true ? (
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+          pointerEvents="box-none"
+          style={styles.keyboardAvoidingView}>
+          {innerChildren}
+        </KeyboardAvoidingView>
+      ) : (
+        innerChildren
+      );
+
     return (
       <RCTModalHostView
         /* $FlowFixMe[incompatible-type] Natural Inference rollout. See
@@ -345,16 +376,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
         onOrientationChange={this.props.onOrientationChange}
         allowSwipeDismissal={this.props.allowSwipeDismissal}
         testID={this.props.testID}>
-        <VirtualizedListContextResetter>
-          <ScrollView.Context.Provider value={null}>
-            <View
-              // $FlowFixMe[incompatible-type]
-              style={[styles.container, containerStyles]}
-              collapsable={false}>
-              {innerChildren}
-            </View>
-          </ScrollView.Context.Provider>
-        </VirtualizedListContextResetter>
+        {children}
       </RCTModalHostView>
     );
   }
@@ -381,6 +403,11 @@ const styles = StyleSheet.create({
     top: 0,
     flex: 1,
   },
+  keyboardAvoidingView: {
+    flex: 1,
+    margin: 0,
+    justifyContent: 'center',
+  },
 });
 
 type ModalRefProps = $ReadOnly<{