Remove header specific page - react-native

Question

I have the following page setup in App.js
StackNavigator({
MyTab: {
screen: TabNavigator({ }),
navigationOptions: { title: 'Header title' }
}
})
Bottom tab navigator with 4 screens in it: Home, Search, Card and Account. This tab navigator is inside stack navigator since i will be needing stack navigator to open other screens inside these pages.
In my case I don't need header in the Home page inside tab navigator. But according to this code every page inside tab navigator will have header. How can I achieve this?
Complete code flow is this.
App.js
import HomeScreen from './src/pages/HomeScreen';
import SearchScreen from './src/pages/SearchScreen';
import CartScreen from './src/pages/CartScreen';
import AccountScreen from './src/pages/AccountScreen';
const BottomTabNavigator = createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
},
Search: {
screen: SearchScreen,
},
Cart: {
screen: CartScreen,
},
Account: {
screen: AccountScreen,
},
},
{
defaultNavigationOptions: ({navigation}) => ({
tabBarIcon: ({focused, tintColor}) => {
const {routeName} = navigation.state;
return (
<Image
style={styles.iconSize}
source={require('./src/assets/img/icon.png')}
/>
);
},
}),
tabBarPosition: 'bottom',
tabBarOptions: {
style: {
backgroundColor: '#fff',
},
showLabel: false,
indicatorStyle: {
backgroundColor: 'red',
},
},
animationEnabled: true,
swipeEnabled: false,
},
);
const HomeStackNavigator = createStackNavigator(
{
HomeStack: {
screen: BottomTabNavigator,
},
},
{
headerBackTitleVisible: false,
},
);
export default createAppContainer(HomeStackNavigator);
HomeScreen.js
import React, {Component} from 'react';
import {View, Text} from 'react-native';
export default class HomeScreen extends Component {
static navigationOptions = {
header: null,
};
render() {
return (
<View>
<Text> HomeScreen </Text>
</View>
);
}
}

Answer 1

Just add static navigationOptions in your code just anywhere in the code except inside any method like render or componentDidMount, it will work
export default class Home extends Component {
static navigationOptions = {
header: null
}
}

Answer 2

UPDATE:
Try to update your parent stack
const HomeStackNavigator = createStackNavigator(
{
HomeStack: {
screen: BottomTabNavigator,
},
},
{
headerBackTitleVisible: false,
headerMode: 'none',
},
);
Old answer
Try below
export default class Home extends React.Component {
static navigationOptions = () => {
const navigationOptions = {
header: null,
headerMode: 'none',
};
return navigationOptions;
};
}