Include existing height when calculating new one for KeyboardAvoidingView

[pfulop]

Summary

Currently, height is sometimes the only valid option for pushing TextInput up in the layout on Android. The problem is when switching keyboards. For instance, switching from ABC to emojis. This will trigger keyboard show events and recalculate the height for the KeyboardAvoidingView. Since the keyboard is still showing, the view has the height that was previously calculated and thus frame represents that. This means the frame.height has adjustments for the keyboard calculated in it, but it is used the same way as if the keyboard was not showing. This results in wrong calculation and the input showing at the incorrect place in the layout (mostly hidden under the keyboard)

This fix simply uses the previous calculation to offset frame.height, resulting in the correct height and smooth switching between keyboards. It's also scoped only to height mode since that's where the problem shows.

Note: I mention android here, but it fixes it for both platforms. It's just that iOS usually works best with different behaviour so it's rarely used there.

Changelog

[General] [Added] - Include this.state.bottom when calculating new keyboard height to fix android keyboard switching

Test Plan

With simple code:

import { StatusBar } from "expo-status-bar";
import React from "react";
import {
  KeyboardAvoidingView,
  StyleSheet,
  Text,
  TextInput,
  View,
} from "react-native";

export default function App() {
  return (
    <KeyboardAvoidingView style={styles.container} behavior="height">
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
      <TextInput style={{ backgroundColor: "red", width: "100%" }} />
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 32,
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "space-between",
  },
});

Notice the consistency of the TextInput after the changes, while before it would just move around more you switch the keyboards.

Before	After

[facebook-github-bot]

@NickGerleman has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

[react-native-bot]

This pull request was successfully merged by @pfulop in f85e2ec.

^{When will my fix make it into a release? | Upcoming Releases}

[Orange9000]

Was the merge reverted? This bug popped again in RN 0.70.2.

[dranitski]

I can confirm the bug is here again in RN 0.70.5 ⚠️

Android/ios, behavior = height

[bang9]

@Orange9000 @dranitski Here, you can find the version that includes PR.

[anatooly]

It's very important task, thank you.

[supoved]

I can see this bug happening again in 0.71.8

as far as I can see none of callbacks is called when keyboard type is changed, so its probably somewhere around native code integration (tested on Android 13)