diff --git a/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/Libraries/Components/Keyboard/KeyboardAvoidingView.js index 4536402c5104f6..f7914cb6df0737 100644 --- a/Libraries/Components/Keyboard/KeyboardAvoidingView.js +++ b/Libraries/Components/Keyboard/KeyboardAvoidingView.js @@ -23,6 +23,7 @@ import type { ViewLayoutEvent, } from '../View/ViewPropTypes'; import type {KeyboardEvent, KeyboardEventCoordinates} from './Keyboard'; +import AccessibilityInfo from '../AccessibilityInfo/AccessibilityInfo'; type Props = $ReadOnly<{| ...ViewProps, @@ -71,12 +72,24 @@ class KeyboardAvoidingView extends React.Component { this.viewRef = React.createRef(); } - _relativeKeyboardHeight(keyboardFrame: KeyboardEventCoordinates): number { + async _relativeKeyboardHeight( + keyboardFrame: KeyboardEventCoordinates, + ): Promise { const frame = this._frame; if (!frame || !keyboardFrame) { return 0; } + // On iOS when Prefer Cross-Fade Transitions is enabled, the keyboard position + // & height is reported differently (0 instead of Y position value matching height of frame) + if ( + Platform.OS === 'ios' && + keyboardFrame.screenY === 0 && + (await AccessibilityInfo.prefersCrossFadeTransitions()) + ) { + return 0; + } + const keyboardY = keyboardFrame.screenY - (this.props.keyboardVerticalOffset ?? 0); @@ -90,7 +103,7 @@ class KeyboardAvoidingView extends React.Component { this._updateBottomIfNecessary(); }; - _onLayout = (event: ViewLayoutEvent) => { + _onLayout = async (event: ViewLayoutEvent) => { const wasFrameNull = this._frame == null; this._frame = event.nativeEvent.layout; if (!this._initialFrameHeight) { @@ -99,7 +112,7 @@ class KeyboardAvoidingView extends React.Component { } if (wasFrameNull) { - this._updateBottomIfNecessary(); + await this._updateBottomIfNecessary(); } if (this.props.onLayout) { @@ -107,14 +120,14 @@ class KeyboardAvoidingView extends React.Component { } }; - _updateBottomIfNecessary = () => { + _updateBottomIfNecessary = async () => { if (this._keyboardEvent == null) { this.setState({bottom: 0}); return; } const {duration, easing, endCoordinates} = this._keyboardEvent; - const height = this._relativeKeyboardHeight(endCoordinates); + const height = await this._relativeKeyboardHeight(endCoordinates); if (this.state.bottom === height) { return;