// Tutorial //

Change Soft Input Mode in React Native Android

Published on July 16, 2018
Default avatar
By Alex Jover Morales
Developer and author at DigitalOcean.
Change Soft Input Mode in React Native Android

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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:

login

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:

Save

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

Save keyboard open

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:

android/app/src/main/AndroidManifest.xml (partial)
<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustPan"
  ...
  > ... </activity>

Then it will show up as follows:

Save keyboard open

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 🦄


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
1 Comments

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

I want to set the adjustPan to only one of my page. Not to the entire application. How to do this.