how can i change the options of my drawerNavigator with React Native when user is logged - react-native

Question

I need to change the content of my DrawerNavigator once the user is logged.
Can someone help me, please?

Answer 1

You can make your custom DrawerNavigator and change its View or Content dynamically. Here is an example:
public static Routes = DrawerNavigator({
Main: {
screen: StackNavigator({
Home: { screen: Home },
Contents: { screen: Contents },
ContentList: { screen: ContentList },
}, stackConfig('Home'))
},
MessageInbox: { screen: MessageInbox },
UserInfo: { screen: UserInfo}
}, {
initialRouteName: 'Main',
drawerWidth: 300,
drawerPosition: Platform.OS == 'ios' ? 'left' : 'right',
contentComponent: (props: any) => (
<DrawerComponent properties={props} />
)
}
)
DrawerComponent.js:
import React from 'react'
import { View, Platform, Text, Image, ScrollView, TouchableOpacity, AsyncStorage } from 'react-native'
import { DrawerItems, NavigationActions } from 'react-navigation'
import Icon from 'react-native-vector-icons/Ionicons';
export default class DrawerComponent extends React.PureComponent {
constructor(props) {
super(props)
this.state = {
user: null,
avatarPic: 'avatars/0-1.png',
}
}
componentDidMount() {
this.fetchData()
}
fetchData = async () => {
let data = await AsyncStorage.getItem('UserData')
this.setState({ user: data })
}
render() {
let { user } = this.state
return (
<ScrollView contentContainerStyle={{ flex: 1 }}>
<View style={{ width: '100%', height: '30%', backgroundColor: 'white' }}>
<Image
style={{ width: 50, height: 50 }}
source={{ uri: this.state.avatarPic }}
/>
<TouchableOpacity
onPress={() => {
this.props.properties.navigation.navigate('UserInfo')
}}
style={{ marginTop: 10 }}>
<Text>{user.name ? user.name : 'New User'}</Text>
</TouchableOpacity>
</View>
<DrawerItems {...this.props.properties} />
</ScrollView>
)
}
}
I hope it help you.