React - how to add header when I have bottom tab navigation - reactjs

Question

I'm trying to achieve a Instagram-like navigation
I have a buttom tab navigation in App.js
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { createAppContainer, createBottomTabNavigator} from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Home from './views/Home'
import Search from './views/Search'
const MainNavigator = createBottomTabNavigator({
Home: { screen: Home },
Search: { screen: Search },
}, {
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, horizontal, tintColor }) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if(routeName === 'Home'){
iconName = `ios-home`;
}
if(routeName === 'Search'){
iconName = `ios-search`;
}
return <IconComponent name={iconName} size={25} color={tintColor} />;
}
}),
initialRouteName: 'Search',
tabBarOptions: {
activeTintColor: '#fff',
activeBackgroundColor: '#4c399c',
inactiveTintColor: '#f1f3f5',
inactiveBackgroundColor: '#5442a0',
showLabel: false
},
});
const App = createAppContainer(MainNavigator);
export default App;
I'll have more than two views at the bottom.
The top bar will have a centered logo on all views, and some views will have 1 left button and/or 1 right button.
What I'm trying to achieve is to not render the header bar in every view, but to declare one globally (like the bottom navigation) and add the custom buttons on the few views that will have them

Answer 1

put the tab navigation as the parent, and add a stack navigation inside each tab.

Answer 2

An easy way to do this is using the Header component from react-native-elements. You just need to add this to the screen that you want the header on.
It's really easy to add the buttons to open drawer or anything else that you need.
For this to work, don't forget to add the header: null to the stack navigators, otherwise you'll end up with 2 headers on your screen.
Example below:
<React.Fragment>
<Header
statusBarProps={{ barStyle: 'light-content' }}
barStyle="light-content"
leftComponent={
<SimpleIcon
name="menu"
color="#34495e"
size={20}
/>
}
centerComponent={{ text: 'HOME', style: { color: '#34495e' } }}
containerStyle={{
backgroundColor: 'white',
justifyContent: 'space-around',
}}
/>
</React.Fragment>

Answer 3

This code will display centered the header on each screen of your BottomTabNavigator - MainNavigator
const AppNavigator = createStackNavigator({
Home: {screen: MainNavigator}
},
defaultNavigationOptions: {title: 'Instagram'},
headerLayoutPreset: 'center'
})
const App = createAppContainer(AppNavigator);
export default App;