title: Modify the value of the Tab Bar from a component (react-navigation 6)
body: <p>I am trying to implement a color customization feature in my React Native app.</p>
  <p>I store two values, the main color and the secondary color, with AsyncStorage. Whenever I load a component, I call a function within <code>ComponentDidMount()</code> that get the two values and update the State (my State have <code>mainColor</code> and <code>secondaryColor</code> set to <code>undefined</code> by default, and then it gets updated with the new values), and my screen components are rendered with the right colors. This part of the code is working perfectly fine, but I put it here for you to have a little bit of context. (feel free to tell my if you think this is inefficient, or if you know a better way)</p>
  <p>My problem was that I also had a header button, with an icon, and I wanted the icon's color to be what's defined by the value <code>mainColor</code> stored with AsyncStorage.</p>
  <p>My header button is defined inside my App.js file, which manage all the navigation system (I'm using React Navigation 6) :</p>
  <pre><code>// App.js
  
  import { StatusBar } from 'expo-status-bar';
  import React from &quot;react&quot;;
  import { StyleSheet, Image, TouchableOpacity } from &quot;react-native&quot;;
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  
  import Counter from './components/Counter.js';
  import AddCounter from './components/AddCounter.js';
  
  // Translation module
  import * as Localization from 'expo-localization';
  import i18n from 'i18n-js';
  import { en, fr } from './i18n/supportedLanguages';
  i18n.fallbacks = true;
  i18n.translations = { en, fr };
  i18n.locale = Localization.locale;
  
  const Stack = createStackNavigator();
  const Tab = createBottomTabNavigator();
  
  
  // All components managed by TabBar
  function TabBar() {
    return (
      &lt;Tab.Navigator
        screenOptions={ ({route}) =&gt; ({
          tabBarActiveBackgroundColor: &quot;#DDDDDD&quot;,
          tabBarInactiveBackgroundColor: &quot;#FFFFFF&quot;,
          tabBarShowLabel: false,
          tabBarShowIcon: true
        })}&gt;
        &lt;Tab.Screen
          name=&quot;CounterTab&quot;
          component={Counters}
          options= {{
            headerShown: false,
            tabBarIcon: () =&gt; {
              return (
                &lt;Image
                  tintColor=&quot;#000000&quot;
                  source={require(&quot;./assets/add_counter.png&quot;)}
                  style={styles.icon}
                /&gt;
              )
            }
          }} /&gt;
      &lt;/Tab.Navigator&gt;
    )
  }
  
  // Everything inside the &quot;Counter&quot; tab, which should display the tab bar
  function Counters() {
    return (
      &lt;Stack.Navigator&gt;
        &lt;Stack.Screen
          name=&quot;Counter&quot;
          component={Counter}
          options={({navigation}) =&gt; ({
            title: i18n.t('counters.header_text'),
            headerRight: () =&gt; (
              &lt;TouchableOpacity
                style={styles.add_counter_header}
                onPress={() =&gt; navigation.navigate('AddCounter')}&gt;
  
                &lt;Image
                  style={styles.add_counter_button}
                  tintColor=&quot;#000000&quot;                // &lt;- THE VALUE I WANTED TO BE CUSTOMIZABLE
                  source={require(&quot;./assets/add_counter.png&quot;)}/&gt;
  
              &lt;/TouchableOpacity&gt;
            )
          })} /&gt;
      &lt;/Stack.Navigator&gt;
    )
  }
  
  export default function App() {
    return (
      &lt;NavigationContainer&gt;
        &lt;Stack.Navigator&gt;
  
          {/*TabBar display*/}
  
          &lt;Stack.Screen
            name=&quot;TabBar&quot;
            component={TabBar}
            options={{
              headerShown: false
            }} /&gt;
  
          {/*FROM HERE : every screen that shouldn't display the TabBar*/}
  
          &lt;Stack.Screen
            name=&quot;AddCounter&quot;
            component={AddCounter}
            options={{
              title: i18n.t('add_counters.header_text'),
              tabBarStyle: { display: 'none' }
            }} /&gt;
  
        &lt;/Stack.Navigator&gt;
      &lt;/NavigationContainer&gt;
    )
  }
  
  const styles = StyleSheet.create({
    icon: {
      width: 30,
      height: 30,
    },
    add_counter_header: {
      marginRight: 10
    },
    add_counter_button: {
      height: 26,
      width: 26
    }
  });
  </code></pre>
  <p>I first thought I should try to get the value of <code>mainColor</code>, and then render the app, but I didn't managed to make it work, so I documented myself and found another approach : I load the App with a default color for the header icon (in that case &quot;#000000&quot;), and then I modify it from the Counter component, once the value has been retrieved.</p>
  <p>Here is what I did :</p>
  <pre><code>// Counter.js, the screen that is first rendered when the app launch, and that have an header button
  
  componentDidMount() {
  
      ( async () =&gt; {
  
        await this._getColors() // this function updates the state with the color values
        this.props.navigation.setOptions({
          headerRight: () =&gt; (
            &lt;TouchableOpacity
              style={styles.add_counter_header}
              onPress={() =&gt; navigation.navigate('AddCounter')}&gt;
  
              &lt;Image
                style={styles.add_counter_button}
                tintColor={this.state.mainColor}  // &lt;- I set the color of the header button here
                source={require(&quot;../assets/add_counter.png&quot;)}/&gt;
  
            &lt;/TouchableOpacity&gt;
          )
        });
  
      })()
  }
  </code></pre>
  <p>Again, this is working fine, I have the header button with the color I defined as <code>mainColor</code> : <a href="https://i.stack.imgur.com/rjimT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rjimT.jpg" alt="enter image description here" /></a></p>
  <p>There is one last thing I want to do : it's to customize the color of the TabBar's icon the same way I did with the Header Button. And this is where I have my problem : I have no clue about how to access it from my component, and the only things I found on internet that were responding to a similar problem are outadated. Does somebody have any idea on how I could do ?</p>
  <p>I'm sorry if my question isn't formulated right, it's one of the first I'm posting on this website. Feel free to advise my about how to post a good question if necessary. If you see something horrible in my code (something that is coded horribly wrong) don't hesitated to tell me as well, I'm a newbie at React Native.</p>
  <p>Thank you for reading this :)</p>