title: React-navigation focus on input blurs immediately when going back to previous screen
body: <p>I want to focus on a textinput when I navigate to a new screen. This works when I add a screen to the stack, but not when I go back in the stack.</p>
  
  <p>Instead, the input focuses for a second and blurs immediately.</p>
  
  <p>Here is what I get:</p>
  
  <ul>
  <li>Screen A is first in the stack and input blurs immediately</li>
  <li>Screen B is added to the stack and works as intended</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/LPHRp.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LPHRp.gif" alt="enter image description here"></a></p>
  
  <p>Any idea what is causing this?</p>
  
  <p>FYI, I have the same issue if I use autoFocus.</p>
  
  <p>Here is the whole (pretty straight forward) code:</p>
  
  <pre><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 =&gt; {
          textInputRef.current.focus();
      };
  
      navigation.addListener("focus", focusOnInput);
      return (
          &lt;View&gt;
              &lt;Text&gt;SCREEN A&lt;/Text&gt;
              &lt;TextInput ref={textInputRef} /&gt;
              &lt;Button title="Go to screen B" onPress={() =&gt; navigation.navigate("ScreenB")} /&gt;
          &lt;/View&gt;
      );
  }
  
  function ScreenB({ navigation }) {
      const textInputRef = React.useRef();
  
      const focusOnInput = e =&gt; {
          textInputRef.current.focus();
      };
  
      navigation.addListener("focus", focusOnInput);
  
      return (
          &lt;View&gt;
              &lt;Text&gt;SCREEN B&lt;/Text&gt;
              &lt;TextInput ref={textInputRef} /&gt;
              &lt;Button title="Go to screen A" onPress={() =&gt; navigation.navigate("ScreenA")} /&gt;
          &lt;/View&gt;
      );
  }
  
  const Stack = createStackNavigator();
  
  function TestComp() {
      return (
          &lt;NavigationContainer&gt;
              &lt;Stack.Navigator&gt;
                  &lt;Stack.Screen component={ScreenA} name="ScreenA" /&gt;
                  &lt;Stack.Screen component={ScreenB} name="ScreenB" /&gt;
              &lt;/Stack.Navigator&gt;
          &lt;/NavigationContainer&gt;
      );
  }
  
  export default TestComp;
  </code></pre>