1

I'm trying to set the status bar navigation backgroundcolor inside a renderSectionHeader function:

renderSectionHeader() {
    return (
        <View>
            <StatusBar
              backgroundColor="purple"
              barStyle="light-content"
            />
            <View style={styles.header}>
                <Text style={styles.headerTitle}>Company</Text>
            </View>
        </View>
    )
}

First of all, it doesn't seem like the right place to set StatusBar properties. The barStyle property works though, but backgroundColor is not set. It's transparant & the actual problem is a ListView that scrolls behind the status bar. In this SO question, a UINavigationController is suggested. But I couldn't find a working implementation.

Initial: Status bar initial Scolled: Status bar scrolled

Community
  • 1
  • 1
RobSeg
  • 985
  • 4
  • 14
  • 37

1 Answers1

1

The backgroundColor property is android only see http://facebook.github.io/react-native/releases/0.26/docs/statusbar.html#backgroundcolor .

Maybe try to add a margin top property on the listview with the height of status bar.

tiby
  • 53
  • 6