Keyboard closes immediately once opened in TextInput inside a navigation stack screen (expo-android) #1342

iliaskap12 · 2022-02-24T10:37:30Z

Description

When the input of a TextInput component is pressed, the keyboard pops up and immediately closes again. This happens inside a stack navigation screen. However, the issue doesn't seem to be of react-navigation (solutions in issue #8414 don't solve the problem). What solved the issue was downgrading from [email protected] to [email protected]

Screenshots

Steps To Reproduce


1. expo init screens --template blank
2. npm install @react-navigation/native @react-navigation/stack react-native-elements react-native-gesture-handler react-native-safe-area-context react-native-screens
3. expo run:android

Expected behavior

When the TextInput component is pressed (focused), the keyboard opens and remains open.

Actual behavior

When the TextInput component is pressed (focused), the keyboard opens and immediately closes again.

Reproduction

Minimal code example

import React, { useState } from 'react'
import {
  KeyboardAvoidingView,
  Text,
  TextInput,
  Button,
  StyleSheet,
  Platform
} from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'
import { enableScreens } from 'react-native-screens'

enableScreens()
const Stack = createStackNavigator()

export default function App () {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            gestureEnabled: true,
            animationEnabled: false
          }}
        >
          <Stack.Screen
            name='Login View'
            component={LoginView}
            options={{ title: 'Read it Later - Maybe' }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  )
}

export function LoginView () {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const onPressSignIn = async () => {
    console.log('Trying sign in with user: ' + email)
  }

  const onPressSignUp = async () => {
    console.log('Trying signup with user: ' + email)
  }

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <Text>Sign Up or Sign In:</Text>
      <SafeAreaView style={styles.inputContainer}>
        <TextInput
          placeholder='email'
          autoCapitalize='none'
          onChangeText={mail => {
            setEmail(mail)
          }}
          value={email}
          style={styles.inputStyle}
          keyboardType='email-address'
        />
      </SafeAreaView>
      <SafeAreaView style={styles.inputContainer}>
        <TextInput
          placeholder='password'
          secureTextEntry
          onChangeText={pass => {
            setPassword(pass)
          }}
          value={password}
          style={styles.inputStyle}
        />
      </SafeAreaView>
      <Button onPress={onPressSignIn} title='Sign In' />
      <Button onPress={onPressSignUp} title='Sign Up' />
    </KeyboardAvoidingView>
  )
}

const styles = StyleSheet.create({
  inputContainer: {
    padding: 5
  },
  inputStyle: {
    borderColor: 'black',
    borderWidth: 1,
    padding: 10,
    borderRadius: 2
  },
  manageTeamWrapper: {
    width: 350
  },
  manageTeamTitle: {
    marginBottom: 10
  },
  addTeamMemberInput: {
    borderBottomColor: 'black',
    borderBottomWidth: 1,
    marginTop: 5,
    fontSize: 18
  },
  manageTeamButtonContainer: {
    textAlign: 'left',
    borderTopColor: 'grey',
    borderTopWidth: 1,
    borderBottomColor: 'grey',
    borderBottomWidth: 1
  },
  plusButton: {
    fontSize: 28,
    fontWeight: '400'
  }
})

Platform

iOS
- [ x ] Android
Web
Windows
tvOS

Workflow

- [ x ] Managed workflow

Bare workflow

Package versions

package	version
react	17.0.1
react-dom	17.0.1
react-native	0.64.3
react-native-web	17.0.1
@react-navigation/native	^6.0.8
@react-navigation/stack	^6.1.1
react-native-screens	^3.12
react-native-safe-area-context	^3.4.1
react-native-gesture-handler	^2.2.0
react-native-elements	^3.4.2
expo	~44.0.0
expo-splash-screen	~0.14.1
expo-status-bar	~1.2.0
@babel/core	^7.12.9

@babel/core is a development dependency.

The text was updated successfully, but these errors were encountered:

lukerens2 · 2022-02-24T19:29:30Z

have you found a solution for this?

iliaskap12 · 2022-02-24T19:52:19Z

have you found a solution for this?

Downgrading to 3.11 solved the issue. I don't know what the root cause is but it is definitely something in the latest release.

BalogunofAfrica · 2022-02-26T06:43:23Z

I also had the same issue, and downgrading helped. I think it's because of the new architecture that's included in the latest release.

ravikumar-yadav · 2022-02-28T05:08:23Z

Downgrading worked for me.
I have kept "react-native-screens": "3.4.0" and the keyboard issue worked

MuhammadMattiullah · 2022-02-28T06:30:06Z

This issue is due to the latest version of react native screens and i was facing the same issue on Android and i tried to solve this issue using screen options but nothing worked so the only thing that can fix this issue is downgrading the react native screens version.
Before this issues: "react-native-screens": "^3.11",
and i simply replaced IT with below version and it worked 🎉
"react-native-screens": "3.4.0",

