diff --git a/packages/react-native/Libraries/Modal/Modal.js b/packages/react-native/Libraries/Modal/Modal.js index 2bdcbecc4dd0d6..91d6cc68fe40bf 100644 --- a/packages/react-native/Libraries/Modal/Modal.js +++ b/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 { } } - const innerChildren = __DEV__ ? ( + let innerChildren = __DEV__ ? ( {this.props.children} ) : ( this.props.children ); + innerChildren = ( + + + + {innerChildren} + + + + ); + const onDismiss = () => { // OnDismiss is implemented on iOS only. if (Platform.OS === 'ios') { @@ -322,6 +341,18 @@ class Modal extends React.Component { } }; + const children = + this.props.avoidKeyboard === true ? ( + + {innerChildren} + + ) : ( + innerChildren + ); + return ( { onOrientationChange={this.props.onOrientationChange} allowSwipeDismissal={this.props.allowSwipeDismissal} testID={this.props.testID}> - - - - {innerChildren} - - - + {children} ); } @@ -381,6 +403,11 @@ const styles = StyleSheet.create({ top: 0, flex: 1, }, + keyboardAvoidingView: { + flex: 1, + margin: 0, + justifyContent: 'center', + }, }); type ModalRefProps = $ReadOnly<{