Keyboard immediately closes on Android (react-native-screens: v3.13.1)

[arron-olio]

Description

When upgrading from react-native-screens 3.10.1 to 3.13.1, the keyboard won't stay open. It will immediately close after opening and does not allow a user to type into a Text Input. We observed this behaviour on Android only.

Our fix was to downgrade back to react-native-screens 3.10.1

Steps To Reproduce

1. Upgrade react-native-screens

Expected behavior

Keyboard opens and stays open after clicking on a text input

Actual behavior

Keyboard immediately closes after opening (after clicking on a TextInput)

Reproduction

We found the only way to reproduce this issue was to upgrade to 3.13.1

Platform

• iOS
• Android
• Web
• Windows
• tvOS

package	version
react-native	0.64.2
@react-navigation/native	5.9.8
react-native-screens	3.10.1
react-native-safe-area-context	3.3.2
react-native-gesture-handler	1.10.3
react-native-reanimated	1.9.0

[shamilovtim]

We are still experiencing this and stuck on older versions #1342

[WoLewicki]

Can you provide a repository where it can be reproduced? It will make it simpler to debug it.

[Vantam1601]

use "react-native-screens": "^3.10.1",
it working

[janicduplessis]

This seems to happen when using react-navigation. If you create a simple stack with a screen with a text input, click on input the soft keyboard is immediately dismissed.

import { View, TextInput } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const TestStack = createStackNavigator();

function TestScreen() {
  return (
    <View style={{ padding: 16, flex: 1, backgroundColor: 'white' }}>
      <TextInput placeholder="Hello" />
    </View>
  );
}

function TestApp() {
  return (
    <NavigationContainer>
      <TestStack.Navigator>
        <TestStack.Screen name="test" component={TestScreen} />
      </TestStack.Navigator>
    </NavigationContainer>
  );
}

[hirbod]

Interesting. For me this issue only happens when I have autoFocus set. It will open the keyboard and closes it immediately. But tapping on it works for me, at least in my setup. (native-stack).

Looks like downgrading to 3.11 does circumvent the issues for now.

[alessioemireni]

Same issue here. Looks like the issue is reproducible only with old Android devices.

[KrisLau]

Same issue here. It also has been noted in numerous other forums:

• https://stackoverflow.com/questions/71227463/react-native-textinput-closes-automatically-when-opened-on-android
• TextInput closes automatically when opened on android facebook/react-native#33164

[mzpeartx]

We had this issue as well. Rolling back to 3.11.1 resolved the issue for us. 3.12.0 seemed to be the version that introduced this issue.

[levani]

I can also confirm that 3.11.1 works without this issue but 3.12.0 does not.

[Andriiklymiuk]

3.15.0 has the same issue

[hirbod]

I upgraded to SDK 46 (dev client) today and I can confirm that my inputs are closing now. Not always, but a lot of times.

IMG_0363.mov

[zbranevichfinstek]

3.19.0 has the same issue

[mehmettalhairmak]

3.20 has the same issue

[Hopefulee]

3.18.2 has the same issue. Is it gonna get fixed? there are heaps of people using this library.

[ionuts94]

3.25.0 still experiencing this issue.

[deepak-syook]

I was facing the same Issue, following steps fixed the issue :

• upgrade react-native-screens and react-native-safe-area-context to latest
• added android:windowSoftInputMode="stateAlwaysHidden|adjustPan" to android/app/src/main/AndroidManifest.xml
• enabled react-freeze for react-native-screens.

[sunilanumolu]

I was facing the same Issue, following steps fixed the issue :

• upgrade react-native-screens and react-native-safe-area-context to latest
• added android:windowSoftInputMode="stateAlwaysHidden|adjustPan" to android/app/src/main/AndroidManifest.xml
• enabled react-freeze for react-native-screens.

Following first two steps resolved issue for me.

[IgorSelin]

any updates?

[tahola]

Ok I found, not sure if its the same issue as you guys but here is my fix : what cause the bug for me is that when I update the state re-render so the keyboard disappear and the field reset.

