title: How to initialize Stack navigator?
body: <p>I have a <a href="https://reactnavigation.org/docs/bottom-tab-navigator" rel="nofollow noreferrer">Bottom Tabs Navigator</a> that contains a <a href="https://reactnavigation.org/docs/stack-navigator" rel="nofollow noreferrer">Stack Navigator</a> on each tab.</p>
  <pre><code>const MainNavigator = createBottomTabNavigator&lt;MainRoutes&gt;();
  
  export interface MainNavProps {
    user: User,
    signOut: SignOut
  }
  
  export function MainNav({ user, signOut }: MainNavProps) {
  
    return (
      &lt;MainNavigator.Navigator initialRouteName=&quot;DashboardSection&quot; screenOptions={mainScreenOptions}&gt;
        &lt;MainNavigator.Screen name=&quot;DashboardSection&quot; component={DashboardStack} options={dashboardOptions} /&gt;
        &lt;MainNavigator.Screen name=&quot;HashSection&quot; component={HashStack} options={hashesOptions} /&gt;
        &lt;MainNavigator.Screen name=&quot;AccountSection&quot; component={AccountStack} options={accountOptions} /&gt;
      &lt;/MainNavigator.Navigator&gt;
    )
  }
  </code></pre>
  <p>I want to emphasize here the <code>HashStack</code> Navigator. It consists of two screens, namely:</p>
  <pre><code>const HashNavigator = createStackNavigator&lt;HashRoutes&gt;();
  
  const screenOptions = ({ navigation, route }: HashStackProps): StackNavigationOptions =&gt; {
  
      const pressHandler = () =&gt; navigation.navigate(&quot;Modify&quot;, { title: &quot;modify hashes&quot; });
  
      return {
          ...sectionScreenOptions,
          headerRight: function HeaderLeft() {
              return (
                  route.name === &quot;Index&quot; ?
                      &lt;Button
                          marginR-10
                          iconSource={() =&gt; (
                              &lt;MaterialCommunityIcons name=&quot;plus&quot; color={Colors.primaryDarker} size={28} /&gt;
                          )}
                          style={{ width: 35, height: 35 }}
                          color={Colors.primaryDarker}
                          outline
                          outlineColor={Colors.primaryDarker}
                          onPress={pressHandler}
                      /&gt; : &lt;&gt;&lt;/&gt;
              );
          },
          headerTitle: route.params.title
      }
  }
  
  export function HashStack() {
     
      return (
          &lt;HashNavigator.Navigator initialRouteName=&quot;Index&quot; screenOptions={screenOptions} &gt;
              &lt;HashNavigator.Screen name=&quot;Index&quot; component={Hash} initialParams={{ title: &quot;hashes overview&quot; }} /&gt;
              &lt;HashNavigator.Screen name=&quot;Modify&quot; component={ModifyHash} /&gt;
          &lt;/HashNavigator.Navigator&gt;
      );
  }
  </code></pre>
  <p>To simplify the explanation I recorded a video:</p>
  <p><a href="https://user-images.githubusercontent.com/56756949/137601978-9d3aec89-3732-42a4-834b-b427bc1f73ca.mp4" rel="nofollow noreferrer">https://user-images.githubusercontent.com/56756949/137601978-9d3aec89-3732-42a4-834b-b427bc1f73ca.mp4</a></p>
  <p>When I press the tab <code>Hashtag</code>, which is in the middle of the screen it shows the <code>HashStack</code> component.<br />
  As you can see the <code>headerRight</code> property on the <code>HashStack</code> <code>ScreenOptions</code> is active and it shows a <code>plus</code> button. Clicking on the <code>plus</code> button it navigates to the <code>Modify</code> route within <code>HashStack</code>.
  Then pressing on the tab <code>Dashboard</code>, which is the first <code>Route</code> in the <code>Bottom Tabs Navigator</code> and  press the <code>Hashtag</code> tab again, it does not show the initial route screen, which is:</p>
  <pre><code>&lt;HashNavigator.Screen name=&quot;Index&quot; component={Hash} initialParams={{ title: &quot;hashes overview&quot; }} /&gt;
  </code></pre>
  <p>The question is, how to reset the <code>HashNavigator</code> when another <code>Bottom Tab</code> has been pressed so that the <code>Hashtag</code> tab always shows the initial route <code>Index</code>.</p>