TextInput closes automatically when opened on android

[Cristi6]

Description

Hi there,

I switched laptops and cloned the repository of my project, did a quick yarn install and looks like it was a big difference from the one on the main branch but I didn't bother since maybe it's just because of different Node versions.

Now every time I click on one TextInput the keyboard opens and closes immediately only on android. I attached a quick recording here. Tried some solutions and it looks like switching android:windowSoftInputMode from adjustResize to adjustPan in AndroidManifest.xml fixes the problem with the closing but I'm not really happy with the behaviour of the keyboard in the app when it's set to adjustPan.

Version

0.64.0

Output of npx react-native info

System:
    OS: macOS 11.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 29.16 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 16.5.0 - ~/.nvm/versions/node/v16.5.0/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 7.19.1 - ~/.nvm/versions/node/v16.5.0/bin/npm
    Watchman: 2021.06.07.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK:
      API Levels: 29, 30, 31
      Build Tools: 29.0.2, 29.0.3, 31.0.0
      System Images: android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7486908
    Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: 0.64.0 => 0.64.0 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

Not really sure what could be the steps to reproduce. Maybe this issue starting happening a while ago but I just saw it now.

Snack, code example, screenshot, or link to a repository

Here is just an input centered inside a simple View. https://gfycat.com/ordinaryquestionabledinosaur

[pROFESOR11]

Same here, I can confirm that on ios it works fine, but on android we have the same problem.

[MohammedWaheeb]

Same here, I can confirm that on ios it works fine, but on android we have the same problem.

same here

[jake-ruth]

Having the same issue on Android

[Cristi6]

Hey all, asked the same thing on StackOverflow and the answer I accepted solved my issue. See if it fixes your problem too.

https://stackoverflow.com/questions/71227463/react-native-textinput-closes-automatically-when-opened-on-android

[maXXCZ1]

Hey all, asked the same thing on StackOverflow and the answer I accepted solved my issue. See if it fixes your problem too.

https://stackoverflow.com/questions/71227463/react-native-textinput-closes-automatically-when-opened-on-android

Sadly, for me it had no impact, i am still facing same issue.

[jake-ruth]

Hey all, asked the same thing on StackOverflow and the answer I accepted solved my issue. See if it fixes your problem too.

https://stackoverflow.com/questions/71227463/react-native-textinput-closes-automatically-when-opened-on-android

Appears to be working for me, thanks!

[hafizMDM]

Hey all, asked the same thing on StackOverflow and the answer I accepted solved my issue. See if it fixes your problem too.

https://stackoverflow.com/questions/71227463/react-native-textinput-closes-automatically-when-opened-on-android

It is working now. Thanks

[hafizMDM]

Hey all, asked the same thing on StackOverflow and the answer I accepted solved my issue. See if it fixes your problem too. https://stackoverflow.com/questions/71227463/react-native-textinput-closes-automatically-when-opened-on-android

Sadly, for me it had no impact, i am still facing same issue.

Try to clean your gradle cache. It was not working for me at first.

[maXXCZ1]

Hey all, asked the same thing on StackOverflow and the answer I accepted solved my issue. See if it fixes your problem too. https://stackoverflow.com/questions/71227463/react-native-textinput-closes-automatically-when-opened-on-android

Sadly, for me it had no impact, i am still facing same issue.

Try to clean your gradle cache. It was not working for me at first.

Thanks, yesterday after clean i managed to run it with 3.4.0 version, today i tried 3.10.2 and it seems to work as well.

[kostas2231]

sadly still facing issues with this one , nothing worked for me , what version of native-screens did you exactly used?

[santoshsavorbrands]

Unfortunately, none of the above solutions worked for me. Even I've tried multiple versions of react-native-screens, but no luck.

[kostas2231]

Unfortunately, none of the above solutions worked for me. Even I've tried multiple versions of react-native-screens, but no luck.