lukerens2 · 2022-02-28T16:12:21Z

Downgrading didn't help me. This randomly started happening to me on an older version of react-navigation/stack (5.14.5)

Ended up switching to navigation package to react-navigation/native-stack (6.5.0) and that did the trick.

Packages before (broken):
"@react-navigation/drawer": "^5.12.5",
"@react-navigation/material-top-tabs": "^5.3.15",
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.5",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^3.2.0"

Packages after (fixed):
"@react-navigation/drawer": "^6.3.1",
"@react-navigation/material-top-tabs": "^6.1.1",
"@react-navigation/native": "^6.0.8",
"@react-navigation/native-stack": "^6.5.0",
"@react-navigation/stack": "^6.1.1",
"react-native-safe-area-context": "^3.4.1",
"react-native-screens": "^3.12.0"

This was pretty non-intrusive as I test on a physical device anyways and did not require an upgrade on react or react-native packages

kacperkapusciak · 2022-03-02T10:35:46Z

TL;DR
One of the limitations of the expo managed workflow is you have to use a specific version of a native library supported by the Expo SDK. Use expo install react-native-screens command to install dependencies within expo managed workflow.

Hello everyone! 👋
[email protected] won't correctly work within Expo managed workflow. Let me explain 🧑‍🏫

Managed workflow comes with an Expo Go app that has to be compiled, build, and released to Google Play & App Store. In order for this to work, Expo SDK comes with a bunch of precompiled react-native libraries.

Libraries that are JavaScript-only (eg. react-navigation) can be swapped on the fly but the native ones (eg. react-native-screens, react-native-safe-area-context, react-native-gesture-handler) have to have a specific version bundled inside the SDK. Expo SDK 44 comes with [email protected].

Making sure that your app uses correct versions of the dependencies is a lot of work and because of that Expo comes with a handy expo install command in place of yarn/npm which automatically manages correct versions. See this part of react-navigation's docs about installing dependencies into an expo managed project.

To learn more check workflow comparison and the limitations sections of the Expo's documentation.

Cheers 🙌

shamilovtim · 2022-04-12T21:58:15Z

Hi @kacperkapusciak I just wanted to confirm we are not on managed expo (we use bare expo) and we experience this on screens 3.13.3. We had to downgrade to screens 3.11.0 in order to workaround this bug. Should this ticket be reopened?

pedpess · 2022-04-13T19:21:02Z

I can confirm that this issue is happening in non-Expo builds as well. What solved for me was to downgrade to v3.10.2 and in package.json make sure you are not using ^3.10.2 cos it will install the latest v3.13.1 instead.

shamilovtim · 2022-04-19T18:49:42Z

Hey @kacperkapusciak any chance you could reopen this? I just want to make sure it's still a known issue outside of expo managed and on versions > 3.11.0

matthieunelmes · 2022-04-26T14:02:29Z

Another confirmation of non-expo build experiencing this issue still. As per above, downgrading to 3.11.0 fixed the issue

plouh · 2022-04-29T06:21:03Z

React native 0.68 changed android:windowSoftInputMode="adjustPan" to android:windowSoftInputMode="adjustResize".

This will result in keyboard disappearing in cases where text field would be left under the keyboard so be sure to check that it is set to adjustPan if you encounter flickering.

mtoninelli · 2022-05-10T11:16:53Z

Another confirmation of non-expo build experiencing this issue still. As per above, downgrading to 3.11.0 fixed the issue

@matthieunelmes What RN version are you running? 3.11.0 doesn't work to me with RN 0.64

ravikumar-yadav · 2022-05-10T12:45:39Z

Another confirmation of non-expo build experiencing this issue still. As per above, downgrading to 3.11.0 fixed the issue

@matthieunelmes What RN version are you running? 3.11.0 doesn't work to me with RN 0.64

working for me
"react-native-screens": "3.4.0", on "react-native": "0.64.1",

mtoninelli · 2022-05-10T13:03:02Z

With version 3.4.0 result in this error:

None of these files exist:
  * node_modules/react-native-screens/src/TransitionProgressContext(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * node_modules/react-native-screens/src/TransitionProgressContext/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)

matthieunelmes · 2022-05-10T13:14:20Z

Another confirmation of non-expo build experiencing this issue still. As per above, downgrading to 3.11.0 fixed the issue

@matthieunelmes What RN version are you running? 3.11.0 doesn't work to me with RN 0.64

@mtoninelli RN 0.65.1 and react-native-screens 3.11.0

mtoninelli · 2022-05-16T08:17:06Z

you need to update your navigation stack and native dependencies to the latest, it will solve the issue.

