Expo Android: Why does the view move up when the keyboard appears?

Question

I have set the softwareKeyboardLayoutMode field to pan in the app.json already as follows:

"android": {
  "softwareKeyboardLayoutMode": "pan"
}, 

This effectively prevents the view from being distorted for other components when the keyboard appears. However, this causes a weird behavior where the view (including the stack screen headers) is pushed up by the keyboard for components where the <TextInput /> is present in the range of the keyboard area.

Removing the softwareKeyboardLayoutMode field in app.json (allowing it to default to resize) prevents this behavior, but causes the other components to have a distorted view on render of the keyboard instead. Was wondering if anyone faced this issue before, and found an effective workaround/solution to it? Really thank you for your time!

The following are the codes for a minimal example:

<View style={{ flex: 1, backgroundColor: "white" }}>
  <View
    style={{
      position: "absolute",
      bottom: 0,
      left: 0,
      right: 0,
      height: 50,
      backgroundColor: "silver",
    }}
  >
    <TextInput />
  </View>
</View>

Answer 1

Are you using React Native? Is the code in your app similar to your example? Given the information/context provided though, I am thinking you might want to start by trying to add SafeAreaView and wrapping your View content in that. Code example below using your example above:

import { SafeAreaView } from "react-native";

//all other code here to render screen

<SafeAreaView>
  <View style={{ flex: 1, backgroundColor: "white" }}>
    <View
      style={{
        position: "absolute",
        bottom: 0,
        left: 0,
        right: 0,
        height: 50,
        backgroundColor: "silver",
      }}
    >
      <TextInput />
    </View>
  </View>
</SafeAreaView>