title: How to navigate to another tab's screen using material-bottom-tabs (React Native)?
body: <p>my react native app has a number of screens and my problem is, that I need to access (direct link) to another Tab's screen. So far, when I navigate to another tab's screen, the bottom navigation active index/state doesn't change. How can I achieve to navigate to another tab's screen and correctly set the new screen's bottom navigation icon to active?</p>
  <p><strong>Example:</strong> I use this code on the Dashboard tab and need to change to tab B which hosts screen B. This works so far, but the active state of the material-bottom-tabs doesn't change.</p>
  <pre><code>navigation.navigate( 'screenb_tab' )
  </code></pre>
  <ul>
  <li><strong>Login</strong> (if Login succesfully, go to Main-Area)</li>
  <li><strong>Main</strong> (shows material-bottom-tabs):
  <ul>
  <li><strong>Dashboard</strong></li>
  <li><strong>Screen B</strong>
  <ul>
  <li>has <strong>sub-screen</strong>: BSubScreen</li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  <p>Therefore I setup the following files:
  <strong>App.js</strong></p>
  <pre><code>import * as React from 'react';
  import {NavigationContainer} from '@react-navigation/native';
  import {createStackNavigator} from '@react-navigation/stack';
  import Login from './mainComponents/login/index';
  import BottomTab from './mainComponents/navigation/bottomTab';
  
  const Stack = createStackNavigator();
  
  const App = () =&gt; {
    return (
        &lt;MProvider&gt;
          &lt;NavigationContainer&gt;
            &lt;Stack.Navigator initialRouteName=&quot;Main&quot; headerMode='none'&gt;
              &lt;Stack.Screen name='Login' component={Login} /&gt;
              &lt;Stack.Screen name=&quot;Main&quot; component={BottomTab} /&gt;
            &lt;/Stack.Navigator&gt;
          &lt;/NavigationContainer&gt;
        &lt;/MProvider&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p><strong>bottomTab.js</strong></p>
  <pre><code>// https://reactnavigation.org/docs/material-bottom-tab-navigator/
  import * as React from 'react';
  import Dashboard from '../dashboard/index';
  import {NavigationContainer, useNavigation} from '@react-navigation/native';
  import {createStackNavigator} from '@react-navigation/stack';
  import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
  
  function BottomNavigationConfig(props) {
    const Tab = createMaterialBottomTabNavigator();
    const DashboardStack = createStackNavigator();
    const ScreenBStack = createStackNavigator();
  
  
    function DashboardTab() {
      return  &lt;DashboardStack.Navigator headerMode='none'&gt;
                  &lt;DashboardStack.Screen name=&quot;dashboard&quot; component={Dashboard} /&gt;
                  &lt;DashboardStack.Screen name=&quot;screenb_tab&quot; component={ScreenBTab} /&gt;
               &lt;/DashboardStack.Navigator&gt;
    }
  
    function ScreenBTab() {
      return &lt;ScreenBStack.Navigator headerMode='none'&gt;
                &lt;ScreenBStack.Screen name=&quot;screenb_home&quot; component={ScreenBHome} /&gt;
                &lt;ScreenBStack.Screen name=&quot;screenb_subscreen&quot; component={ScreenBSubscreen} /&gt;
              &lt;/ScreenBStack.Navigator&gt;
    }
  
    return (
      &lt;NavigationContainer independent={true}&gt;
        &lt;Tab.Navigator initialRouteName=&quot;dashboard_tab&quot;&gt;
        &lt;Tab.Screen name=&quot;dashboard_tab&quot; component={DashboardTab} options={ { title: 'Dashboard', tabBarIcon: 'view-dashboard'} } /&gt;
        &lt;Tab.Screen name=&quot;screenb_tab&quot; component={ScreenBTab} options={ { title: 'Screen B', tabBarIcon: 'factory'} } /&gt;
        &lt;/Tab.Navigator&gt;
      &lt;/NavigationContainer&gt;
    );
  }
  
  export default BottomNavigationConfig;
  </code></pre>
  <p>I think I somehow don't get how navigating between tabs and stacks works. I tried to figure this out for 8 hours and had no luck. Thank you so much for your help in advance! </p>