title: Get the current active screen route of the tab navigator in react navigation
body: <p>This is my navigation stack using react navigation <em>v3.2.1</em>:</p>
  
  <ol>
  <li><p>I have a switch navigator to switch to Authentication navigation stack and Authenticated App stack.</p></li>
  <li><p>The App stack is made using a bottom tab navigator.</p></li>
  <li><p>I would like to use a custom component for the tab navigator.</p></li>
  </ol>
  
  <p>How do I get the current routeName of the tab navigator when using <code>createBottomTabNavigator</code> and a custom <code>tabBarComponent</code>.</p>
  
  <p>Eg:</p>
  
  <ol>
  <li>Suppose the tab navigation stack has 2 navigation screens, i.e., Home and Chat.</li>
  <li>Inside the custom BottomBar, how do I check if the focused/active/current routeName is Home/Chat so that I can change the style of icons respectively?</li>
  </ol>
  
  <p>AppContainer.js</p>
  
  <pre><code>const switchStack = createSwitchNavigator({
      AuthLoading: AuthLoadingScreen,
      App: AppStack,
      Auth: AuthStack
  }, {
      initialRouteName: 'AuthLoading',
  })
  
  export default createAppContainer(switchStack)
  </code></pre>
  
  <p>AppStack.js</p>
  
  <pre><code>const AppStack = createBottomTabNavigator({
      Home: {
          screen: HomeStack,
      },
      Chat: {
          screen: ChatStack
      },
  }, {
      initialRouteName: 'Home',
      activeColor: '#f0edf6',
      inactiveColor: '#3e2465',
      shifting: false,
      barStyle: {
          backgroundColor: '#694fad',
      },
      labeled: false,
      tabBarComponent: ({navigation}) =&gt; &lt;BottomBar navigation={navigation}/&gt;
  })
  
  export default AppStack
  </code></pre>
  
  <p>BottomBar.js</p>
  
  <pre><code>export default class BottomBar extends React.Component {
      constructor(props) {
          super(props)
      }
  
      render() {
          return (
              &lt;View style={styles.container}&gt;
                  &lt;IconComponent routeName={'Home'}/&gt;
                  &lt;IconComponent routeName={'Chat'}/&gt;
              &lt;/View&gt;
          )
      }
  }
  </code></pre>
  
  <p>IconComponent.js</p>
  
  <pre><code>export default class IconComponent extends React.Component {
      constructor(props) {
          super(props)
      }
  
      ...
  
      render() {
          let IconComponent
          let iconName
          let iconSize = 25
          switch (this.props.routeName) {
              case 'Home':
                  IconComponent = MaterialCommunityIcons
                  // iconName = `home${focused ? '' : '-outline'}`;
                  iconName = `home`;
                  break
              case 'Chat':
                  IconComponent = AntDesign
                  iconName = `message1`
                  iconSize = 22
                  break
          }
  
          let tintColor = 'green'
  
          // if focused Home is current tab screen then change style eg. tint color.
          // similary if current tab screen is Chat, then change style.
  
          return (
                  &lt;Animated.View
                      style={[
                          styles.container,
                          {
                              opacity: this.opacity
                          }
                      ]}
                  &gt;
                      &lt;IconComponent name={iconName} size={iconSize} color={tintColor}/&gt;
                  &lt;/Animated.View&gt;
          )
      }
  }
  </code></pre>