So the key is just to keep the outside of the component, ex :

(before) 👎
myscreen.js

  const [text, onChangeText] = React.useState('Useless Text');

 <TextInput
      onChangeText={onChangeText}
      value={text}
    />

(after) 👍
myscreen.js

<MyFormComponent />

MyFormComponent.js

const [text, onChangeText] = React.useState('Useless Text');
<TextInput
    onChangeText={onChangeText}
    value={text}
  />

Edit : ignore my answer, it was actually coming from @shopify/restyle component , when is inside it it always re-render :/

[iamsaadMehmood]

3.27.0 still experiencing this issue.
any update?

[alucardeht]

3.27.0 still experiencing this issue. any update?

same here

[drewbietron]

This started happening for me as well, upgraded our app to Expo 50 and updated various packages with it. Pretty tricky to track down..

[ericpoulinnz]

Had a few of our customers experience this too. We are on 3.29.0

@kkafar I see you assigned yourself this one, are you able to provide an update and any guidance?

[Manikandan-saminathan]

Had a few of our customers experience this too. We are on 3.29.0

@kkafar I see you assigned yourself this one, are you able to provide an update and any guidance?

Yes I also used the 3.29.0 still facing the issue

[cosminpwd]

Still happening with 3.30.1. Looks like the problem occurs when the text input position is inside the area where the keyboard pops up. If the text input is above the keyboard area everything is fine.

[Manikandan-saminathan]

Still happening with 3.30.1. Looks like the problem occurs when the text input position is inside the area where the keyboard pops up. If the text input is above the keyboard area everything is fine.

In my case, the test input was inside top tab, not in the keyboard showing area still facing this issue.

[radulescuandrew]

Still reproduced on 3.31.1, Expo 50.

[hjun555]

@cosminpwd same here me too. If TextInput component is at the position where being hide by keyboard, keyboard is dismissed right after opened. But if TextInput component's position is far from bottom and not being hide by keyboard, keybaord works normally.
I think this is kind of bug.

[nogueiraever]

Same issue here,

• react-native-screens 3.31.1
• expo 51

I was using it inside a ScrollView, removing it solved the issue to me

[Code-Victor]

Still happening with 3.30.1. Looks like the problem occurs when the text input position is inside the area where the keyboard pops up. If the text input is above the keyboard area everything is fine.

This is true in my case.

[mosheFuks]

I'm experiencing the same issue with react-native-screens version 3.30.1. I changed my navigation from Drawer to a combination of Drawer and Stack, and now when I tap on a TextInput, the keyboard appears but disappears after typing a couple of letters. Whatever was supposed to be saved in onChangeText also gets erased because the TextInput reverts back to displaying the placeholder value.

Another issue I'm encountering is that within the same screen, when I change the value of a useState(), it doesn't seem to take effect. For example, when selecting a color from a list, the list remains visible whereas previously, before changing the navigation type, the list would disappear and only the selected color would show up. Any help would be greatly appreciated!

[pleymor]

Happy 2 years anniversary, issue 1447! 🎉

[levymetal]

I was experiencing this issue within a KeyboardAvoidingView. After a bit of digging, I found a comment on a similar react-native issue which described a working fix: setting behavior to undefined on the KeyboardAvoidingView.

<KeyboardAvoidingView behavior={Platform.OS === 'android' ? undefined : 'padding'} />

Kudos to @brianlenz for figuring this out!

[Judge-Paul]

@levymetal can confirm this fix worked for me as well, thanks

Although I used height instead of padding so it seems the issue might be using padding with a child ScrollView

{Platform.OS === 'android' ? 'height' : 'padding'}

My code for anyone who might come across this in the future

      <KeyboardAvoidingView
         behavior={Platform.OS === 'android' ? 'height' : 'padding'}
      >
         <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
            <ScrollView
               keyboardShouldPersistTaps="always"
            >
              {...rest of the code}
            </ScrollView>
         </TouchableWithoutFeedback>
      </KeyboardAvoidingView>