KeyboardAvoidingView (behaviour = height) - wrong size when switching keyboards

[dranitski]

Description

Demonstration:

Problem:
When switching keyboards (ABC, emoji, gif, etc) on IOS and Android in behaviour: height mode the size of component is incorrect.

Version

0.70.5

Output of npx react-native info

info Fetching system and libraries information...
System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 18.64 GB / 31.20 GB
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.12.1 - /usr/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.2.0 - /usr/bin/npm
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 11.0.17 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.1.0 => 18.1.0 
    react-native: 0.70.5 => 0.70.5 
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

please look at code provided. Focus on TextInput and then switch keyboards (ABC, emoji, gif, etc)

Snack, code example, screenshot, or link to a repository

Repro:

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",
  },
});

[dranitski]

Linked issues and PRs:
#35213
#34749

[pfulop]

Interesting. We're running 0.70.6 and don't see the issue. Mind checking in npm modules if my fix is present?

[dranitski]

@pfulop just updated my expo app to 0.70.6 and still can reproduce the issue.

I looked at react-native repo - in 0.70.6 your fix is not present at all!

Just compare:

• https://github.com/facebook/react-native/blob/v0.70.6/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L93-L98
• https://github.com/facebook/react-native/pull/34749/files

[pfulop]

@dranitski Now I see. I see it locally because the patch I made for our project is still being applied during installation.

But indeed, it's in Main but not in the latest release. I guess this is a better question for maintainers.

[dranitski]

@pfulop maybe they will faster react on PR then Issue? Do you have a minute to re-create your PR?

[pfulop]

@dranitski The change is present in the main. So the PR would be empty.

[dranitski]

@pfulop thanks, now I see it. Thanks for your time. I dont know what else can we do to escalate the issue. Will just wait 🫖

[dranitski]

@pfulop seems like the fix was added again in latest 0.71 release https://github.com/facebook/react-native/blob/0.71-stable/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L96

[novirusallowed]

Same issue here and it's getting very annoying.
Every time I switch the keyboard to symbols/emoji or any other and then switch back to letters, the height gets completely miscalculated.

Is there any quick fix for this?

[camilossantos2809]

I usually use android:windowSoftInputMode="adjustResize" in AndroidManifest.xml and behavior={Platform.OS === "ios" ? "padding" : undefined} in KeyboardAvoidingView.
Does this help your situation?