NativeBase Themes are Overriding StatusBar props

Created on 29 Apr 2017  路  7Comments  路  Source: GeekyAnts/NativeBase

react-native, react and native-base version

"native-base": "2.1.0",
"react": "~15.4.0-rc.4",
"react-native": "0.40.0",

Expected behaviour

The functions here : (https://facebook.github.io/react-native/docs/statusbar.html)[https://facebook.github.io/react-native/docs/statusbar.html] are being overwritten by NativeBase's theme for StatusBar

Actual behaviour

should override the NativeBase settings for the StatusBar

Steps to reproduce (code snippet or screenshot)

<StatusBar
backgroundColor="#c0c0c0"
barStyle="light-content"
translucent={false}
/>

Is the bug present in both ios and android or in any one of them?

Tried on Android only.

Any other additional info which would help us debug the issue quicker.

Was working in 0.5.X but isn't working on 2.X

Most helpful comment

@AbhishekBiswal you can pass the below props
iosStatusbar="light-content"
androidStatusBarColor='#000'
in header will work for you .

All 7 comments

@AbhishekBiswal you can pass the below props
iosStatusbar="light-content"
androidStatusBarColor='#000'
in header will work for you .

@GeekRishabh Worked! Please add this to the Documentation. Thanks!

iosStatusbar="dark-content" has no effect on the color of the statusbar text in android

@GeekRishabh I passed androidStatusBarColor='#000' prop to <Header> component (imported from nativebase) and it has no effect.

    "expo": "^19.0.0",
    "native-base": "^2.3.0",
    "react": "16.0.0-alpha.12",
    "react-native": "^0.46.1"

@kunokdev #899

@AbhishekBiswal you can pass the below props
iosStatusbar="light-content"
androidStatusBarColor='#000'

this works for android.. where as in ios text color changed to light.. but background color didn't change

As passing in props wasn't working for me either, the last comment in shivraj's link worked perfectly, and I no longer have to add padding to account for the status bar.
{ "expo": { "androidStatusBar": { "backgroundColor": "#000000" } } }

Was this page helpful?
0 / 5 - 0 ratings