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

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

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.

[iliaskap12]

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.

[ravikumar-yadav]

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