Fix infinite loop in KeyboardAvoidingView

Summary:
Changelog: [General][Fixed] Fix stalling UI due to a bug in KeyboardAvoidingView

I introduced this bug in D22764192 (https://github.com/facebook/react-native/commit/b08fff6f869e00c20c0dcdf7aca71284c2f276f0).

The stalling was caused by onLayout in JavaScript triggering native layout which called onLayout in JavaScript without terminating condition.

The fix is to only cause native layout once from JavaScript's onLayout function. This makes sure both Fabric and Paper works correctly and UI stall isn't caused.

Resolves:
https://github.com/facebook/react-native/issues/30495
https://github.com/facebook/react-native/issues/30532

Reviewed By: TheSavior

Differential Revision: D25522362

fbshipit-source-id: 602e540bb1c40ae4f421b3e6ebc5a047cd920c17
This commit is contained in:
Samuel Susla
2020-12-16 10:18:02 +01:00
committed by Mike Grabowski
parent ed237b4792
commit 4481d09865
@@ -97,13 +97,16 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
};
_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;
}
this._updateBottomIfNecesarry();
if (wasFrameNull) {
this._updateBottomIfNecesarry();
}
};
_updateBottomIfNecesarry = () => {