Unable to set active icon and label style in BottomNavigation.Action

[jelmarose]

When using <BottomNavigation.Action />, the only style property working is container. How do I set the style properties of active and disabled?

<BottomNavigation.Action
              key="today"
              icon={<FontAwesome name='bell' size={25} />}
              label="Alerts"
              onPress={() => this.setState({ active: 'alert' })}
              style={{
                container:{
                  backgroundColor: 'red'
                },
                active:{
                  color: '#AC8E49',
                }
              }}
          />

The component rendered has a red background but the icon style is not colored.

[ManishAhire]

I have some problem.

Code :-

<BottomNavigation.Action
          style={{
                active: {
                   color: "green"
                 }
            }}
            key="today"
            icon="today"
            label="Today"
            onPress={() => this.setState({ active: "today" })}
 />

Result :-

[harikanammi]

hi, active color property is not working for me:-

Code:- <BottomNavigation.Action key="today" icon="today" label="Today" active={this.state.active} onPress={() => this.setState({ active: "today" })} style={{ container: { backgroundColor: "lightblue" }, active: { color: "green" } }} />

Result:-

[Kich-kichi]

If you'll check BottomNavigationAction class, you'll see, that active and disabled style properties are not assigned to the label and icon.

BottomNavigation.Action with changing icon and label colors should look like this:

<BottomNavigation.Action
      key="people"
      icon="people"
      label="People"
      style={{
          container: {
               backgroundColor: '#054B81',
           },
          icon: {color: '#FFFFFF'},
          label: {color: '#FFFFFF'},
      }}
      onPress={() => this.setState({active: 'people'})}
/>

[dushyanttessact]

Same problem, any update on this?

[Kich-kichi]

@dushyanttessact, check my reply above.

[dushyanttessact]

@Kich-kichi Hey, thanks for the quick reply. but what i'm looking for is different, i just want to change the icon and label color when active. Like in default view, the color changes white to blue when clicked. will try to update css part onPress fn. might work.

[dushyanttessact]

This works,

<BottomNavigation.Action
                    key="Movies"
                    icon={movieIcon}
                    style={{
                        icon: {color: this.state.activeBottomNavScreen === "Movies" ? "#fdbd32" : "#7ccced"},
                        label: {color: this.state.activeBottomNavScreen === "Movies" ? "#fdbd32" : "#7ccced"},
                    }}
                    label="Movies"
                    onPress={this.setBottomNavScreen.bind(this,"Movies")}
                />