title: React Navigation Prevents text input from focusing at first try
body: <p>Hello Everyone i have the exact same problem with this one. but the question has no answer yet </p>
  
  <p>im stuck with this all day there is no answer to found i am using the latest react native and latest react navigation package</p>
  
  <p><a href="https://stackoverflow.com/questions/61056722/react-navigation-focus-on-input-blurs-immediately-when-going-back-to-previous-sc">React navigation focus on input blurs immediately</a></p>
  
  <p>so this is my form page where at the first load blurs text input when  i click the text box</p>
  
  <pre><code>import React, { Component } from 'react'
  import { View, Dimensions } from 'react-native'
  
   import { 
  Container, 
  Content, 
  Button, 
  Text,
  Form,
  Item,
  Input,
  Label,
  Textarea
  } from 'native-base';
  
  import Ion from 'react-native-vector-icons/Ionicons'
  
  class Compose extends Component{
  render(){
      return(
          &lt;Container&gt;
              &lt;Content&gt;
                  &lt;Form style={{ padding: 10 }}&gt;
                      &lt;Item inlineLabel style={{ marginBottom: 15 }}&gt;
                          &lt;Ion name="ios-person" size={25} style={{ marginRight: 12 }}/&gt;
                          &lt;Label&gt;Product Name*&lt;/Label&gt;
                          &lt;Input 
  
                          /&gt;
                      &lt;/Item&gt;
                      &lt;Item inlineLabel style={{ marginBottom: 15 }}&gt;
                          &lt;Ion name="md-pricetags" size={25} style={{ marginRight: 12 }}/&gt;
                          &lt;Label&gt;Price*&lt;/Label&gt;
                          &lt;Input 
  
                          /&gt;
                      &lt;/Item&gt;
                      &lt;Item inlineLabel style={{ marginBottom: 15 }}&gt;
                          &lt;Ion name="md-arrow-down" size={25} style={{ marginRight: 12 }}/&gt;
                          &lt;Label&gt;Drop rate*&lt;/Label&gt;
                          &lt;Input 
  
                          /&gt;
                      &lt;/Item&gt;
                      &lt;Item inlineLabel style={{ marginBottom: 15 }}&gt;
                          &lt;Ion name="md-phone-portrait" size={25} style={{ marginRight: 12 }}/&gt;
                          &lt;Label&gt;Contact number*&lt;/Label&gt;
                          &lt;Input 
  
                          /&gt;
                      &lt;/Item&gt;
                      &lt;Textarea 
                          rowSpan={5} bordered
                          placeholder="Description"
                          style={{ marginBottom: 15 }}
                      /&gt;
                      &lt;Button block success style={{ height: 60, marginBottom: 14 }}&gt;
                          &lt;Ion name="md-images" size={25} style={{ color: 'white' }}/&gt;
                          &lt;Text style={{ fontSize: 20 }}&gt;Upload Photos&lt;/Text&gt;
                      &lt;/Button&gt;
                      &lt;Button block danger&gt;
                          &lt;Ion name="ios-cellular" size={25} style={{ color: 'white' }}/&gt;
                          &lt;Text&gt;Broadcast&lt;/Text&gt;
                      &lt;/Button&gt;
                  &lt;/Form&gt;
              &lt;/Content&gt;
          &lt;/Container&gt;
      )
  }
  }
  
  export default Compose
  </code></pre>
  
  <p>and here is my navigation component</p>
  
  <pre><code>            import React, { Component } from 'react';
          import { Text } from 'react-native'
  
          //Navigation
          import 'react-native-gesture-handler';
          import { NavigationContainer } from '@react-navigation/native';
          import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';
  
          //Screens
          import { Welcome, Compose } from './src/index'
  
          import { 
              Header, 
              Left, 
              Button, 
              Icon, 
              Body, 
              Title, 
              Right
          } 
          from 'native-base'
  
          const Stack = createStackNavigator();
  
          const AppbarList = {
              welcome: function(navigation){
                  return null
              },
              compose: function(navigation){
                  return (
                      &lt;Header&gt;
                          &lt;Left&gt;
                              &lt;Button transparent rounded&gt;
                                  &lt;Icon name='arrow-back' onPress={()=&gt;{ navigation.goBack() }}/&gt;
                              &lt;/Button&gt;
                          &lt;/Left&gt;
                          &lt;Body&gt;
                              &lt;Title&gt;&lt;/Title&gt;
                          &lt;/Body&gt;
                          &lt;Right /&gt;
                      &lt;/Header&gt;
                  )
              }
          }
  
          const Appbar = ( scene, navigation )=&gt; {
              const { options } = scene.descriptor;
              const title = scene.route.name;
  
              return AppbarList[title.toLowerCase()](navigation)
          }
  
          class App extends Component{
              render(){
                  return(
                      &lt;NavigationContainer&gt;
                          &lt;Stack.Navigator
                              headerMode="screen"
                              screenOptions={{
                                  header: ({ navigation, scene, previous }) =&gt; Appbar( scene, navigation )
                              }}
                          &gt;
  
                              &lt;Stack.Screen
                                  name="Welcome" component={Welcome} 
                                  options={{
                                      ...TransitionPresets.FadeFromBottomAndroid,
  
                                  }}
                              /&gt;
                              &lt;Stack.Screen 
                                  name="Compose" component={Compose}
                                  options={{
                                      ...TransitionPresets.FadeFromBottomAndroid,
  
                                  }}
                              /&gt;
  
                          &lt;/Stack.Navigator&gt;
                      &lt;/NavigationContainer&gt;
                  )
              }
          }
  
          export default App;
  </code></pre>