We Keep Coding

Expo React Native Drawer Navigator Logout functionality

StackOverflow I am very new to react native since I implement drawer navigation now I want to include a logout button at the end of the drawer but I don't find how to do that any good practice and ideas about how to achieve this kind of functionality. this is my code for drawer I find it from hours of google and it works fine but it has functions of screens I don't find any option of how to make a logout link in this code if this code is not correct then suggest any other good snippet thanks in advance
import React from 'react';
import { Ionicons } from '#expo/vector-icons'
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { createDrawerNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
import { DrawerActions } from 'react-navigation-drawer';
// _signOutAsync = async () => {
// await AsyncStorage.clear();
// this.props.navigation.navigate('Auth');
// };
const HomeScreen = () => (
<View style={styles.container}>
<Text>Home Screen!</Text>
</View>
);
const ProfileScreen = () => (
<View style={styles.container}>
<Text>Profile Screen!</Text>
</View>
);
const SettingsScreen = () => (
<View style={styles.container}>
<Text>Settings Screen!</Text>
</View>
);
const DrawerNavigator = createDrawerNavigator({
Home: {
screen: HomeScreen,
navigationOptions: ({ navigation }) => ({
title: 'Home Screen',
drawerLabel: 'Home',
drawerIcon: () => (
<Ionicons name="ios-home" size={20} />
)
})
},
Profile: {
screen: ProfileScreen,
navigationOptions: ({ navigation }) => ({
title: 'Profile Screen',
drawerLabel: 'Profile',
drawerIcon: () => (
<Ionicons name="ios-person" size={20} />
)
})
},
Settings: {
screen: SettingsScreen,
navigationOptions: ({ navigation }) => ({
drawerIcon: () => (
<Ionicons name="ios-settings" size={20} />
)
})
},
});
const StackNavigator = createStackNavigator({
DrawerNavigator: {
screen: DrawerNavigator,
navigationOptions: ({ navigation }) => {
const { state } = navigation;
if(state.isDrawerOpen) {
return {
headerLeft: ({titleStyle}) => (
<TouchableOpacity onPress={() => {navigation.dispatch(DrawerActions.toggleDrawer())}}>
<Ionicons name="ios-close" style={styles.menuClose} size={36} color={titleStyle} />
</TouchableOpacity>
),
}
}
else {
return {
headerLeft: ({titleStyle}) => (
<TouchableOpacity onPress={() => {navigation.dispatch(DrawerActions.toggleDrawer())}}>
<Ionicons name="ios-menu" style={styles.menuOpen} size={32} color={titleStyle} />
</TouchableOpacity>
),
}
}
}
}
})
export default createAppContainer(StackNavigator);

You can create one content component to render inside your Drawer Navigator, making it easier to modify.
I will explain with your example (I am assuming that it is your App.js file):
//import CustomDrawer from '...'
const DrawerNavigator = createDrawerNavigator({
Home: {
screen: HomeScreen,
navigationOptions: ({ navigation }) => ({
title: 'Home Screen',
drawerLabel: 'Home',
drawerIcon: () => (
<Ionicons name="ios-home" size={20} />
)
})
},
Profile: {
screen: ProfileScreen,
navigationOptions: ({ navigation }) => ({
title: 'Profile Screen',
drawerLabel: 'Profile',
drawerIcon: () => (
<Ionicons name="ios-person" size={20} />
)
})
},
Settings: {
screen: SettingsScreen,
navigationOptions: ({ navigation }) => ({
drawerIcon: () => (
<Ionicons name="ios-settings" size={20} />
)
})
},
//Here you will add one more pair of curly brackets to add more configs.
}, {
initialRouteName: 'Home',
contentComponent: CustomDrawer //This is the option that will allow you to add the button
});
You will create one entire component to modify like you want and then render inside the Drawer Navigator. Remember, I am using CustomDrawer name, you will import this component inside your App.js file.
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import { Button } from 'react-native-elements';
import { DrawerNavigatorItems } from 'react-navigation-drawer';
const CustomDrawer = ({ ...props }) => {
return (
<>
<View>
<DrawerNavigatorItems
{...props}
itemsContainerStyle={{}}
itemStyle={{}}
/>
</View>
<View
style={{
flexDirection: 'row',
alignSelf: 'center',
position: 'relative',
marginBottom: 20,
}}
>
<Button
title={'Log out'}
buttonStyle={{ width: 200, borderRadius: 20 }}
onPress={}
/>
</View>
</>
);
};
const styles = StyleSheet.create({});
export default CustomDrawer;
Here I am rendering only the CustomDrawer props, that is the itens that you create in your App.js and rendering it (specifically it is the ...props that I am passing in DrawerNavigationItems, so you can customize it like you want, like one normal screen, place buttons, create views and apply styles to it.
You can also instead of creating one new screen to render inside your Drawer Navigator code it inside your App.js, but personally I feel it much messed up
You can learn more with this tutorial

Using React Navigation, how can I render the back button on an outer stack header based on the screen of a nested stack?

Here's a snack which demonstrates the problem: https://snack.expo.io/#zeckdude/navigation-demo
I am nesting stacks inside a drawer navigator, while the drawer navigator is nested inside a stack navigator.
I am using the outer stack navigator to display a header bar with a logo in the middle and a menu button on the left, which toggles the menu. I would like for the drawer toggle button to be replaced with a back button whenever one of the nested stacks inside the drawer are on the 2nd or greater page in their stack.
How can I render the back button on an outer stack header based on the screen of a nested stack?
/**
* Authorized Drawer
* Used to set the labels in the drawer and enable drawer
*/
const AuthorizedDrawer = createDrawerNavigator(
{
ScanQR: {
screen: ScanQRScreen,
navigationOptions: {
drawerLabel: 'Scan'
}
},
ItemStack: {
screen: ItemStack,
navigationOptions: {
drawerLabel: 'Items'
}
},
SendStack: {
screen: SendStack,
navigationOptions: {
drawerLabel: 'Send'
}
},
},
{
initialRouteName: 'ItemStack'
}
);
/**
* Authorized Drawer Stack
* Put the drawer inside a stack so the header can be added and styled
*/
const AuthorizedDrawerStack = createStackNavigator(
{
AuthorizedDrawer: { screen: AuthorizedDrawer },
},
{
headerMode: 'float',
navigationOptions: ({navigation}) => {
return {
headerLeft: (
<View
style={{
paddingLeft: 10,
}}
>
<Icon
name={navigation.state.isDrawerOpen ? 'close' : 'menu'}
color="#2F6BAE"
onPress={() => {
navigation.toggleDrawer();
}}
/>
</View>
),
headerTitle: <Logo />
};
}
}
)
/**
* Root Stack
* Contains all the stacks so you can link from links within one stack to links in the other stack
*/
const RootStack = createStackNavigator(
{
OnboardingStack: { screen: OnboardingStack },
AuthorizedStack: { screen: AuthorizedDrawerStack },
},
{
headerMode: 'none'
}
);

You just had to add a small condition inside navigationOptions of AuthorizedDrawerStack
import { HeaderBackButton } from 'react-navigation';
let isRootScreen = (navigation) => navigation.state.routes[navigation.state.index].index === 0;
const AuthorizedDrawerStack = createStackNavigator(
{
AuthorizedDrawer: { screen: AuthorizedDrawer },
},
{
headerMode: 'float',
navigationOptions: ({navigation, screenProps, navigationOptions}) => {
return {
headerLeft: (
<View
style={{
paddingLeft: 10,
}}>
{isRootScreen(navigation) ? // <-- HERE
<Icon
name={navigation.state.isDrawerOpen ? 'close' : 'menu'}
color="#2F6BAE"
onPress={() => {
navigation.toggleDrawer();
}}
/>
: <HeaderBackButton onPress={() => navigation.goBack(null)} />}
</View>
),
headerTitle: <Logo />
};
}
}
)
Here's the working snack.

How to render the same component on all screens?

I have a StackNavigator, where I've specified the same headerRight Icon for every screen:
export default StackNavigator(
{
Authorization: {
screen: AuthorizationScreen
},
SignIn: {
screen: SignInScreen
},
SignUp: {
screen: SignUpScreen
},
Main: {
screen: MainScreen
},
Language: {
screen: LanguageScreen
},
//...etc
},
{
navigationOptions: {
headerRight: (
<Icon color={'#77767c'}
name='ios-contact-outline'
size={30}
style={{ paddingRight: 30}}
type='ionicon'
/>
),
}
}
)
All the screens are imported from separate files. When this Icon is pressed, I want the same component to render regardless of what screen I'm on. The problem is, I can't think of a way to do this outside of writing in some kind of state handling and onPress function for every single screen I have, which would be really tedious to write and maintain. Is there any way to get around this and only write the component rendering once?

You can create one component for Header and pass it into all the screen's navigationOptions. Then you just need to handle the method on each screen and you can do your stuff at here.
Custom Header Class:
class Header extends Component {
render() {
const props = this.props;
return (<View>
<View
style={KEEP_YOUR_STYLE}
/>
<View style={styles.containerStyle} >
<Text
style={your_style}
numberOfLines={1}
>TITLE</Text>
<TouchableOpacity
style={styles.touchableOpacityStyle}
onPress={props.onPress}
>
<Image
source={YOUR_ICON}
style={{
position:'absolute',
right: 10,
width: 20,
height: 20,
resizeMode: 'cover',
}
} />}
</TouchableOpacity>
</View>
</View>
);
}
}
export { Header };
In your StackNavigator:
const defaultNavigation = ({ navigation }) => ({
header: (<Header
title='Hellow'
/>),
});
Language: {
screen: LanguageScreen,
navigationOptions: defaultNavigation,
},
In your particular Screen:
static navigationOptions = ({ navigation }) => ({
header: (
<Header
title='Your Title'
onPress={() => {
// DO YOUR STUFF
}}
/>),
});

Navigate to root tab screen inside a tabnavigator - React Navigation

I have been using react-navigation for a while now. When I tried referring to this Snack on Expo, I realised that if I navigate inside a tab, then I could not navigate back to Home Tab screen by pressing the Home button on the tabbar. I have to click on Back button that is present on the screen in order to navigate back to home.
Here is a piece of code:
const HomeStack = StackNavigator({
Home: { screen: HomeScreen },
Details: { screen: DetailsScreen },
});
const SettingsStack = StackNavigator({
Settings: { screen: SettingsScreen },
Details: { screen: DetailsScreen },
});
export default TabNavigator({
Home: { screen: HomeStack },
Settings: { screen: SettingsStack },
});
Referring to above code, if I click on Settings from the tabbar and then navigate to Details present inside that stack then I cant navigate back to Settings when I click on Settings again. I have to click on Back button that is present in the top section of the screen.
What is wrong here?

It would be a good idea to use unique names for every new route. React Navigation uses these names as unique keys to differentiate between routes. I see a Settings in your default TabNavigator, and also another Settings for your SettingsStack StackNavigator. Same for Details too. (Simply renaming might solve your issue too, not sure).
So taking your example (and renaming Settings to SettingsScreen),
const HomeStack = StackNavigator({
Home: { screen: HomeScreen },
Details: { screen: DetailsScreen },
});
const SettingsStack = StackNavigator({
SettingsScreen: { screen: SettingsScreen },
Details: { screen: DetailsScreen },
});
export default TabNavigator({
Home: { screen: HomeStack },
Settings: { screen: SettingsStack },
});
Now, to go back to SettingsScreen from Settings > Details, you might wanna try
dispatch(NavigationActions.navigate({
routeName: 'Settings',
action: NavigationActions.navigate({ routeName: 'SettingsScreen' })
}))
The idea is that in case of nested navigators, if you want to go back to another screen via the parent, you should call Navigations.navigate twice, in a nested manner.
It's in their docs somewhere. I'll try adding the link here for reference as soon as I find it.

The tab navigator buttons only switch between the shown views. Since you navigated within your stack navigator, that's what you're seeing.
If you want to add the functionality that the stack is reset every time the tab button is pressed, you can do that by providing your own tab component and then calling reset on the stack navigator.

createTopTabs = () => {
return(
<MaterialTopTabs.Navigator initialRouteName="Tab_Daily"
tabBarOptions={{
showIcon: true,
style: { backgroundColor: '#C4e672' },
labelStyle: { fontSize: 12, fontWeight: 'bold' },
/* tabStyle: { width: 100 }, */
tabStyle: { height: 50 },
}}>
<MaterialTopTabs.Screen
name="Tab_ToDoNote"
component={TabToDoNote}
options={
{
title: '',
/* tabBarLabel: "Daily", */
tabBarIcon: () =>
(
<Icons_SimpleLine
style={
[
{
color: 'red',
}
]
}
size={25}
name={'note'}
/>
)
}
}
/>
<MaterialTopTabs.Screen
name="Tab_Daily"
component={TabDaily}
options={
{
title: '',
tabBarLabel: "Daily",
tabBarIcon: () =>
(
<Icons_MaterialCommunity
style={
[
{
color: 'red'
}
]
}
size={18}
name={'calendar-today'}
/>
)
}
}
/>
<MaterialTopTabs.Screen
name="Tab_Monthly"
component={TabMonthly}
options={
{
tabBarLabel: "Monthly",
tabBarIcon: () =>
(
<Icons_MaterialCommunity
style={
[
{
color: 'red'
}
]
}
size={18}
name={'calendar-month-outline'}
/>
)
}
}
/>
<MaterialTopTabs.Screen
name="Tab_Yearly"
component={TabYearly}
options={
{
tabBarLabel: "Yearly",
tabBarIcon: () =>
(
<Icons_MaterialCommunity
style={
[
{
color: 'red'
}
]
}
size={18}
name={'calendar-multiple'}
/>
)
}
}
/>
</MaterialTopTabs.Navigator>
);
}

How to use tabBarComponent for TabNavigator? Tab bar not showing

I'm trying to make my own custom tab bar and it seems tabBarComponent is the way to do it by setting as my own component. With the below code my tab bar does not show up.
const TabNav = TabNavigator({
LaunchScreen: {
screen: PrimaryNav,
navigationOptions: {
tabBarLabel:'Find',
tabBarIcon: ({ tintColor }) => (
<Icon name='search' size={20} color='white' />
),
},
},
}, {
navigationOptions: {
headerTintColor: 'grey'
},
tabBarComponent: FooterTabs,
tabBarPosition: 'bottom',
swipeEnabled:false,
animationEnabled:false,
lazy:true,
tabBarOptions: {
showIcon:true,
showLabel:false,
style: {
backgroundColor: 'black'
}
}
});
In FooterTabs.js:
export default class FooterTabs extends Component {
render () {
return (
<View style={styles.container}>
<Text>FooterTabs Component</Text>
</View>
)
}
}
What am I missing?

const TabNav = TabNavigator({
......,
tabBarComponent: props => (
<FooterTabs{...props} />
),
tabBarPosition: 'bottom',
........
});
Try that. enclose your FooterTabs i.e <FooterTabs /> not FooterTabs

After some trial and error, the solution to my issue was to wrap my footer content in a ScrollView, then the tabs showed up as expected, though I am not sure why that is required.
I also implemented Caleb's suggestion (thanks!) of using tabBarComponent: props => <FooterTabs{...props} /> in order to pass the props which I need though was not the cause of the issue.