Change Soft Input Mode in React Native Android

Published on July 16, 2018

Alex Jover Morales

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:


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 }}>
        label="Description 4"
      {/* ... */}

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

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:

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>

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 🦄

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Alex Jover Morales


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?

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.

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel