React-native-screens: Focusing on a text input when navigating to a new screen only works when adding to the stack, not when going back.

[divonelnc]

Current Behavior

Calling .focus() on a text input (or using autoFocus) when the screen becomes focused works when you add a screen to the stack (Screen A -> Screen B) but not when going back (Screen B -> Screen A).
Instead, the input is focused for a second then blurs immediately.

Expected Behavior

The input should stay focused

How to reproduce

• Navigate back to a screen that has a text input with autoFocus on true
• OR call .focus() on the reference of the text input when the screen is focused
• OR copy-paste the following code:

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import * as React from "react";
import { TextInput, View, Button, Text } from "react-native";

function ScreenA({ navigation }) {
    const textInputRef = React.useRef();

    const focusOnInput = e => {
        textInputRef.current.focus();
    };

    navigation.addListener("focus", focusOnInput);
    return (
        <View>
            <Text>SCREEN A</Text>
            <TextInput ref={textInputRef} />
            <Button title="Go to screen B" onPress={() => navigation.navigate("ScreenB")} />
        </View>
    );
}

function ScreenB({ navigation }) {
    const textInputRef = React.useRef();

    const focusOnInput = e => {
        textInputRef.current.focus();
    };

    navigation.addListener("focus", focusOnInput);

    return (
        <View>
            <Text>SCREEN B</Text>
            <TextInput ref={textInputRef} />
            <Button title="Go to screen A" onPress={() => navigation.navigate("ScreenA")} />
        </View>
    );
}

const Stack = createStackNavigator();

function TestComp() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen component={ScreenA} name="ScreenA" />
                <Stack.Screen component={ScreenB} name="ScreenB" />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

export default TestComp;

Your Environment

    "@expo/vector-icons": "^10.0.0",
    "@react-native-community/masked-view": "0.1.6",
    "@react-navigation/bottom-tabs": "^5.2.5",
    "@react-navigation/material-bottom-tabs": "^5.1.7",
    "@react-navigation/native": "^5.1.4",
    "@react-navigation/stack": "^5.2.9",
    "@react-navigation/web": "^1.0.0-alpha.9",
    "@reduxjs/toolkit": "^1.2.5",
    "expo": "^37.0.0",
    "expo-asset": "~8.1.3",
    "expo-constants": "~9.0.0",
    "expo-font": "~8.1.0",
    "expo-web-browser": "~8.1.0",
    "moment": "^2.24.0",
    "react": "16.9.0",
    "react-dom": "16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-paper": "^3.6.0",
    "react-native-remote-svg": "^2.0.6",
    "react-native-safe-area-context": "0.7.3",
    "react-native-screens": "~2.2.0",
    "react-native-svg": "11.0.1",
    "react-native-web": "^0.11.7",
    "react-native-webview": "8.1.1",
    "react-redux": "^7.1.3",
    "redux": "^4.0.5",
    "tinycolor2": "^1.4.1"

[Luan-Sens]

+1

[WoLewicki]

I cannot repro this issue in the v. 2.4.0. I can see that you are using expo, can you try to repro it on bare RN project?

[WoLewicki]

I am closing it due to no response in more than 30 days. Feel free to comment to reopen it.

[KristineTrona]

@WoLewicki can we re-open the issue? I have the same problem. Navigating back in the stack does not autoFocus the textinput if the autoFocus prop is true. It also does not work if you try to call focus() method directly on the textInput ref. I have found that adding a timeout before focusing the text input does work, but this is a workaround. If you need more info to reproduce the problem let me know.

// WORKAROUND:
  useEffect(() => {
    if (textInput.current) {
      setTimeout(() => textInput.current.focus(), 200);
    }
  }, []);

Currently on:

react-native: 0.62.2
react-native-screens: 2.7.0
@react-navigation/native: 5.6.1,
@react-navigation/stack: 5.6.2

[WoLewicki]

@KristineTrona can you repro it on the newest version of react-native-screens? And if so, can you provide a repo with minimal configuration needed to repro it?

[KristineTrona]

@WoLewicki Here is the reproduction repo https://github.com/KristineTrona/rn-autofocus-issue/tree/master - see the readme, I found what is causing the issue, but it still seems a buggy behaviour to me.

[WoLewicki]

You don't call enableScreens() anywhere in the project so they aren't used there. I think it is rather a bug in react-navigation and should be reported there. Sadly, with the react-native-screens enabled, the issue persists. Am I right?

[divonelnc]

I just submitted this bug to react-navigation: https://github.com/react-navigation/react-navigation/issues/8564
My bad, I should have started with that.

[WoLewicki]

Closing this since it looks like it is unrelated to this library.