Change Soft Input Mode in React Native Android

React Native empowers web developers by making it easier to create mobile applications using React, a web technology. That’s great since it’s easier to start if you’re already familiar with React.

But the truth is, at the end of the day, you’re developing on a mobile platform, so the same rules that apply to developing fully native apps apply using React Native as well, and the browser is out of the context now.

Screen Behavior When Keyboard Opens

Android, by default, will resize the view when we open the keyboard. That makes it possible to keep the focus on the input we’re interacting with in that moment.

For example, the following image shows the behavior I’m describing when you click on an input:

That’s cool, but maybe we want another behavior. For example, imagine we have have a component to save a position like this:

import React from "react";
import { View, Text, Button } from "react-native";
import AppInput from "./AppInput";

export default () => (
  <View style={{ flex: 1, justifyContent: "space-between" }}>
    <View style={{ flex: 1 }}>
      <AppInput
        label="Name"
        value=""
      />
      <AppInput
        label="Description 4"
        value=""
      />
      {/* ... */}
    </View>

    <View style={{ flexDirection: "row" }}>
      <View style={{ flex: 1, paddingRight: 3 }}>
        <Button
          color="#999"
          title="Cancel"
        />
      </View>
      <View style={{ flex: 1, paddingLeft: 3 }}>
        <Button title="Confirm" />
      </View>
    </View>
  </View>
)

It will render to a screen with two inputs and a couple of buttons at the bottom of the screen, as you can see in the following image:

Then if we click in the first input, the buttons are pushed up, exactly above the keyboard:

But we can tweak the Android Manifest to change that default behavior.

The Android Manifest

In a React Native app you’ll find both the android and ios projects. If you don’t see them it’s probably is because you’ve used create-react-native-app and haven’t ejected yet, but once you do so you’ll gain access to these projects as well as being able to install native dependencies.

In the android project, you’ll find the Android Manifest: a file that contains information about the android application such as permissions, metadata, activity properties, etc.

Among the different default properties, you can see android:windowSoftInputMode. That’s the property that we can change for the view behavior when the keyboard opens, which by default has a value of adjustResize.

If we want to change it to keep the buttons down and avoid resizing or doing anything with the screen when it opens, we can change it to adjustPan:

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustPan"
  ...
  > ... </activity>

Then it will show up as follows:

Wrapping Up

We’ve seen how we can change the screen behavior when the keyboard opens on Android. This solution is global to the application and quick to apply.

In the Android docs you can see all the available modes for this behavior. Go an try out!

Stay cool 🦄