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

iliaskap12 commented 2 years ago

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 react-native-screens@3.12 to react-native-screens@3.11

Screenshots

react-native-screens-keyboard-issue

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.

lukerens2 commented 2 years ago

have you found a solution for this?

iliaskap12 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

MuhammadMattiullah commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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! :wave: react-native-screens@3.12 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 react-native-screens@3.10.x.

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

plouh commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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/core@6.2.2
@react-navigation/drawer@6.4.3
@react-navigation/elements@1.3.4
@react-navigation/native@6.0.11
@react-navigation/stack@6.2.2
react-native-screens@3.15.0
react@17.0.2
react-native@0.65.2

To circumvent this issue I had to downgrade to react-native-screens@3.11.1

sadikyalcin commented 2 years ago

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 commented 2 years ago

다운 그레이드는 저에게 효과적이었습니다. "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 commented 1 year ago

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/native-stack@6.6.2 ├── @react-navigation/native@6.0.10 ├── react-native-screens@3.18.2 ├── react-native@0.68.2

eugustavo commented 1 year ago

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/native-stack@6.6.2 ├── @react-navigation/native@6.0.10 ├── react-native-screens@3.18.2 ├── react-native@0.68.2

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

MatkoMilic commented 1 year ago

I have these issues currently.

DonUggioni commented 1 year ago

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

gsavvidis96 commented 1 year ago

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

Kinshikinai commented 1 year ago

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 commented 1 year ago

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 commented 11 months ago

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

tboba commented 11 months ago

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! ❤️

software-mansion / react-native-screens