Header not showing with createBottomTabNavigator - React NAtive - react-native

Question

I am creating a very simple tab navigation with two screens. I want to show a header on top of each screen. I am running the following code, but I don't see any header. The header just does not appear.
I am using react-navigation#3.11.1, I tried reverting back to 3.10.0 and even 3.0.0 and still don't see the headers. So I am assuming it's not a bug in react-navigation.
Update: This is the expected behavior. See: https://github.com/react-navigation/react-navigation/issues/6149
import React, {Component} from 'react';
import { View, Text } from 'react-native';
import { createAppContainer, createBottomTabNavigator } from 'react-navigation';
class MusicScreen extends Component {
static navigationOptions = {
title: 'Musiiic',
};
render() {
return (
<View >
<Text>Music Screen</Text>
</View>
);
}
}
class MoviesScreen extends Component {
static navigationOptions = {
headerTitle: 'Movies',
};
render() {
return (
<View>
<Text>Movies Screen</Text>
</View>
);
}
}
const MainNavigation = createBottomTabNavigator({
Music : {
screen: MusicScreen,
navigationOptions: ({navigation}) => ({
title: 'Music',
headerTitle: <Text>MUSIICCCC</Text>,
})
},
Movies : {
screen: MoviesScreen,
navigationOptions: {
title: 'Movies',
},
},
},
{
headerMode: 'screen',
navigationOptions: {
headerVisible: true,
},
}
);
export default createAppContainer(MainNavigation);

Answer 1

Can you try like the following?
eg:
...
...
class MusicScreen extends Component {
static navigationOptions = {
title: 'MUSIICCCC',
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
};
render() {
return (
<View >
<Text>Music Screen</Text>
</View>
);
}
}
...
...
const MainNavigation = createBottomTabNavigator({
Music : MusicScreen,
Movies MoviesScreen,
},
{
initialRouteName: 'Music',
}
);
export default createAppContainer(MainNavigation);

Answer 2

Try cleaning up your createBottomTabNavigator like so by removing any header data.
const MainNavigation = createBottomTabNavigator({
Music : {screen: MusicScreen},
Movies : {screen: MoviesScreen},
}
);
Add navigationOptions to each screen individually.
class MusicScreen extends Component {
static navigationOptions = {
title: 'Musiiic',
};
render() {
return (
<View >
<Text>Music Screen</Text>
</View>
);
}
}
class MoviesScreen extends Component {
static navigationOptions = {
title: 'Movies',
};
render() {
return (
<View>
<Text>Movies Screen</Text>
</View>
);
}
}
Here are some docs [https://reactnavigation.org/docs/en/headers.html]

Answer 3

Could you try this?
import React, {Component} from 'react';
import { View, Text } from 'react-native';
import { createAppContainer, createBottomTabNavigator } from 'react-navigation';
class MusicScreen extends Component {
render() {
return (
<View >
<Text>Music Screen</Text>
</View>
);
}
}
class MoviesScreen extends Component {
render() {
return (
<View>
<Text>Movies Screen</Text>
</View>
);
}
}
const MainNavigation = createBottomTabNavigator({
Music : {
screen: MusicScreen,
navigationOptions: {
title: "Music"
}
},
Movies : {
screen: MoviesScreen,
navigationOptions: {
title: 'Movies',
},
},
},
{
headerMode: 'screen'
}
);
export default createAppContainer(MainNavigation);