How can i charge color icon navigation bar @shoutem/ui

Question

I tried to create react native project and UI extends Component of @shoutem/ui, But when i used NavigationBar of @shoutem/ui, i can't change color of content inside NavigationBar, like picture below here, News always got black color, how to change it to White color? Here is my code:

  <NavigationBar
          style={{
            container: {
              position: 'relative',
              width: Dimensions.get('window').width,
            }
          }}
          leftComponent={(
            <TouchableOpacity
              style={{ paddingLeft: 10 }}
              onPress={() => { this.props.navigation.navigate('DrawerOpen'); }}
            >
              <Image
                styleName="small-avatar"
                source={{ uri: 'https://scontent-hkg3-1.xx.fbcdn.net/v/t1.0-1/p160x160/17021999_1653807211588081_745686882439263143_n.jpg?oh=1dc68f938a820a9ccfea09033c0f4e34&oe=5987630B' }}
              />
            </TouchableOpacity>
          )}
          centerComponent={
            <DropDownMenu
              selectedOption={this.state.selectedChannel ?
                this.state.selectedChannel : this.state.channel[0]}
              options={this.state.channel}
              onOptionSelected={(channel) => this.onChoiceChannel(channel)}
              titleProperty="name"
              valueProperty="id"
            />}
        />

And here is my result:

Please help me fix this! Or suggest me someway can resolve it! Thanks you guys so much!

Vladimir Vdović · Accepted Answer · 2017-05-05T05:18:59.067

The text color in NavigationBar is determined by the background color. If the background color is dark enough, NavigationBar will switch it's components to the "light-content", as seen in:

AppName/node_modules/@shoutem/ui/components/NavigationBar.js

function chooseBarStyle(bgColor) {
  return color(bgColor).isDark() ? 'light-content' : 'default';
}

If you want to edit the color manually, you'll have to edit: AppName/node_modules/@shoutem/ui/theme.js

title: {
  fontFamily: 'Rubik-Regular',
  fontStyle: 'normal',
  fontWeight: 'normal',
  fontSize: 20,
  color: '#222222', //edit color here for your Title
}

Edit in response to comment:

The icon color is also edited in:

AppName/node_modules/@shoutem/ui/theme.js

navBarIconsColor: '#222222' //edit this line for your Icon

It work for me, all text inside NavigationBar will change! But when NavigationBar have Button left, right, or dropdownmenu like code above, icon and text alway got dark, cant make light content! So maybe i need to change all inside NavigationBar style? Maybe have someway else to edit color manually? If have please show me! Thanks so much bro! — Chu Việt Hưng, May 03 '17 at 15:13

How can i charge color icon navigation bar @shoutem/ui

1 Answers1