react-native

mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00

Files

T

Pavol Fulop f85e2ecc40 Include existing height when calculating new one for KeyboardAvoidingView (#34749 )

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

Pull Request resolved: https://github.com/facebook/react-native/pull/34749

Test Plan:
With simple code:

```jsx
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  |
|---|---|
| ![2022-09-21 13-59-09 2022-09-21 14_01_44](https://user-images.githubusercontent.com/3984319/191499509-b41280a0-2969-4fe6-8796-c5695b999f27.gif)  | ![2022-09-21 14-03-33 2022-09-21 14_04_30](https://user-images.githubusercontent.com/3984319/191499628-a5832b88-e511-448d-8081-ac48d3a3690a.gif)  |

Reviewed By: cipolleschi

Differential Revision: D39718812

Pulled By: NickGerleman

fbshipit-source-id: 2550182e846f3f8e719d727fa8e6d87165faebf6

2022-09-26 15:10:27 -07:00

__tests__

@emails -> @oncall (remaining ones)

2022-09-15 15:54:10 -07:00

Keyboard.d.ts

Place TypeScript Declarations Alongside Source Files

2022-09-26 12:09:45 -07:00

Keyboard.js

Let ScrollView Know About Keyboard Opened Before Mount

2022-08-18 15:05:43 -07:00

KeyboardAvoidingView.d.ts

Place TypeScript Declarations Alongside Source Files