Finally, made it work the issue I had was that I upgraded to 3.10.2 and not ~3.10.2. Give it a go. Hope this helps.

[4RGUS]

Same for me too. None of the solutions worked

[johana55]

Desafortunadamente, ninguna de las soluciones anteriores funcionó para mí. Incluso probé varias versiones de react-native-screens, pero no tuve suerte.

Finalmente, hice que funcionara, el problema que tuve fue que actualicé a 3.10.2 y no ~ 3.10.2. Darle una oportunidad. Espero que esto ayude.

Me funciono, Gracias

[siddharth-kt]

same issue

Also, My cardStyleInterpolator is also not working, is this issue related to react-native-screens ?

[mvmmarcus]

Unfortunately, none of the above solutions worked for me. Even I've tried multiple versions of react-native-screens, but no luck.

Finally, made it work the issue I had was that I upgraded to 3.10.2 and not ~3.10.2. Give it a go. Hope this helps.

Saved my day S2

[dooamindshine]

Unfortunately, none of the above solutions worked for me. Even I've tried multiple versions of react-native-screens, but no luck.

Finally, made it work the issue I had was that I upgraded to 3.10.2 and not ~3.10.2. Give it a go. Hope this helps.

This worked for me

[jaweria-siddiqui-cygnis]

Please upgrade react-native-screens to latest version. "react-native-screens": "^3.13.1". This worked for me.

[saad9624-tribalScale]

Not working with 3.13.1 Edited: finally worked with this 3.10.2

[ZeeshanAhmadKhalil]

When changing the version to 3.10.2 i am getting this error

Error: Unable to resolve module ./fabric

[DevNomadAbhi]

Upgarde your stack and native dependencies in package.json to the latest, issue will be resolved.

[bilalyaqoob]

When changing the version to 3.10.2 i am getting this error

Error: Unable to resolve module ./fabric

https://stackoverflow.com/a/72298091/8989891

[akhileshsinha]

Unfortunately, none of the above solutions worked for me. Even I've tried multiple versions of react-native-screens, but no luck.

Finally, made it work the issue I had was that I upgraded to 3.10.2 and not ~3.10.2. Give it a go. Hope this helps.

Worked like a charm....Saved my day....

[KrisLau]

There's an open issue in react-native-screens: https://github.com/software-mansion/react-native-screens/issues/1447

[sadikyalcin]

https://github.com/software-mansion/react-native-screens/issues/1342#issuecomment-1200315314

[13thdeus]

Got the same issue but using react-native-navigation (not react-navigation), so there are no react-native-screens package. Issue was peproducing only on android 12 for input inside scroll view. FIxed by setting removeClippedSubviews={false} for android 12.

[Pureshores]

Got the same issue but using react-native-navigation (not react-navigation), so there are no react-native-screens package. Issue was peproducing only on android 12 for input inside scroll view. FIxed by setting removeClippedSubviews={false} for android 12.

Thanks, this is what fixed it for me

[Malik-Usman17]

After scratching my head for hours, I find this solution that worked for me.

1: Go to your AndroidManifest.xml file update the property from this (android:windowSoftInputMode="adjustResize") to this (android:windowSoftInputMode="stateAlwaysHidden|adjustPan").

2: Re-run the project and see the magic.

[olegderecha]

https://stackoverflow.com/a/72298091/551744

Change the line in AndroidManifest.xml

Old line android:windowSoftInputMode="adjustResize" New line android:windowSoftInputMode="stateAlwaysHidden|adjustPan"

[umarsabra]

I have a similar issue on Android. I have an input tag inside a select element to search the select options but when I click on the input box the dropdown automatically closes I added e.stopImmediatePropagation() on the click event to stop it from closing, and it worked on all platforms except Android.

[Yann-prak]

Got the same issue but using react-native-navigation (not react-navigation), so there are no react-native-screens package. Issue was peproducing only on android 12 for input inside scroll view. FIxed by setting removeClippedSubviews={false} for android 12.

