KeyboardAvoidingView is not adjusting correctly because the coordinate system mismatch #33421
Description
Description
You are comparing height using different coordinate systems.
The keyboard frame is in window system, and the view's frame is in parent view's coordinate system.
We have to convert the frame to the same coordinate system then do compare.
Here is how I fix it:
_onLayout = (event: any) => {
const measureCallback = (x: number, y: number, width: number, height: number) => {
const wasFrameNull = this._frame == null;
this._frame = { x, y, width, height };
if (!this._initialFrameHeight) {
// save the initial frame height, before the keyboard is visible
this._initialFrameHeight = this._frame.height;
}
if (wasFrameNull) {
this._updateBottomIfNecesarry();
}
};
this.viewRef.current.measureInWindow(measureCallback);
};The buggy version:
_onLayout = (event: ViewLayoutEvent) => {
const wasFrameNull = this._frame == null;
this._frame = event.nativeEvent.layout;
if (!this._initialFrameHeight) {
// save the initial frame height, before the keyboard is visible
this._initialFrameHeight = this._frame.height;
}
if (wasFrameNull) {
this._updateBottomIfNecesarry();
}
};Version
0.66
Output of npx react-native info
don't needed
Steps to reproduce
don't needed
Snack, code example, screenshot, or link to a repository
No response