Drawer Navigator with shared header among all children - react-native

Question

This is about a React Native + React Navigation issue.
In my project I need a top-level DrawerNavigator so as a shared header among all screens, so that when the drawer opens it stays on top of the header. Best solution I've come up so far was a DrawerNavigator with all of its routes as a StackNavigator with same header config, but that just seems to hacky, ugly and non-performatic, as I think the header would be re-rendering everytime. Has anyone done anything similar? Thanks in advance.
Router.js
export const RegisterStack = StackNavigator(
{
Register: {screen: Register},
},
{
mode: 'modal',
navigationOptions: {
title: 'My title',
}
}
);
export const HistoryStack = StackNavigator(
{
History: {screen: History},
},
{
mode: 'modal',
navigationOptions: {
title: 'My title',
}
}
);
export const FavoritesStack = StackNavigator(
{
Favorites: {screen: Favorites},
},
{
mode: 'modal',
navigationOptions: {
title: 'My title',
}
}
);
export const CardsStack = StackNavigator(
{
Cards: {screen: Cards},
},
{
mode: 'modal',
navigationOptions: {
title: 'My title',
}
}
);
export const AgreementStack = StackNavigator(
{
Agreement: {screen: Agreement},
},
{
mode: 'modal',
navigationOptions: {
title: 'My title',
}
}
);
export const createRootNavigator = () => {
return DrawerNavigator({
Register: {
screen: RegisterStack,
},
History: {
screen: HistoryStack,
},
Favorites: {
screen: FavoritesStack,
},
Cards: {
screen: CardsStack
},
Agreement: {
screen: AgreementStack,
},
})
};
App.js
export default class App extends Component {
render() {
const Layout = createRootNavigator();
return (
<Provider store={store}>
<Layout style={styles.main}/>
</Provider>
);
}
}

Answer 1

Okay I actually got this to work, what you have to do is make a stackNavigator inside the drawer navigator, the drawerNavigator is able to see inside the stackNavigator and navigate between the stacknavigator screens. Using the contentComponent. Once you have done this you can put the shard header inside the stackNavigator.
const PrimaryDrawer = createDrawerNavigator({
PrimaryStack,
}, {
contentComponent: PrimaryDrawerContentComponent,
})
const PrimaryStack = createStackNavigator({
Feed,
Home,
}, {
})
import _ from 'lodash'
export default class PrimaryDrawerContentComponent extends Component {
render() {
const { navigation } = this.props
return (
<FlatList
data={_.keys(navigation.router.childRouters.PrimaryStack.childRouters)}
renderItem={({ item, index }) => (
<DrawerItem
routeName={item}
navigate={navigation.navigate}
icon={icons[index] ? icons[index] : null}
/>
)}
keyExtractor={item => item.key}
/>
)
}
}
const DrawerItem = ({ routeName, navigate, icon }) => {
return (
<TouchableOpacity
style={styles.button}
onPress={() => { navigate(routeName) }}
>
<Image
source={icon}
/>
<Text style={styles.text}>{routeName}</Text>
</TouchableOpacity>
)
}