I'm trying to set the background and tint colour of the status bar, and debug it on the iOS simulator. However, neither seem to get applied. I'd like to have it so that the status bar seems like it sits over my screen content. You may wish to skip to the TL;DR at the bottom if it helps.
I've had a look at the following RN docs:
https://reactnavigation.org/docs/en/headers.html
https://reactnavigation.org/docs/en/status-bar.html
And I've had a look through several threads. However, whatever I try, I can't seem to get the status bar appearance working as intended (ref to expected/actual results below).
Here are all the files which may be of relevance.
The Screen base class (all screens use this as the top element in their render methods):
class Screen extends React.Component<Props> {
render() {
const { style, children } = this.props
return (
<SafeAreaView style={[styles.container, style]}>{children}</SafeAreaView>
)
}
}
export default Screen
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: color.neutralL3
}
})
AppNavigator:
const routeConfigMap = {
Loading: { screen: LoadingScreen },
/* other routes */
TabNav: { screen: TabNavigator }
}
const switchConfig = {
initialRouteName: 'Loading',
headerMode: 'none'
}
const AppNavigator = createSwitchNavigator(routeConfigMap, switchConfig)
TabNavigator:
const routeConfigMap = {
/* other routes */
HomeNav: {
screen: HomeNavigator,
/* customNavigationOptions is a highly convoluded function that I will leave out here */
navigationOptions: customNavigationOptions(
'Home',
'ios-person',
[],
({ screenProps: { newFollowerCount } }) => ({
badgeNumber: newFollowerCount
})
)
}
/* other routes */
}
const drawConfig = {
initialRouteName: 'HomeNav',
headerMode: 'none',
tabBarOptions: {
activeTintColor: color.secondary
}
}
const TabNavigator = createBottomTabNavigator(routeConfigMap, drawConfig)
HomeNavigator:
const routeConfigMap = {
Home: { screen: HomeScreen },
/* other routes */
}
const stackConfig: StackNavigatorConfig = {
initialRouteName: 'Home',
headerMode: 'none',
/* Have tried setting navigationOptions here but appearance not applied as intended */
/*navigationOptions: {
title: 'Home',
headerStyle: {
backgroundColor: '#265CA7',
},
headerTintColor: '#ffffff',
headerTitleStyle: {
fontWeight: 'bold',
},
}*/
}
const HomeNavigator = createStackNavigator(routeConfigMap, stackConfig)
HomeScreen:
class HomeScreen extends React.Component<Props> {
// Have tried setting navigationOptions as a static field,
// but the appearance is not applied as intended.
/*static navigationOptions = {
title: 'Home',
headerStyle: {
backgroundColor: '#265CA7',
},
headerTintColor: '#ffffff',
headerTitleStyle: {
fontWeight: 'bold',
},
};*/
get content() {
/* returns content for the screen */
}
render() {
return (
<Screen>
// Have tried the following but again,
// the appearance is not applied as intended.
<StatusBar
barStyle="light-content"
backgroundColor="#265CA7"
/>
{this.content}
</Screen>
)
}
}
TL;DR
Expected/Actual:
I expect the background colour of the status bar to be updated to '#265CA7' (a blue-ish colour) and font colour (of carrier, time, battery meter) to be white. The idea is to make it look like the status bar sits over my content, like so:
However, the actual results suggest that these aren't getting applied. Either there's no change in the status bar appearance or it's rendered with white font on a light grey background, like so (if you look close enough, you can see the faint white text):
How do I get the appearance working as intended?
