From 67309277fe588c4dd64fe0c680d1d00d2f3fb2b6 Mon Sep 17 00:00:00 2001 From: Samuel Susla Date: Tue, 15 Dec 2020 12:02:08 -0800 Subject: [PATCH] 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 --- Libraries/Components/Keyboard/KeyboardAvoidingView.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/Libraries/Components/Keyboard/KeyboardAvoidingView.js index 4e87a3f16c8d76..b3b33f838bec24 100644 --- a/Libraries/Components/Keyboard/KeyboardAvoidingView.js +++ b/Libraries/Components/Keyboard/KeyboardAvoidingView.js @@ -97,13 +97,16 @@ class KeyboardAvoidingView extends React.Component { }; _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 = () => {