title: Update tabBarLabel based on state in React Native
body: <p>I have a React Native app with a Navigator. I also have a few screens and a header (common to all screens).</p>
  
  <p>In my header I have a button that toggles the app's language. Passing the language to the Navigator's props I'm able to access it in the screens and translate stuff around.</p>
  
  <p>The only thing I can't change is the <code>tabBarLabel</code> property in the <code>navigationOptions</code> of each screen. </p>
  
  <p>I've tried to simply write:</p>
  
  <pre><code>MyStack1.navigationOptions = {
      tabBarLabel: myGlobalTranslationFunction('MyOriginalLabel1', this.props.screenProps.language)
  };
  </code></pre>
  
  <p>But that didn't work.</p>
  
  <p>As a tree, you can think of App being the root of my app, which has a <code>state.language</code> passed to the Navigator by:</p>
  
  <pre><code>&lt;Navigator screenProps={ {language: this.state.language} }/&gt;
  </code></pre>
  
  <p>In my Navigator.js file, I have, for example:</p>
  
  <pre><code>const MyStack1 = createStackNavigator({
      MyScreen1: MyScreenComponent1,
      MyScreen2: MyScreenComponent2,
      MyScreen3: MyScreenComponent3,
  });
  
  MyStack1.navigationOptions = {
      tabBarLabel: 'MyLabel1'
  };
  
  export default createBottomTabNavigator({
          MyStack1,
          MyStack2
      },
      {
          initialRouteName: 'MyStack1',
          tabBarOptions: {
              showLabel: true
          }
      }
  );
  </code></pre>
  
  <p>I think this problem lies in defining that the labels <strong>depend</strong> on the language prop, but I don't know how to do that. I thought about writing an actual class that extends React.Component for the Navigator, but I'm not sure how someone who do that, since the code above was basically the one I got by following the documentation.</p>