drawer with logout in react navigation - reactjs

Question

I am facing one issue in my drawer. I am looking for some help in this. People who are using react navigation 5 version.
i am using the latest react navigation version and my code for custom drawer is below
function CustomDrawerContent(props) {
//
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem label="Logout" onPress={()=>
Alert.alert(
'Log out',
'Do you want to logout?',
[
{text: 'Cancel', onPress: () => {return null}},
{text: 'Confirm', onPress: () => {
AsyncStorage.clear();
//props.navigation.navigate('Home')
}},
],
{ cancelable: false }
)
} />
</DrawerContentScrollView>
);
}
And my route.js is mentioned below.
export default function Routes(username, password) {
// eslint-disable-next-line no-shadow
const Stack = createStackNavigator();
const [loader, setloader] = useState('');
const [state, dispatch] = React.useReducer(
(prevState, action) => {
switch (action.type) {
case 'RESTORE_TOKEN':
return {
...prevState,
userToken: action.token,
isLoading: false,
};
case 'SIGN_IN':
return {
...prevState,
isSignout: false,
userToken: action.token,
};
case 'SIGN_OUT':
return {
...prevState,
isSignout: true,
userToken: undefined,
};
}
},
{
isLoading: true,
isSignout: false,
userToken: null,
},
);
React.useEffect(() => {
// Fetch the token from storage then navigate to our appropriate place
const bootstrapAsync = async () => {
let userToken;
try {
userToken = await AsyncStorage.getItem('#kiklee-user-id');
} catch (e) {
// Restoring token failed
}
// After restoring token, we may need to validate it in production apps
// This will switch to the App screen or Auth screen and this loading
// screen will be unmounted and thrown away.
dispatch({type: 'RESTORE_TOKEN', token: userToken});
};
bootstrapAsync();
}, []);
const authContext = React.useMemo(
() => ({
signIn: async data => {
try {
let config_api_url = Config.api_login_url;
if (data.username === '' && data.password === '') {
Alert.alert(
'Error : ',
'Please enter your email address and password.',
);
} else if (data.username === '') {
Alert.alert('Error : ', 'Please enter your email address.');
} else if (
!(data.username === '') &&
Validate.isEmailValid(data.username) === true
) {
Alert.alert('Error : ', 'Please enter the correct email address.');
} else if (password.length < 5) {
Alert.alert(
'Error : ',
'Please enter your password with a minimum length of 5.',
);
} else {
// seterror(''); //empty all errors
setloader(true);
await fetch(config_api_url, {
method: 'POST',
body: JSON.stringify({
username: data.username,
password: data.password,
}),
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
})
.then(response => response.text())
.then(async responseData => {
// parse the json values
var responsevalue = JSON.parse(responseData);
if (responsevalue.login_status === 'Active') {
await AsyncStorage.removeItem('#kiklee-user-id');
await AsyncStorage.setItem(
'#kiklee-user-id',
responsevalue.id.toString(),
);
// const value = await AsyncStorage.getItem('#kiklee-user-id');
dispatch({type: 'SIGN_IN', token: 'dummy-auth-token'});
setloader(false);
// eslint-disable-next-line eqeqeq
} else if (responsevalue.login_status == 'Deactive') {
Alert.alert('Error : ', 'Userid is deactive.');
setloader(false);
} else {
Alert.alert('Error : ', 'Invalid username or password.');
setloader(false);
}
})
.catch(err => {
Alert.alert(err);
});
}
} catch (e) {
// saving error
Alert.alert('Please try your login after some time.');
}
},
signOut: async () => {
AsyncStorage.removeItem('#kiklee-user-id');
dispatch({type: 'SIGN_OUT'});
},
signUp: async data => {
dispatch({type: 'SIGN_IN', token: 'dummy-auth-token'});
},
}),
[],
);
if (state.isLoading) {
// We haven't finished checking for the token yet
return <SplashScreen />;
}
// Loader
if (loader == true) {
return (
<View style={styles.container}>
<Spinner
visible={true}
textContent={'Loading...'}
textStyle={styles.spinnerTextStyle}
/>
</View>
);
}
return (
<AuthContext.Provider value={authContext}>
<NavigationContainer>
{state.userToken == null ? (
<>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerShown: false,
animationTypeForReplace: state.isSignout ? 'pop' : 'push',
}}
/>
<Stack.Screen
name="Privacy"
component={Privacy}
options={{headerShown: false}}
/>
<Stack.Screen
name="ForgetPassword"
component={ForgetPassword}
options={{headerShown: true}}
/>
<Stack.Screen
name="SignUp"
component={Signup}
options={{headerShown: false}}
/>
</Stack.Navigator>
</>
) : (
<>
<Drawer.Navigator
initialRouteName="Dashboard"
drawerContent={props => CustomDrawerContent(props)}>
<Drawer.Screen name="Dashboard" component={MainRoot} />
</Drawer.Navigator>
</>
)}
</NavigationContainer>
</AuthContext.Provider>
);
}
i can call authcontext inside the custom drawer because it will display a error called "Hooks rule"
i am looking for a help only with react navigation 5.

Answer 1

Try defining const Stack = createStackNavigator(); above the Routes component.
Your useState and useReducer hooks need to come first.

Answer 2

I had the same issue ,but eventually I created a work around because I tried passing the function as props from different roots and when i logged props from the customer drawer item , it was undefined... so that lead me to a previous solution that I had used with react navigation v4.
Solution:
create your own component for signing out and other functionalities like links etc.
const DrawerMeta = () => {
const { signOut } = useContext(AuthContext);
return (
<View style={{ flex: 1, justifyContent: "flex-end" }}>
<Button
onPress={async () => {
await signOut();
}}
title="sign out"
/>
</View>
);
};
insert into your drawer component
function CustomDrawerContent(props) {
//
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerMeta />
</DrawerContentScrollView>
);
}