Nested Stack Navigator and Drawer Navigator in React Native - react-native

Question

I have a couple of issues with setup Stack Navigator and Drawer Navigator. First and foremost, the below picture is the flow that I expected and I followed the documentation provided by the React Navigation to implement but I have no luck to achieve what I expected and the output of the implementation looks so weird (You can find it on the 2nd picture). I also attached my code snippet at the bottom.
Also, the output looks like the Drawer navigator header is duplicated with the Stack Navigator.
Besides that, I am quite new to React Native. I hope someone makes me more clearer how the implementation should look like because I have come across few articles and websites, their solution does not work in my case.
P/S: Screen X is opened when one of item clicked from Screen C
import React, { Component } from 'react';
import {
Image,
Button,
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import { createDrawerNavigator, DrawerActions, DrawerItems } from 'react-navigation-drawer';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from '../HomeScreen';
import ItemDetailScreen from '../ItemDetailScreen';
import ProfileScreen from '../ProfileScreen';
const navOptionsHandler = (navigation) => {
header: null
}
const CustomDrawerComponent = (props) => (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ height: 150, backgroundColor: 'white', alignItems: 'center' }}>
<Image source={{ uri: 'https://example.com/logo.png' }} style={{
height: 120,
width: 120,
borderRadius: 60
}} />
</View>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
)
const MyDrawerNavigator = createDrawerNavigator(
{
Home: {
screen: HomeScreen
},
Profile: {
screen: ProfileScreen
}
},
{
initialRouteName: "Home",
contentComponent: CustomDrawerComponent,
contentOptions: {
activeTintColor: 'orange'
}
}
);
const MyStackNavigator = createStackNavigator(
{
HomeA: {
screen: MyDrawerNavigator
},
ItemDetail: {
screen: ItemDetailScreen,
navigationOptions: navOptionsHandler
}
},
{
initialRouteName: "HomeA"
}
);
const AppContainer = createAppContainer(MyStackNavigator);
export default class StackNavigator extends Component {
render() {
return <AppContainer />;
}
}

Answer 1

Your drawer navigator is encapsulated by the stack navigator, which is why you have a double header.
What you need to do is to have the drawer navigator as your main navigator, and have your stack navigator as your profile screen, so it will be displayed as you click on "Profile" in your drawer navigator.
This should work:
const navOptionsHandler = navigation => {
null
}
const CustomDrawerComponent = props => (
<SafeAreaView style={{ flex: 1 }}>
<View
style={{ height: 150, backgroundColor: 'white', alignItems: 'center' }}
>
<Image
source={{ uri: 'https://example.com/logo.png' }}
style={{
height: 120,
width: 120,
borderRadius: 60,
}}
/>
</View>
<ScrollView>
<DrawerItems {...props} />
</ScrollView>
</SafeAreaView>
)
const MyStackNavigator = createStackNavigator(
{
Profile: ProfileScreen,
ItemDetail: {
screen: ItemDetailScreen,
navigationOptions: navOptionsHandler,
},
},
{
initialRouteName: 'Profile',
},
)
const MyDrawerNavigator = createDrawerNavigator(
{
Home: HomeScreen,
ProfileStack: {
screen: MyStackNavigator,
navigationOptions: () => ({
title: 'Profile',
}),
}
},
{
initialRouteName: 'Home',
contentComponent: CustomDrawerComponent,
contentOptions: {
activeTintColor: 'orange',
},
},
)
const AppContainer = createAppContainer(MyDrawerNavigator)
export default class StackNavigator extends Component {
render() {
return <AppContainer />
}
}
By the way since you say you are only just starting using React Native, unless you have a specific reason to use React Navigation v4, you should probably use v5 instead as v4 will become obsolete one day or another.