Drawers opens by default in react native - react-native

Question

I am making a react native app which contains two navigator like below.
const drawerNavigator = createDrawerNavigator(
{
HomePage: { screen: Stack },
History: { screen: History },
Transactions: { screen: Transactions },
Profile: { screen: EditProfile },
Wallet: { screen: Wallet },
ResetPassword: { screen: ResetPassword }
},
{
contentComponent: props => <Drawer { ...props }
/>;
},
{
contentOptions: {
activeTintColor: '#e91e63',
}
});
const RootStack = createStackNavigator({
Splash: { screen: Splash },
Login: { screen: Login },
Register: { screen: Register },
ForgotPassword: { screen: ForgotPassword },
CreateProfile: { screen: CreateProfile },
UploadDocuments: { screen: UploadDocuments },
Home: { screen: drawerNavigator }
}, {
headerMode: 'none',
initialRouteName: 'Splash'
});
Now the problem is that when i logged in successfully then in goes to drawernavigator like this.
this.props.navigation.navigate("Home")
But the problem is that when it goes in stack then it opens drawer by default.How can i make drawer close by default in react native

Answer 1

the problem is that there are 2 routes with name 'Home', one in RootStack and one in drawerNavigator
so every time you navigate to 'Home' both routs get activated. Try changing the name in any one stack
**update for closing drawer
const parent = this.props.navigation.dangerouslyGetParent();
const isDrawerOpen = parent && parent.state && parent.state.isDrawerOpen;
if(isDrawerOpen)
this.props.navigation.closeDrawer();
put this in your componentDidMount()
**for showing data from async storage i did this
class homeDrawerComponent extends Component {
constructor(props) {
super(props);
this.state = {
user: null
};
}
async componentDidMount() {
let user = await appDataStorage.getUser();
await this.setState({ user: user });
}
render(){
const name = this.state.user?this.state.user.firstName+' '+this.state.user.lastName:'';
const email = this.state.user?this.state.user.email:'';
return (
<SafeAreaView>
<View
style={{ height: height * .22, justifyContent: 'flex-start', alignItems: 'flex-start', backgroundColor: 'white',paddingLeft:10,paddingTop:10 }} >
<Image
source={require('./components/images/sj-book-library-logo-drawer.png')}
style={{ width: width * .22, height: width * .25, borderRadius: 50 }} />
<Text style={{ fontWeight: 'bold', color: '#0094FFFF' }}>
{name}
</Text>
<Text style={{ fontWeight: 'bold', color: '#0094FFFF' }}>
{email}
</Text>
</View>
<ScrollView>
<DrawerItems {...this.props} />
</ScrollView>
</SafeAreaView>
)
}
}