Nativebase: Header background not updating when theme is recalculated with a different toolbarDefaultBg color.

Created on 5 Aug 2017 · 8Comments · Source: GeekyAnts/NativeBase

react-native, react and native-base version

react-native: using the expo fork. https://github.com/expo/react-native/archive/sdk-19.0.0.tar.gz
react: 16.0.0-alpha.12
native-base: 2.3.0

Expected behaviour

Header background color will change when toolbarDefaultBg is a different value when a new theme is passed to StyleProvider.

Actual behaviour

Background color is not updated.

Before toolbarDefaultBg update
After toolbarDefaultBg update

Steps to reproduce (code snippet or screenshot)

Here's some minimal code. You can find the repo here

function StyleComponent({ children, themeName }) {
  const theme = Object.assign({}, Default, Custom[themeName]);
  return <StyleProvider style={GetTheme(theme)} children={children} />;
}

function mapState({ settings }) {
  return {
    themeName: settings.theme
  };
}

export default connect(mapState)(StyleComponent);

Screenshot of emulator/device

Look above! :)

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

I've only tried on iOS.

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

No. I'm going to fork and attempt to submit a PR.

duplicate

Source

mini-eggs

👍1

Most helpful comment

Same error on Android.
Sample Code:
<Header backgroundColor="#00AA8D" androidStatusBarColor='#008975'> <Left> <Button transparent> <Icon name='menu' /> </Button> </Left> <Body> <Title>Home</Title> </Body> <Right> <Button transparent > <Icon name='person' /> </Button> </Right> </Header>

Expected backgroundColor "#00AA8D"
Actual backgroundColor "blue" (default)

naviens on 19 Aug 2017

👍4

All 8 comments

Update from cardDefaultBg to toolbarDefaultBg, oops!

mini-eggs on 5 Aug 2017

Expected backgroundColor "#00AA8D"
Actual backgroundColor "blue" (default)

naviens on 19 Aug 2017

👍4

@naviens There is no prop as backgroundColor for Header.

shivrajkumar on 11 Sep 2017

👎1 👍1

910

shivrajkumar on 11 Sep 2017

@shivrajkumar: The documentation says that backgroundColor is a property of header: http://docs.nativebase.io/Components.html#header-def-headref

IMO, issue needs to be reopened since Im still facing it.