Header is empty after react-navigation updated to v2 - react-native

Question

After updating react-navigation package of my react-native project from 1.5.8 to 2.0.1 my header became empty on all tabs of TabNavigator. On other screens it works as before.
Example of tab Dashboard:
class Dashboard extends PureComponent {
static navigationOptions = ({ navigation }) => {
return {
title: strings.dashboard_header_title,
headerLeft: renderMenu(navigation)
};
};
...
}
export default connect((state, ownProps) => {
...
})(Dashboard);
const renderMenu = navigation => {
return <ImageButton
style={styles.padding}
imageStyle={styles.tintWhite}
image={require('../../../res/images/menu.png')}
onPress={navigation.state.params && navigation.state.params.toggleSideMenu}/>
}
It worked with old version of react-navigation. I use react-redux and tab navigator inside stack navigator.
TabNavigator:
const routeConfig = {
Dashboard: {
screen: Dashboard,
resource: 'dashboard',
navigationOptions: { tabBarIcon: ({tintColor}) => <Image style={{tintColor}} source={require('../../../res/images/tab-dashboard.png')}/> }
},
...
};
const drawConfig = {
lazy: false,
animationEnabled: false,
swipeEnabled: false,
tabBarPosition: 'bottom',
tabBarOptions: {
upperCaseLabel: false,
activeBackgroundColor: 'white',
activeTintColor: colors.main,
inactiveTintColor: colors.normal,
showIcon: true,
style: {
height: 48,
backgroundColor: 'white',
borderTopColor: colors.border,
borderTopWidth: values.borderWidth,
elevation: 0
},
labelStyle: {
fontSize: 11,
marginBottom: 0
},
tabStyle: {
padding: 3,
paddingTop: Platform.OS === 'android' ? 4 : 3
},
indicatorStyle: {
height: 0,
width: 0
}
}
}
const InnerTabNavigator = createBottomTabNavigator(routeConfig, drawConfig);
class TabBarNavigator extends PureComponent
{
...
render() {
return (
<InnerTabNavigator
{...this.props.ownProps}
navigation={{
...this.props.navigation,
state: this.state
}}
/>
);
}
...
}
TabBarNavigator.router = InnerTabNavigator.router;
MainNavigator:
const MainNavigatorInner = createStackNavigator({
...
TabBarNavigator: { screen: TabBarNavigator },
...
}, {
initialRouteName: 'SignIn',
headerMode: 'screen',
navigationOptions: ({ navigation }) => {
return {
headerTintColor: 'white',
headerTitleStyle: styles.headerTitle,
headerStyle: {
backgroundColor: colors.main,
shadowColor: 'transparent',
elevation: 0,
borderBottomWidth: values.borderWidth,
borderBottomColor: colors.borderHeader,
height: values.headerHeight
},
};
},
cardStyle: {
backgroundColor: colors.background
}
});
export default class MainNavigator extends PureComponent {
...
render() {
return (
...
<MainNavigatorInner
ref='navigation'
screenProps={this.screenProps}
onNavigationStateChange={this._onNavigationStateChange}/>
...
);
}
...
}

Answer 1

I had the same issue yesterday when I updated my react-navigation too. I know that this is not optimal but try adding the tabBarIcon in your drawconfig:
const drawConfig = {
lazy: false,
animationEnabled: false,
swipeEnabled: false,
tabBarPosition: 'bottom',
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) => {
const { routeName } = navigation.state;
let icon;
if (routeName === "SomeRouteName") {
icon = require("src/assets/someFile");
} else if (routeName === "Some other route name") {
if (focused) {
icon = require("src/assets/someFile.png");
} else {
icon = require("src/assets/someFile.png");
}
}
return <Image source={icon} style={{ width: 30, height: 30 }} />;
}
}),
tabBarOptions: {
upperCaseLabel: false,
activeBackgroundColor: 'white',
activeTintColor: colors.main,
inactiveTintColor: colors.normal,
showIcon: true,
style: {
height: 48,
backgroundColor: 'white',
borderTopColor: colors.border,
borderTopWidth: values.borderWidth,
elevation: 0
},
labelStyle: {
fontSize: 11,
marginBottom: 0
},
tabStyle: {
padding: 3,
paddingTop: Platform.OS === 'android' ? 4 : 3
},
indicatorStyle: {
height: 0,
width: 0
}
}
}

Answer 2

I had same ıssue too my solution is added my stacknavigator
headerMode: 'auto' property, I using expo template and RootNavigation file is added headerMode: 'auto' too, it worked for me,
Roote navigation like this =>
const RootStackNavigator = createStackNavigator(
{
Main: {
screen: MainTabNavigator,
},
},
{
navigationOptions: () => ({
headerTitleStyle: {
fontWeight: 'normal',
},
}),
headerMode: 'auto'
}
);