React Navigation Prevents text input from focusing at first try

Question

Hello Everyone i have the exact same problem with this one. but the question has no answer yet

im stuck with this all day there is no answer to found i am using the latest react native and latest react navigation package

React navigation focus on input blurs immediately

so this is my form page where at the first load blurs text input when i click the text box

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(
        <Container>
            <Content>
                <Form style={{ padding: 10 }}>
                    <Item inlineLabel style={{ marginBottom: 15 }}>
                        <Ion name="ios-person" size={25} style={{ marginRight: 12 }}/>
                        <Label>Product Name*</Label>
                        <Input 

                        />
                    </Item>
                    <Item inlineLabel style={{ marginBottom: 15 }}>
                        <Ion name="md-pricetags" size={25} style={{ marginRight: 12 }}/>
                        <Label>Price*</Label>
                        <Input 

                        />
                    </Item>
                    <Item inlineLabel style={{ marginBottom: 15 }}>
                        <Ion name="md-arrow-down" size={25} style={{ marginRight: 12 }}/>
                        <Label>Drop rate*</Label>
                        <Input 

                        />
                    </Item>
                    <Item inlineLabel style={{ marginBottom: 15 }}>
                        <Ion name="md-phone-portrait" size={25} style={{ marginRight: 12 }}/>
                        <Label>Contact number*</Label>
                        <Input 

                        />
                    </Item>
                    <Textarea 
                        rowSpan={5} bordered
                        placeholder="Description"
                        style={{ marginBottom: 15 }}
                    />
                    <Button block success style={{ height: 60, marginBottom: 14 }}>
                        <Ion name="md-images" size={25} style={{ color: 'white' }}/>
                        <Text style={{ fontSize: 20 }}>Upload Photos</Text>
                    </Button>
                    <Button block danger>
                        <Ion name="ios-cellular" size={25} style={{ color: 'white' }}/>
                        <Text>Broadcast</Text>
                    </Button>
                </Form>
            </Content>
        </Container>
    )
}
}

export default Compose

and here is my navigation component

            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 (
                    <Header>
                        <Left>
                            <Button transparent rounded>
                                <Icon name='arrow-back' onPress={()=>{ navigation.goBack() }}/>
                            </Button>
                        </Left>
                        <Body>
                            <Title></Title>
                        </Body>
                        <Right />
                    </Header>
                )
            }
        }

        const Appbar = ( scene, navigation )=> {
            const { options } = scene.descriptor;
            const title = scene.route.name;

            return AppbarList[title.toLowerCase()](navigation)
        }

        class App extends Component{
            render(){
                return(
                    <NavigationContainer>
                        <Stack.Navigator
                            headerMode="screen"
                            screenOptions={{
                                header: ({ navigation, scene, previous }) => Appbar( scene, navigation )
                            }}
                        >

                            <Stack.Screen
                                name="Welcome" component={Welcome} 
                                options={{
                                    ...TransitionPresets.FadeFromBottomAndroid,

                                }}
                            />
                            <Stack.Screen 
                                name="Compose" component={Compose}
                                options={{
                                    ...TransitionPresets.FadeFromBottomAndroid,

                                }}
                            />

                        </Stack.Navigator>
                    </NavigationContainer>
                )
            }
        }

        export default App;

Add code and show us what you did. don't rely on links to explain your question. What happens if that user deletes his/her question? Yours will have no context. — Joe Lloyd, Jun 16 '20 at 10:07
apart from that, creating a duplicate question on purpose might not be a good idea either. — Oliver Gebert, Jun 16 '20 at 10:13

score 0 · Answer 1 · answered Feb 13 '21 at 14:15

I faced the same problem. Try to disable gestures for Android.

export default () => {
  const isAndroidPlatform = isAndroid();
  return {
    mode: 'modal',
    headerMode: 'none',
    defaultNavigationOptions: {
      gestureEnabled: !isAndroidPlatform,
      cardOverlayEnabled: true,
      ...(
        isAndroidPlatform
          ? TransitionPresets.FadeFromBottomAndroid
          : TransitionPresets.ModalPresentationIOS
      ),
    },
  };
};

React Navigation Prevents text input from focusing at first try

1 Answers1