CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
Zhigang
Zhigang

Reputation: 423

how to update activeTintColor for react-navigation tab-navigator dynamically?

I want to update the tab-bar navigator color dynamically, here is my code:

const MyStack = createBottomTabNavigator({ ... }, {
  tabBarOptions: {
    activeTintColor: "green",
  }
});

class CustomNavigator extends React.Component {
  static router = MyStack.router;
  render() {
    const { navigation } = this.props;

    return <MyStack
      navigation={navigation}
      activeTintColor={"red"}
    />;
  }
}

the tab-bar color always "green", and activeTintColor={"red"} not works. I also tried this(not works too):

return <MyStack
          navigation={navigation}
          navigatorOptions={{
              tabBarOptions: {
                  activeTintColor: "red",
              }
          }}
        />

thanks.

Upvotes: 1

Views: 1010

Answers (2)

hong developer
hong developer

Reputation: 13916

Pass the variables to your child..

const MyStack = createBottomTabNavigator({ ... }, {
  tabBarOptions: {[
    {
    activeTintColor: "green",
},
this.props.tabBarOptions
  ]}
});

class CustomNavigator extends React.Component {
  static router = MyStack.router;
  render() {

    return <MyStack
      activeTintColor={"red"}
    />;
  }
}

Upvotes: 1

Junius L
Junius L

Reputation: 16132

You can overwrite the colors with navigationOptions in your screens.

class Home extends React.Component {
  static navigationOptions = {
    tabBarOptions: {
      activeTintColor: 'red', // overwrite the default green color
    },
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>Home</Text>
      </View>
    );
  }
}

Demo

Upvotes: 0

Related Questions