diff --git a/Libraries/Components/Keyboard/KeyboardAvoidingView.js b/Libraries/Components/Keyboard/KeyboardAvoidingView.js
index 4973fd4a0a3805..c2152d2bc91f38 100644
--- a/Libraries/Components/Keyboard/KeyboardAvoidingView.js
+++ b/Libraries/Components/Keyboard/KeyboardAvoidingView.js
@@ -29,7 +29,6 @@ type Props = $ReadOnly<{|
    * Specify how to react to the presence of the keyboard.
    */
   behavior?: ?('height' | 'position' | 'padding'),
-
   /**
    * Style of the content container when `behavior` is 'position'.
    */
@@ -66,6 +65,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
 
   _frame: ?ViewLayout = null;
   _subscriptions: Array<EmitterSubscription> = [];
+  _initialFrameHeight: number = 0;
 
   state = {
     bottom: 0,
@@ -111,19 +111,11 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
 
   _onLayout = (event: ViewLayoutEvent) => {
     this._frame = event.nativeEvent.layout;
-  };
-
-  UNSAFE_componentWillUpdate(nextProps: Props, nextState: State): void {
-    if (
-      nextState.bottom === this.state.bottom &&
-      this.props.behavior === 'height' &&
-      nextProps.behavior === 'height'
-    ) {
-      // If the component rerenders without an internal state change, e.g.
-      // triggered by parent component re-rendering, no need for bottom to change.
-      nextState.bottom = 0;
+    if (!this._initialFrameHeight) {
+      // save the initial frame height, before the keyboard is visible
+      this._initialFrameHeight = this._frame.height;
     }
-  }
+  };
 
   componentDidMount(): void {
     if (Platform.OS === 'ios') {
@@ -158,23 +150,20 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
     switch (behavior) {
       case 'height':
         let heightStyle;
-        if (this._frame != null) {
+        if (this._frame != null && this.state.bottom > 0) {
           // Note that we only apply a height change when there is keyboard present,
           // i.e. this.state.bottom is greater than 0. If we remove that condition,
           // this.frame.height will never go back to its original value.
           // When height changes, we need to disable flex.
           heightStyle = {
-            height: this._frame.height - bottomHeight,
+            height: this._initialFrameHeight - bottomHeight,
             flex: 0,
           };
         }
         return (
           <View
             ref={viewRef}
-            style={StyleSheet.compose(
-              style,
-              heightStyle,
-            )}
+            style={StyleSheet.compose(style, heightStyle)}
             onLayout={this._onLayout}
             {...props}>
             {children}
@@ -189,12 +178,9 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
             onLayout={this._onLayout}
             {...props}>
             <View
-              style={StyleSheet.compose(
-                contentContainerStyle,
-                {
-                  bottom: bottomHeight,
-                },
-              )}>
+              style={StyleSheet.compose(contentContainerStyle, {
+                bottom: bottomHeight,
+              })}>
               {children}
             </View>
           </View>
@@ -204,10 +190,7 @@ class KeyboardAvoidingView extends React.Component<Props, State> {
         return (
           <View
             ref={viewRef}
-            style={StyleSheet.compose(
-              style,
-              {paddingBottom: bottomHeight},
-            )}
+            style={StyleSheet.compose(style, {paddingBottom: bottomHeight})}
             onLayout={this._onLayout}
             {...props}>
             {children}