Passing data/parameter using drawer navigation in react navigation 5

Question

I have issue to passing parameter between 2 screen component that belongs to different navigator.

First i have Login component that inside Stack navigator, then i have Home component that inside Drawer navigator. The Hirarchy is like this:

Ok i will show full of my code in Login and Home here:

(Login component)

import React, {useState} from 'react';
import {StyleSheet, Text, View, SafeAreaView} from 'react-native';
import {Button, TouchableRipple} from 'react-native-paper';
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from 'react-native-responsive-screen';

import {Container, baseColor} from '../Styles';

const users = [
  {
    id: 72780,
    name: 'Sample 1',
    login: 'videouser1',
    password: 'videouser1',
    color: '#34ad86',
  },
  {
    id: 72781,
    name: 'Sample 2',
    login: 'videouser2',
    password: 'videouser2',
    color: baseColor,
  },
];
const Login = ({navigation}) => {
  const toHome = (user) => {
    navigation.navigate('Drawer', {screen: 'Home', params: {user}});
  };

  return (
    <View style={Container}>
      <Button
        mode="contained"
        uppercase={false}
        onPress={() => toHome(users[0])}
        style={styles.button}>
        Login as Sample 1
      </Button>
      <Button
        mode="contained"
        uppercase={false}
        onPress={() => toHome(users[1])}
        style={styles.button}>
        Login as Sample 2
      </Button>
    </View>
  );
};

export default Login;

const styles = StyleSheet.create({
  button: {
    margin: hp('2%'),
  },
});

Login Component is inside Stack Navigator:

(stack navigator)

import * as React from 'react';
import {createStackNavigator} from '@react-navigation/stack';

import SplashScreen from '../Screen/SplashScreen';
import Login from '../Screen/Login';
import DrawerNavigator from './DrawerNavigator';

const Stack = createStackNavigator();

function StackNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="SplashScreen"
        component={SplashScreen}
        options={{headerShown: false}}
      />
      <Stack.Screen
        name="Login"
        component={Login}
        options={{headerShown: false, gestureEnabled: false}}
      />
      <Stack.Screen
        name="Drawer"
        component={DrawerNavigator}
        options={{headerShown: false, gestureEnabled: false}}
      />
    </Stack.Navigator>
  );
}

export default StackNavigator;

I have Home component inside Drawer Navigator:

import * as React from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';

import Home from '../Screen/Home';
import Profile from '../Screen/Profile';
import Settings from '../Screen/Settings';
import CustomDrawerContent from './CustomDrawerContent';

const Drawer = createDrawerNavigator();

function DrawerNavigator({route, navigation}) {
  console.log('params', route.params);
  return (
    <Drawer.Navigator
      initialRouteName="Home"
      drawerContent={(props) => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Home" component={BottomTabs} />
      <Drawer.Screen name="Profile" component={Profile} />
      <Drawer.Screen name="Settings" component={Settings} />
    </Drawer.Navigator>
  );
}

export default DrawerNavigator;

And the last, this is my Home component:

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

const Home = ({route, navigation}) => {
  console.log('user', route);
  return (
    <View>
      <Text>Home</Text>
    </View>
  );
};

export default Home;

const styles = StyleSheet.create({});

I have to passing parameter from Login to Home component, how can i do that? i already follow react navigation 5 documentation but it's not running well.

Answer 1

Try this:

import * as React from 'react';
import {createDrawerNavigator} from '@react-navigation/drawer';
    
import Home from '../Screen/Home';
import Profile from '../Screen/Profile';
import Settings from '../Screen/Settings';
import CustomDrawerContent from './CustomDrawerContent';

const Drawer = createDrawerNavigator();

function DrawerNavigator({route, navigation}) {
  console.log('params', route.params);
  return (
    <Drawer.Navigator
      initialRouteName="Home"
      drawerContent={(props) => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Home" initialParams={{ params: route.params }} component={BottomTabs} />
      <Drawer.Screen name="Profile" component={Profile} />
      <Drawer.Screen name="Settings" component={Settings} />
    </Drawer.Navigator>
  );
}

export default DrawerNavigator;