How do I pass a Prop to a Navigation Screen Component - React Native

Question

I'm fairly new to React native . I have created a Drawer Navigator in my App.js file.

One of my navigation Components is a component named LoginScreen.

I am trying to to pass a prop to LoginScreen to display when the user navigates to it.

App.js (Navigator)

const Tab = createMaterialBottomTabNavigator()
const Stack = createStackNavigator()
const Drawer = createDrawerNavigator()

export default class App extends Component {
    constructor(props) {
        super(props)

        this.state = {
            isAdmin: 'false',
            checked: false,
        }
    }

    async componentDidMount() {
        try {
            const adm = await AsyncStorage.getItem('is_admin')
            if (adm == null) {
                adm = await AsyncStorage.setItem('is_admin', 'false')
            }
            this.setState({ isAdmin: adm, checked: true })
        } catch (error) {
            console.log(error)
        }
    }


    render() {
        const { isAdmin } = this.state
        console.log(isAdmin)

        //is admin
        return isAdmin == 'true' ? (
            <NavigationContainer>
                <Drawer.Navigator initialRouteName="Home">
                    <Drawer.Screen name="Home" component={MyStack} />

                    <Drawer.Screen
                        name="Admin Panel"
                        component={props => {
                            return <LoginScreen props={props} propName = {'Hello'} />
                        }}
                    />
                </Drawer.Navigator>
            </NavigationContainer>
        ) : (
            //ISNOT ADMIN
            <NavigationContainer>
                <Drawer.Navigator initialRouteName="Home">
                    <Drawer.Screen name="Home" component={MyStack} />

                    <Drawer.Screen name="Login" component={LoginScreen} />
                </Drawer.Navigator>
            </NavigationContainer>
        )
    }
}

LginScreen.js

    const LoginScreen = ({ navigation, propName }) => {
       // const [bridge, setB] = useState(false)

        return (
            <SafeAreaView style={{ flex: 1, backgroundColor: '#376772' }}>
                <TopHeader
                    onRefresh={() => fetch_crossings}
                    onMenuToggle={() => navigation.toggleDrawer()}
                />

                <View style={{ flex: 1 }}>
                    <View
                        style={{
                            backgroundColor: '#fff',
                            margin: 10,
                            borderRadius: 5,
                            alignItems: 'center',
                            padding: 10,
                            paddingBottom: scale(20),
                        }}
                    >
                        <Avatar
                            rounded
                            size={'xlarge'}
                            overlayContainerStyle={{
                                backgroundColor: '#185a9d',
                            }}
                            icon={{
                                color: 'orange',
                                type: 'ionicon',
                                name: 'ios-log-in',
                            }}
                        />
                        <Input
                            placeholder="  Email"
                            placeholderTextColor={'#292b2c'}
                            style={{ margin: 5 }}
                            errorStyle={{ color: '#d9534f' }}
                            leftIcon={<Icon name="mail" color="#292b2c" />}
                            errorMessage="Enter a valid Email"
                        />

                        <Divider
                            style={{
                                backgroundColor: 'orange',
                                height: 3,
                                margin: scale(20),
                                borderRadius: 3,
                            }}
                        />
                        <Input
                            placeholder="  Password"
                            placeholderTextColor={'#292b2c'}
                            secureTextEntry={true}
                            style={{ margin: 5 }}
                            errorStyle={{ color: '#d9534f' }}
                            leftIcon={<Icon name={'lock'} color="#292b2c" />}
                            errorMessage="Enter a valid Email"
                        />
                    </View>
                    <View
                        style={{
                            backgroundColor: '#fff',
                            margin: 10,
                            marginTop: 0,
                            borderRadius: 5,

                            padding: 10,
                        }}
                    >
                        <Button
                            buttonStyle={{
                                margin: 10,
                                backgroundColor: '#5cb85c',
                                borderRadius: 4,
                                alignSelf: 'stretch',
                            }}
                            onPress={async () => {
                                try {
                                    await AsyncStorage.setItem('is_admin', 'false')
                        **console.log(propName);** //<--Right HERE

                                    navigation.navigate('Home')

                                } catch (error) {
                                    console.log(error)
                                }
                            }}
                            icon={<Icon name="send" size={15} color="white" />}
                            iconRight
                            titleStyle={{ fontWeight: 'bold' }}
                            title="Submit  "
                        />
                        <Button
                            buttonStyle={{
                                margin: 10,
                                backgroundColor: '#d9534f',
                                borderRadius: 4,
                                alignSelf: 'stretch',
                            }}
                            onPress={() => {
                                navigation.navigate('Home')
                            }}
                            icon={<Icon name="close" size={15} color="white" />}
                            iconRight
                            titleStyle={{ fontWeight: 'bold' }}
                            title={'Close '}
                        />
                    </View>
                </View>
            </SafeAreaView>
        )
    }

    export default LoginScreen

Whenever I console.log(propName), it says that its undefined.

Answer 1

Asad's Answer actually helped me get to this :

App.js (Navigation)

Here, we can add the 'initialParams' parameter to <Drawer.Screen/> :

 <Drawer.Screen
    name="Login"
    component={LoginScreen}
    initialParams={{ post: this.state.isAdmin }} //<-- Right here
 />

Then we can receive as such in LoginScreen.js as such :

const LoginScreen = ({ navigation, route }) => {

    console.log(route.params.post)
    return (
        <Text>{route.params.post}</Text>
    )
}

Answer 2

Another way:

<Drawer.Navigator
    initialRouteName="Updates"
    drawerContentOptions={{ style: { paddingVertical: 50 } }}>
    <Drawer.Screen name="Updates" options={screenOptions}>
        {props => (
            <UpdatesScreen myProp={this.state.someProp} />
        )}
    </Drawer.Screen>
    ...
</Drawer.Navigator>