Default React Native header not going away on screen - react-native

Question

I have a screen that is known as the Settings Screen and I don't want the default React Native header to be present on that screen, but it is. Here is the (applicable) code I have for the screen so far:
export default class SettingsScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
address: "",
}
this.getStore();
}
async getStore() {
try {
const secretsInCache = await AsyncStorage.getItem('data');
const jsonData = JSON.parse(secretsInCache);
this.setState({address: jsonData.base_info.address});
} catch (e) {
console.log(e);
}
}
static navigationOptions = {
header: null,
};
render() {
return (
<PageTemplate headerText='Settings' navBar='true' needsFocus='More'>
<View style={{width: '100%', height: '100%', alignItems: 'center'}}>
<HomeScreenContainer>
<View style={styles.firstContainerSeperation}>
<Text style={styles.firstContHeading}>Service Address:</Text>
<Text style={styles.textInFirstBox}>{this.state.address}</Text>
</View>
<View style={styles.straightLine} />
</HomeScreenContainer>
</View>
</PageTemplate>
);
}
}
And here is the Tab navigator code:
const SettingsStack = createStackNavigator({
Settings: {
screen: SettingsScreen,
headerMode: 'none',
mode: 'modal'
}
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
});
const MoreStack = createStackNavigator({
More: {
screen: MoreScreen,
mode: 'modal',
headerMode: 'none',
},
SettingsStack
});
MoreStack.navigationOptions = {
headerVisible: false,
tabBarVisible: false,
tabBarLabel: 'More',
tabBarIcon: <TabBarIcon source={require('../assets/icons/more.png')}/>,
};
As you can see, in multiple places I'm declaring the headerMode as either null or none, but there is still the default header popping up?
How can I get rid of the default React Native header in my Settings Screen?

Answer 1

Try this:
const SettingsStack = createStackNavigator({
Settings: {
screen: SettingsScreen,
navigationOptions: {
title: ' ',
headerBackTitle: ' ',
headerStyle: {
elevation: 0,
borderBottomWidth: 0,
backgroundColor: colors.white
}
}
}
})
And delete this of your SettingsScreen class:
static navigationOptions = {
header: null,
};

Answer 2

The most straightforward way is to set the header on static navigationOptions to null. I have downloaded the Playground example from React Navigation GitHub project and tested just that. The header disappeared.
Your Tab navigation code should look something like this:
const SettingsStack = createStackNavigator({
Settings: {
screen: SettingsScreen
},
More: {
screen: MoreScreen
},
}, {});
MoreStack.navigationOptions = {
headerVisible: false,
tabBarVisible: false,
tabBarLabel: 'More',
tabBarIcon: <TabBarIcon source={require('../assets/icons/more.png')}/>,
};
Make sure you're not having any real time building problems when you ctrl+s.

Answer 3

try to do in this way
`const SettingsStack = createStackNavigator({
Settings: { screen: SettingsScreen }
}, {
navigationOptions: {
header: null
}
})`
`const MoreStack = createStackNavigator({
More: { screen: MoreScreen }
}, {
navigationOptions: {
header: null
}
})`
`const MainStack = creatSwitchNavigatore({
SettingsStack : SettingsStack,
MoreStack : MoreStack
})