passing parameter in react native drawer - react-native

Question

When user login in LoginScreen.js I can get username, password, token.
To implement logout in CustomSidebarMenu.js, I need to pass those parameters from LoginScreen.js to CustomSidebarMenu.js (LoginScreen.js -> DrawerNavigationRoutes.js -> CustomSidebarMenu.js)
I checked that I implemented from LoginScreen.js to DrawerNaviagtionRoutes.js by using
alert(props.route.params.token)
in DrawerNavigatorRoutes.js
but I have no idea to pass parameter in
drawerContent={props => <CustomSidebarMenu {...props} />}>
here's my code
LoginScreen.js
import React, {useState, createRef} from 'react';
import {
StyleSheet,
TextInput,
View,
Text,
ScrollView,
Image,
Keyboard,
TouchableOpacity,
KeyboardAvoidingView,
} from 'react-native';
import AsyncStorage from '#react-native-community/async-storage';
import Loader from './Components/Loader';
const LoginScreen = ({navigation}) => {
const [userName, setUserName] = useState('');
const [userPassword, setUserPassword] = useState('');
const [loading, setLoading] = useState(false);
const [errortext, setErrortext] = useState('');
const emailInputRef = createRef();
const passwordInputRef = createRef();
const handleSubmitPress = () => {
setErrortext('');
if (!userName) {
alert('Please fill Username');
return;
}
if (!userPassword) {
alert('Please fill Password');
return;
}
setLoading(true);
fetch('http://localhost:8000/user/login/', {
method: 'POST',
//body: formBody,
headers: {
//Header Defination
Accept: 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: userName,
password: userPassword,
})
})
.then((response) => response.json())
.then((responseJson) => {
//Hide Loader
setLoading(false);
console.log(responseJson);
// If server response message same as Data Matched
if (responseJson.status === 'success') {
navigation.replace('DrawerNavigationRoutes', {username:userName, password:userPassword, token:responseJson.token});
} else {
setErrortext(responseJson.error);
}
})
.catch((error) => {
//Hide Loader
setLoading(false);
console.error(error);
});
};
return (
<View style={styles.mainBody}>
<Loader loading={loading} />
<ScrollView
keyboardShouldPersistTaps="handled"
contentContainerStyle={{
flex: 1,
justifyContent: 'center',
alignContent: 'center',
}}>
<View>
<KeyboardAvoidingView enabled>
<View style={{alignItems: 'center'}}>
<Image
source={require('../Image/techmate.png')}
style={{
width: '50%',
height: 100,
resizeMode: 'contain',
margin: 30,
}}
/>
</View>
<View style={styles.SectionStyle}>
<TextInput
style={styles.inputStyle}
onChangeText={(UserName) =>
setUserName(UserName)
}
placeholder="Enter Username"
placeholderTextColor="#8b9cb5"
autoCapitalize="none"
returnKeyType="next"
onSubmitEditing={() =>
emailInputRef.current && emailInputRef.current.focus()
}
underlineColorAndroid="#f000"
blurOnSubmit={false}
/>
</View>
<View style={styles.SectionStyle}>
<TextInput
style={styles.inputStyle}
onChangeText={(UserPassword) =>
setUserPassword(UserPassword)
}
placeholder="Enter Password" //12345
placeholderTextColor="#8b9cb5"
keyboardType="default"
ref={passwordInputRef}
onSubmitEditing={Keyboard.dismiss}
blurOnSubmit={false}
secureTextEntry={true}
underlineColorAndroid="#f000"
returnKeyType="next"
/>
</View>
{errortext != '' ? (
<Text style={styles.errorTextStyle}>
{errortext}
</Text>
) : null}
<TouchableOpacity
style={styles.buttonStyle}
activeOpacity={0.5}
onPress={handleSubmitPress}>
<Text style={styles.buttonTextStyle}>LOGIN</Text>
</TouchableOpacity>
<Text
style={styles.registerTextStyle}
onPress={() => navigation.navigate('RegisterScreen')}>
New Here ? Register
</Text>
</KeyboardAvoidingView>
</View>
</ScrollView>
</View>
);
};
export default LoginScreen;
DrawerNavigationRoutes.js
import React from 'react';
// Import Navigators from React Navigation
import {createStackNavigator} from '#react-navigation/stack';
import {createDrawerNavigator} from '#react-navigation/drawer';
// Import Screens
import HomeScreen from './DrawerScreens/HomeScreen';
import CameraScreen from './DrawerScreens/CameraScreen';
import LedgerScreen from './DrawerScreens/LedgerScreen';
import RecommendScreen from './DrawerScreens/RecommendScreen';
import SettingsScreen from './DrawerScreens/SettingScreen';
import CustomSidebarMenu from './Components/CustomSidebarMenu';
import NavigationDrawerHeader from './Components/NavigationDrawerHeader';
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const HomeScreenStack = ({navigation}) => {
return (
<Stack.Navigator initialRouteName="HomeScreen">
<Stack.Screen
name="HomeScreen"
component={HomeScreen}
options={{
title: 'Home', //Set Header Title
headerLeft: () => (
<NavigationDrawerHeader navigationProps={navigation} />
),
headerStyle: {
backgroundColor: '#307ecc', //Set Header color
},
headerTintColor: '#fff', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}
/>
</Stack.Navigator>
);
};
const CameraScreenStack = ({navigation}) => {
return (
<Stack.Navigator
initialRouteName="CameraScreen"
screenOptions={{
headerLeft: () => (
<NavigationDrawerHeader navigationProps={navigation} />
),
headerStyle: {
backgroundColor: '#307ecc', //Set Header color
},
headerTintColor: '#fff', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}>
<Stack.Screen
name="CameraScreen"
component={CameraScreen}
options={{
title: 'Camera', //Set Header Title
}}
/>
</Stack.Navigator>
);
};
const LedgerScreenStack = ({navigation}) => {
return (
<Stack.Navigator
initialRouteName="LedgerScreen"
screenOptions={{
headerLeft: () => (
<NavigationDrawerHeader navigationProps={navigation} />
),
headerStyle: {
backgroundColor: '#307ecc', //Set Header color
},
headerTintColor: '#fff', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}>
<Stack.Screen
name="LedgerScreen"
component={LedgerScreen}
options={{
title: 'Ledger', //Set Header Title
}}
/>
</Stack.Navigator>
);
};
const RecommendScreenStack = ({navigation}) => {
return (
<Stack.Navigator
initialRouteName="RecommendScreen"
screenOptions={{
headerLeft: () => (
<NavigationDrawerHeader navigationProps={navigation} />
),
headerStyle: {
backgroundColor: '#307ecc', //Set Header color
},
headerTintColor: '#fff', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}>
<Stack.Screen
name="RecommendScreen"
component={SettingsScreen}
options={{
title: 'Recommend', //Set Header Title
}}
/>
</Stack.Navigator>
);
};
const SettingScreenStack = ({navigation}) => {
return (
<Stack.Navigator
initialRouteName="SettingsScreen"
screenOptions={{
headerLeft: () => (
<NavigationDrawerHeader navigationProps={navigation} />
),
headerStyle: {
backgroundColor: '#307ecc', //Set Header color
},
headerTintColor: '#fff', //Set Header text color
headerTitleStyle: {
fontWeight: 'bold', //Set Header text style
},
}}>
<Stack.Screen
name="SettingsScreen"
component={SettingsScreen}
options={{
title: 'Settings', //Set Header Title
}}
/>
</Stack.Navigator>
);
};
const DrawerNavigatorRoutes = (props) => {
return (
<Drawer.Navigator
drawerContentOptions={{
activeTintColor: '#cee1f2',
color: '#cee1f2',
itemStyle: {marginVertical: 5, color: 'white'},
labelStyle: {
color: '#d8d8d8',
},
}}
screenOptions={{headerShown: false}}
drawerContent={props => <CustomSidebarMenu {...props} />}>
<Drawer.Screen
name="homeScreenStack"
options={{drawerLabel: 'Home Screen'}}
component={HomeScreenStack}
/>
<Drawer.Screen
name="cameraScreenStack"
options={{drawerLabel: 'Camera Screen'}}
component={CameraScreenStack}
/>
<Drawer.Screen
name="ledgerScreenStack"
options={{drawerLabel: 'Ledger Screen'}}
component={LedgerScreenStack}
/>
<Drawer.Screen
name="recommendScreenStack"
options={{drawerLabel: 'Recommend Screen'}}
component={RecommendScreenStack}
/>
<Drawer.Screen
name="settingScreenStack"
options={{drawerLabel: 'Setting Screen'}}
component={SettingScreenStack}
/>
</Drawer.Navigator>
);
};
export default DrawerNavigatorRoutes;
CustomSidebarMenu.js
import React from 'react';
import {View, Text, Alert, StyleSheet} from 'react-native';
import {
DrawerContentScrollView,
DrawerItemList,
DrawerItem,
} from '#react-navigation/drawer';
const CustomSidebarMenu = (props) => {
const logout = () => {
fetch('http://localhost:8000/user/logout/', {
method: 'POST',
headers: {
//Header Defination
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: props.route.params.token,
},
body: JSON.stringify({
username: props.route.params.username,
password: props.route.params.password,
})
})
.then((response) => response.json())
.then((responseJson) => {
//Hide Loader
//setLoading(false);
console.log(responseJson);
// If server response message same as Data Matched
if (responseJson.status === 'success') {
props.navigation.replace('Auth');
} else {
setErrortext(responseJson.error);
}
})
.catch((error) => {
//Hide Loader
setLoading(false);
console.error(error);
});
}
return (
<View style={stylesSidebar.sideMenuContainer}>
<View style={stylesSidebar.profileHeader}>
<View style={stylesSidebar.profileHeaderPicCircle}>
<Text style={{fontSize: 25, color: '#307ecc'}}>
{'About React'.charAt(0)}
</Text>
</View>
<Text style={stylesSidebar.profileHeaderText}>AboutReact</Text>
</View>
<View style={stylesSidebar.profileHeaderLine} />
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem
label={({color}) => <Text style={{color: '#d8d8d8'}}>Logout</Text>}
onPress={
//props.navigation.toggleDrawer();
logout
}
/>
</DrawerContentScrollView>
</View>
);
};
export default CustomSidebarMenu;