Search code examples
react-nativeshoutem

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

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:

enter image description here

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

Solution

  • 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