NavigationBar keeps overriding my status bar color

[andela-cofor]

<View style={container}>
        <StatusBarComponent backgroundColor='#fff' barStyle="dark-content" />

        <View
          style={{
            width: width / 1.2,
            marginBottom: width / 5,
          }}
        >
          <NavigationBar
            style={{
              zIndex: 1,
              padding: 20
            }}

            leftComponent={
              <Title
                onPress={() => this.openSearchModalForMyLocation()}
              >
                FROM
              </Title>
            }

            centerComponent={
              <Title
                onPress={() => this.openSearchModalForMyDestination()}
              >
                TO
              </Title>
            }

            rightComponent={
              <DropDownMenu
                options={this.state.filters}
                selectedOption={this.state.selectedSlot ? this.state.selectedSlot : this.state.filters[0]}
                onOptionSelected={(filter) => this.setState({ selectedSlot: filter }, () => this.calculatePrice())}
                titleProperty="name"
                valueProperty="value"
                visibleOptions={5}
                vertical
              />
            }
          />
        </View>
</View>

[thecodecafe]

This is a serious issue, has no one any idea what's causing this?

[ckOfor]

I have actually forgotten about the issue @thecodecafe

[thecodecafe]

Just figured a workaround, I had to recreate the NavigationBar component, within my projects source code, it's a terrible idea but it's a temporary fix. Wonder whose idea it was to force a colour and style on the status bar. Sheesh! Will do a PR for this to make it optional.