This worked for me with react-navigation, thanks !

[pandyama]

Adding removeClippedSubviews={false} to TextInput component worked, but using react-native-screens did not do anything @13thdeus thank you!

[pandyama]

never mind even ^that didn't work... it was a one-off where it worked & then it went back to being as it was

[Malik-Usman17]

@pandyama you can try my solution which I mentioned above.

[pandyama]

@Malik-Usman17 I am building a react native project, there is no android xml. But the way I was able to fix it was by moving the textInput component out i.e I am using a loading state to manage when the API call is happening so i have something like {!loading && (<View>.... </View>)} and within this is where my textInput component was but now I moved it out and it works smoothly!

[KrisLau]

@pandyama AndroidManifest.xml exists in react native projects unless you're using expo.

[pandyama]

@KrisLau sorry ya its an Expo project & i didnt know this, thanks for clarifying!

[shubhraagarwal]

Hey all, asked the same thing on StackOverflow and the answer I accepted solved my issue. See if it fixes your problem too.

https://stackoverflow.com/questions/71227463/react-native-textinput-closes-automatically-when-opened-on-android

the solution provided here is giving me build errors

[SaldanhaPrtt]

Recently encountered this issue and none of the above solutions worked. Was using RN 0.65.3, which is somewhat outdated, upgraded it to 0.66.0 and the problem just went away. Go figure.

[Al-Ghozy03]

i just change from android:windowSoftInputMode="adjustResize"> to android:windowSoftInputMode="adjustPan"> and add react-native-keyboard-aware-scroll-view. if i change android:windowSoftInputMode="stateAlwaysHidden|adjustPan"> the screen can't be scrolled. so i wrap with react-native-keyboard-aware-scroll-view and it works

[Al-Ghozy03]

i just change from android:windowSoftInputMode="adjustResize"> to android:windowSoftInputMode="adjustPan"> and add react-native-keyboard-aware-scroll-view. if i change android:windowSoftInputMode="stateAlwaysHidden|adjustPan"> the screen can't be scrolled. so i wrap with react-native-keyboard-aware-scroll-view and it works

but the drawback is you have to wrap all of your code using react-native-keyboard-aware-scroll-view if you want your screen can be scrolled when keyboard is active

[germanmb23]

I updated react-native from 0.64.3 to 0.66.5 and it worked like a charm. Maybe it also works with some version of 0.65.x . I'm also using react react-native-screens.

[KrisLau]

@germanmb23 Those versions are really old and you'll likely need to migrate to the 0.70+ versions (current is 0.74 as of writing) to avoid a lot of compatibility issues with other libraries eventually if you're not already encountering them.

[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.

Any help would be greatly appreciated!

[brianlenz]

In case this is of use to anyone else:

We were having the issue with the keyboard disappearing on Android with react-navigation v6 and react-native-screens 3.34.0. We have a KeyboardAvoidingView with a nested <ScrollView keyboardShouldPersistTaps="handled" keyboardDismissMode="on-drag" which contains the TextInput. We use the React Native default android:windowSoftInputMode="adjustResize" in AndroidManifest.xml. The solution for us was to simply omit the behavior attribute in Android from the KeyboardAvoidingView: behavior={Platform.OS === 'android' ? undefined : 'padding'}. With this, the scenarios where we were consistently reproducing the issue no longer had a problem.

it's unclear from the React Native docs what the default behavior is. Ironically, they recommend you set behavior 🤷‍♂️

I'll also mention that, for us, the issue was never reproducible 100% of the time on all devices. In fact, the vast majority of users did not have the issue. The issue appeared to only occur when the keyboard was "just the right size" to trigger the problem. As an example, in our testing, it wouldn't happen on standard Samsung Galaxy and Google Pixel setups. If you adjusted the keyboard size and/or the font size, then the issue may present itself.