Yes, I confirm that the issue has been solved updating react navigation.

    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/elements": "^1.3.3",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
    "react-native-screens": "^3.13.1",
    "react": "17.0.2",
    "react-native": "0.65.1",

unstableair · 2022-07-18T14:12:48Z

you need to update your navigation stack and native dependencies to the latest, it will solve the issue.

Updating to the latest navigation stack (v6) & dependencies did not solve this issue for me.

@react-navigation/[email protected]
@react-navigation/[email protected]
@react-navigation/[email protected]
@react-navigation/[email protected]
@react-navigation/[email protected]
[email protected]
[email protected]
[email protected]

To circumvent this issue I had to downgrade to [email protected]

sadikyalcin · 2022-07-30T23:58:38Z

This happens on a detail screen for me on a stack navigation. Doesn't happen on the same class on the main screen. Downgrading isn't ideal. You're compromising a lot of other bug fixes for one issue and in the end, it might not even work - downgrading screens and upgrading navigation certainly didn't work for me.

Solution is to update AndroidManifest. I'm assuming majority has adjustResize. Update it to android:windowSoftInputMode="stateAlwaysHidden|adjustPan" or try to other options that fits your needs.

"adjustResize": The activity's main window is always resized to make room for the soft keyboard on screen.
"stateAlwaysHidden": The soft keyboard is always hidden when the activity's main window has input focus.
"adjustPan": The activity's main window is not resized to make room for the soft keyboard. Rather, the contents of the window are automatically panned so that the current focus is never obscured by the keyboard and users can always see what they are typing. This is generally less desirable than resizing, because the user may need to close the soft keyboard to get at and interact with obscured parts of the window.

Docs: https://developer.android.com/guide/topics/manifest/activity-element#wsoft

Louis-jk · 2022-08-24T01:47:25Z

다운 그레이드는 저에게 효과적이었습니다. "react-native-screens": "3.4.0"을 유지했고 키보드 문제가 작동했습니다.

I also had a problem with the keyboard suddenly closing on my Android phone one day, so I reinstalled the react-native-screens version to '3.4.0' and it was solved.

Currently part of my package.json

"react": "17.0.1",
"react-native": "0.64.2",
"react-native-reanimated": "2.2.0", 
"react-native-screens": "^3.4.0", // before ^3.3.0

darboleda-paycargo · 2023-01-10T17:23:23Z

anyone having this issue on iOS?
currently working fine for me on android, but on iOS keyboard closes as soon as focus is set

@react-navigation/[email protected]
├── @react-navigation/[email protected]
├── [email protected]
├── [email protected]

eugustavo · 2023-01-13T19:53:41Z

alguém tendo esse problema no iOS? atualmente funcionando bem para mim no android, mas no iOS o teclado fecha assim que o foco é definido

@react-navigation/[email protected] ├── @react-navigation/[email protected] ├── [email protected] ├── [email protected]

Usei a versão "react-native-screens": "3.4.0" e deu super certo aqui

MatkoMilic · 2023-01-23T10:30:10Z

I have these issues currently.

DonUggioni · 2023-02-07T15:47:24Z

Having this issue on android currently. Using expo and all dependencies are up to date.

gsavvidis96 · 2023-02-18T11:11:42Z

Same here. Using a pure react native project, not expo. Keyboard closes on first focus. Its exactly this issue

Kinshikinai · 2023-03-10T09:39:55Z

I had the same issue. My problem was that I prewrote functions like Login, Reg and so on and called them in main App function. When I removed bodies of functions to main App function directly, prolblem solved. Try it and update me.

nicholas-masini · 2023-08-03T19:19:53Z

Facing the same issue on expo. Tried downgrading react-native-screens to @3.11 and also @3.4 however this did not solve the problem.

Pingou · 2023-11-08T09:47:35Z

@kacperkapusciak Can we reopen? Seems like lots of people still have the issue on iOS.

tboba · 2023-11-08T10:02:17Z

Hi @Pingou, I believe there's already an open issue that also mentions the bug reported here - #1447. We're aware of this problem and it still waits for investigation, but unfortunately it's not that easy to investigate the place where this error occurs. If you believe that you might have an idea how you can fix this, we're always open for the PRs with bug fixes ❤️

As this PR causes the discussion to be separated between both this issue and #1447 I'll lock the discussion here, so please discuss this issue further there.

Thank you for your patience! ❤️

iliaskap12 added the needs-review label Feb 24, 2022

github-actions bot added Platform: Android This issue is specific to Android Repro provided A reproduction with a snack or repo is provided labels Feb 24, 2022

cristianoccazinsp mentioned this issue Feb 28, 2022

fix: remove react-native-gradle-plugin from dependencies #1346

Merged

2 tasks

daileytj mentioned this issue Mar 1, 2022

