diff --git a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js index e26d6771c47209..860118dc38375e 100644 --- a/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js +++ b/packages/react-native/Libraries/Components/Keyboard/KeyboardAvoidingView.js @@ -9,6 +9,7 @@ */ import type {ViewStyleProp} from '../../StyleSheet/StyleSheet'; +import type {DimensionsPayload} from '../../Utilities/NativeDeviceInfo'; import type { ViewLayout, ViewLayoutEvent, @@ -18,6 +19,7 @@ import type {KeyboardEvent, KeyboardMetrics} from './Keyboard'; import LayoutAnimation from '../../LayoutAnimation/LayoutAnimation'; import StyleSheet from '../../StyleSheet/StyleSheet'; +import Dimensions from '../../Utilities/Dimensions'; import Platform from '../../Utilities/Platform'; import {type EventSubscription} from '../../vendor/emitter/EventEmitter'; import AccessibilityInfo from '../AccessibilityInfo/AccessibilityInfo'; @@ -66,6 +68,7 @@ class KeyboardAvoidingView extends React.Component { viewRef: {current: React.ElementRef | null, ...}; _initialFrameHeight: number = 0; _bottom: number = 0; + _windowWidth: number = Dimensions.get('window').width; constructor(props: Props) { super(props); @@ -130,6 +133,10 @@ class KeyboardAvoidingView extends React.Component { } }; + _onDimensionsChange = ({window}: DimensionsPayload) => { + this._windowWidth = window?.width ?? 0; + }; + // Avoid unnecessary renders if the KeyboardAvoidingView is disabled. _setBottom = (value: number) => { const enabled = this.props.enabled ?? true; @@ -145,6 +152,15 @@ class KeyboardAvoidingView extends React.Component { return; } + if ( + Platform.OS === 'ios' && + this._windowWidth !== this._keyboardEvent.endCoordinates.width + ) { + // The keyboard is not the standard bottom-of-the-screen keyboard. For example, floating keyboard on iPadOS. + this._setBottom(0); + return; + } + const {duration, easing, endCoordinates} = this._keyboardEvent; const height = await this._relativeKeyboardHeight(endCoordinates); @@ -178,6 +194,7 @@ class KeyboardAvoidingView extends React.Component { if (Platform.OS === 'ios') { this._subscriptions = [ Keyboard.addListener('keyboardWillChangeFrame', this._onKeyboardChange), + Dimensions.addEventListener('change', this._onDimensionsChange), ]; } else { this._subscriptions = [