Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

fix: KeyboardAvoidingView height when "Prefer Cross-Fade Transitions" is enabled #34503

Closed
wants to merge 2 commits into from
Closed

fix: KeyboardAvoidingView height when "Prefer Cross-Fade Transitions" is enabled #34503

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d91e124
fix: KeyboardAvoidingView height when "Prefer Cross-Fade Transitions"…
gabrieldonadel Aug 22, 2022
d739d8c
chore: Add await to _updateBottomIfNecessary call
gabrieldonadel Aug 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 18 additions & 5 deletions Libraries/Components/Keyboard/KeyboardAvoidingView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import type {
ViewLayoutEvent,
} from '../View/ViewPropTypes';
import type {KeyboardEvent, KeyboardMetrics} from './Keyboard';
import AccessibilityInfo from '../AccessibilityInfo/AccessibilityInfo';

type Props = $ReadOnly<{|
...ViewProps,
Expand Down Expand Up @@ -71,12 +72,24 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
this.viewRef = React.createRef();
}

_relativeKeyboardHeight(keyboardFrame: KeyboardMetrics): number {
async _relativeKeyboardHeight(
keyboardFrame: KeyboardMetrics,
): Promise<number> {
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);

Expand All @@ -90,7 +103,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
this._updateBottomIfNecessary();
};

_onLayout = (event: ViewLayoutEvent) => {
_onLayout = async (event: ViewLayoutEvent) => {
const wasFrameNull = this._frame == null;
this._frame = event.nativeEvent.layout;
if (!this._initialFrameHeight) {
Expand All @@ -99,22 +112,22 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
}

if (wasFrameNull) {
this._updateBottomIfNecessary();
await this._updateBottomIfNecessary();
}

if (this.props.onLayout) {
this.props.onLayout(event);
}
};

_updateBottomIfNecessary = () => {
_updateBottomIfNecessary = async () => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Call sites for function _updateBottomIfNecessary is not using await, as a side effect the function call this.props.onLayout(event) now won't wait for _updateBottomIfNecessary to finish.

As per the doc, This event is fired immediately once the layout has been calculated

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ohh good point, I added an await to the _updateBottomIfNecessary call to ensure everything is properly calculated before the this.props.onLayout function is called.

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;
Expand Down