Keyboard opens and closes when clicking in input fields on android etn-ccis/blui-react-native-workflows#130

Closed

kacperkapusciak added Expo Issue connected to integration with Expo and removed needs-review labels Mar 2, 2022

kacperkapusciak closed this as completed Mar 2, 2022

shamilovtim mentioned this issue May 7, 2022

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

Open

5 tasks

sadikyalcin mentioned this issue Jul 30, 2022

TextInput closes automatically when opened on android facebook/react-native#33164

Open

jeffvg mentioned this issue Sep 6, 2022

Keyboard settings for Android need updated to not pan the screen when keyboard is open etn-ccis/blui-react-native-workflows#183

Closed

architsangal mentioned this issue Nov 8, 2022

Virtual Keyboard closes instantly flutter/flutter#114885

Closed

qsdamar mentioned this issue Dec 20, 2022

[Android] Keyboard closes right after being open GetStream/stream-chat-react-native#1873

Closed

software-mansion locked as too heated and limited conversation to collaborators Nov 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Keyboard closes immediately once opened in TextInput inside a navigation stack screen (expo-android) #1342

Keyboard closes immediately once opened in TextInput inside a navigation stack screen (expo-android) #1342

iliaskap12 commented Feb 24, 2022

lukerens2 commented Feb 24, 2022

iliaskap12 commented Feb 24, 2022

BalogunofAfrica commented Feb 26, 2022

ravikumar-yadav commented Feb 28, 2022

MuhammadMattiullah commented Feb 28, 2022

lukerens2 commented Feb 28, 2022 •

edited

Loading

kacperkapusciak commented Mar 2, 2022

shamilovtim commented Apr 12, 2022 •

edited

Loading

pedpess commented Apr 13, 2022 •

edited

Loading

shamilovtim commented Apr 19, 2022

matthieunelmes commented Apr 26, 2022

plouh commented Apr 29, 2022

mtoninelli commented May 10, 2022

ravikumar-yadav commented May 10, 2022

mtoninelli commented May 10, 2022

matthieunelmes commented May 10, 2022

mtoninelli commented May 16, 2022

unstableair commented Jul 18, 2022

sadikyalcin commented Jul 30, 2022 •

edited

Loading

Louis-jk commented Aug 24, 2022

darboleda-paycargo commented Jan 10, 2023

eugustavo commented Jan 13, 2023

MatkoMilic commented Jan 23, 2023

DonUggioni commented Feb 7, 2023

gsavvidis96 commented Feb 18, 2023

Kinshikinai commented Mar 10, 2023

nicholas-masini commented Aug 3, 2023 •

edited

Loading

Pingou commented Nov 8, 2023

tboba commented Nov 8, 2023

Keyboard closes immediately once opened in TextInput inside a navigation stack screen (expo-android) #1342

Keyboard closes immediately once opened in TextInput inside a navigation stack screen (expo-android) #1342

Comments

iliaskap12 commented Feb 24, 2022

Description

Screenshots

Steps To Reproduce

Expected behavior

Actual behavior

Reproduction

Platform

Workflow

Package versions

lukerens2 commented Feb 24, 2022

iliaskap12 commented Feb 24, 2022

BalogunofAfrica commented Feb 26, 2022

ravikumar-yadav commented Feb 28, 2022

MuhammadMattiullah commented Feb 28, 2022

lukerens2 commented Feb 28, 2022 • edited Loading

kacperkapusciak commented Mar 2, 2022

shamilovtim commented Apr 12, 2022 • edited Loading

pedpess commented Apr 13, 2022 • edited Loading

shamilovtim commented Apr 19, 2022

matthieunelmes commented Apr 26, 2022

plouh commented Apr 29, 2022

mtoninelli commented May 10, 2022

ravikumar-yadav commented May 10, 2022

mtoninelli commented May 10, 2022

matthieunelmes commented May 10, 2022

mtoninelli commented May 16, 2022

unstableair commented Jul 18, 2022

sadikyalcin commented Jul 30, 2022 • edited Loading

Louis-jk commented Aug 24, 2022

darboleda-paycargo commented Jan 10, 2023

eugustavo commented Jan 13, 2023

MatkoMilic commented Jan 23, 2023

DonUggioni commented Feb 7, 2023

gsavvidis96 commented Feb 18, 2023

Kinshikinai commented Mar 10, 2023

nicholas-masini commented Aug 3, 2023 • edited Loading

Pingou commented Nov 8, 2023

tboba commented Nov 8, 2023

lukerens2 commented Feb 28, 2022 •

edited

Loading

shamilovtim commented Apr 12, 2022 •

edited

Loading

pedpess commented Apr 13, 2022 •

edited

Loading

sadikyalcin commented Jul 30, 2022 •

edited

Loading

nicholas-masini commented Aug 3, 2023 •

edited

Loading