Statusbar Color won't change on iOS

Question

I'm trying to color my statusbar, but on the iOS version it won't change it's color. This is the code I have:

render(){
return(
  <View>
    <StatusBar backgroundColor="#553A91" barStyle="dark-content" />
    <List containerStyle={{borderTopWidth: 0, borderBottomWidth: 0}}>
    <FlatList
    data={this.state.data}
    renderItem={({item})=>(
      <ListItem
      roundAvatar
      title={`${item.name.first} ${item.name.last}`}
      subtitle={item.location.city}
      avatar={{uri: item.picture.thumbnail}}
      containerStyle={{borderBottomWidth: 0}}
      />
    )}
    keyExtractor={item=>item.email}
    ItemSeparatorComponent={this.renderSeparator}
    ListHeaderComponent={this.renderHeader}
    />
    </List>
  </View>
);

};

This is how it looks like:

How can I change the background color of my statusbar?

Possible duplicate of [How to set iOS status bar background color in React Native?](https://stackoverflow.com/questions/39297291/how-to-set-ios-status-bar-background-color-in-react-native) — Dan, Jul 21 '17 at 14:47

score 0 · Answer 1 · answered Jul 21 '17 at 14:54

0

The background color of the status bar can only be change on Android. On iOS you can only change barStyle prop.

The statusBar is transparent on iOS. You could had a View with height: 20 behind your statusBar and change the background color if you want to simulate it.

But iOS apps usually do not have a different color for the status bar.

answered Jul 21 '17 at 14:54

Antoine Grandchamp

7,195
3
28
34

Thank you, I will try to do so. – John Doah Jul 21 '17 at 16:00

Statusbar Color won't change on iOS

1 Answers1