Nativebase: header background colour is not changing in android

[rizwan92]

"react": "16.2.0",
"react-native": "0.53.0",
"react-navigation": "^1.0.3"

Expected behaviour

<Header backgroundColor="#2196F3" androidStatusBarColor="#000000">
header colour change to this #2196F3 colour to its by default colour in android

Actual behaviour

when i press ctrl + s by hot loading header colour changes to this #2196F3 colour. but when i rebuilt my app by giving command react-native run-android header colour comes to its by default colour

Steps to reproduce (code snippet or screenshot)

Screenshot of emulator/device

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

i don't know about ios but in android

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

i don't know

[akhil-geekyants]

@rizwan92 as a workaround, you can specify the color in style prop of header.

 <Header
          style={{ backgroundColor: 'red' }}
          androidStatusBarColor="red">
</Header>

[akhil-geekyants]

@rizwan92 backgroundColor prop of <Header/> will be removed. Use style instead.
This will be documented.

[SupriyaKalghatgi]

https://github.com/GeekyAnts/native-base-docs/issues/81

[raajnadar]

What if I want to set the Header color in all my views??

I tried changing the value in the themes/components/Header.js file
backgroundColor: variables.toolbarDefaultBg

This var is declared in themes/variables/platform.js file so I changed

toolbarDefaultBg: platform === 'ios' ? '#F8F8F8' : '#FFFFFF',
The above code didn't work

But as soon as I replace it with this code it works..
backgroundColor: '#fff',

Why is this happening??

[akhil-geekyants]

@raajnadar checked this. toolbarDefaultBg is working fine for me. Attaching a gif.

Gif

[raajnadar]

See I am testing my app with Expo and my Xperia M android 7.1.1, whenever I try to use variables they don't work but as soon as I hard code them inside the component's JS file they work.

Tried clearing the cache did everything that is stated in the docs but nothing worked. Currently I am setting colors for Header.js file hard coded, due to the hard code the status bar color does not change as per the header color.

[akhil-geekyants]

@raajnadar can you create a test repo for us to check.

[raajnadar]

My bad the NativeBase is right I missed a small thing

Three themes to start with
NativeBase is packed with three preset themes.

Platform: The default theme of NativeBase which maps to the design of the platform where the app runs.
Material: Sometimes, you need Material design for both the platforms. Not everyone is a fan but Google does use Material design on iOS. This theme is not 100% material yet but, it can be used today.
Common Colors: Most of the brands use a common color scheme for both the platforms but they also follow platform specific icons, font and orientation of the components. Common Colors theme is best suited for such use-cases.

I was importing Material.js and making changes in Platform.js file your Gif helped me to understand my mistake.