title: React Native navigating between two screens back & forth
body: <p>I have <strong>Home</strong> screen where we search for an ItemCode, after we search ItemCode it will get details from API &amp;  screen will navigate to <strong>Screen 1</strong>(Item Details Screen) &amp; from Screen 1 we have a search for ItemNutrients and after search it will get Nutrients &amp; Navigate to <strong>Screen 2</strong> (Nutrients Screen)</p>
  <p>In other words</p>
  <p>Home -&gt; Screen 1 (Item Details Screen) -&gt; Screen 2 (Nutrients Screen)</p>
  <p>After getting the necessary details from API from search for Item Details &amp; Nutrients, User can navigate between Item Details &amp; Nutrients back and forth..</p>
  <p>I could navigate from <strong>Screen 1</strong> (item Details) to <strong>Screen2</strong> (Nutrients Screen) and swipe back to <strong>Screen 1</strong> (item Details) but how could I swipe forward to look at <strong>Screen 2</strong> (Nutrients Screen) again without searching for nutrients in <strong>Screen 1</strong> as I already have the data from API for Nutrients.</p>
  <p>Any ideas on how to implement this ? this is basically navigate to <strong>Screen 1</strong> to <strong>Screen 2</strong> on search from Screen 1 or if <strong>Screen 2</strong> search is already done and we have data so swipe forward should navigate to <strong>Screen 2</strong>, I can have a button to navigate to <strong>Screen 2</strong>, the button on Screen 1 conditinally appears only when we have API data  for Nutrients Screen and it will navigate to <strong>Screen 2</strong> on that button click, but i need swipe functionality as well to navigate forward</p>
  <p>I have Home, Screen 1, Screen 2 in stackNavigator, is it alright or i could use any other navigators to achieve this.</p>
  <p>I have researched how to do this and can't find it in the docs anywhere. Please let me know if I am missing it somewhere. Thanks!</p>
  <p>Nutrition Context:</p>
  <pre><code>import React, { createContext, useState, useEffect } from &quot;react&quot;;
  
  export const NutriSyncContext = createContext();
  
  const DEFAULT_IS_NUTRI_SCANNED = false;
  
  export const NutriSyncContextProvider = ({ children }) =&gt; {
    const [isNutritionScanned, setisNutritionScanned] = useState(
      DEFAULT_IS_NUTRI_SCANNED
    );
  
    // When we first mount the app we want to get the &quot;latest&quot; conversion data
    useEffect(() =&gt; {
      setisNutritionScanned(DEFAULT_IS_NUTRI_SCANNED);
    }, []);
  
    const nutrionScanClick = ({ navigation }) =&gt; {
      setisNutritionScanned(true);
      //navigation.navigate(&quot;NutritionFacts&quot;);
    };
  
    const contextValue = {
      isNutritionScanned,
      setisNutritionScanned,
      nutrionScanClick,
    };
  
    return (
      &lt;NutriSyncContext.Provider value={contextValue}&gt;
        {children}
      &lt;/NutriSyncContext.Provider&gt;
    );
  };
  </code></pre>
  <p>inside navigation.js</p>
  <pre><code>const tabPNMS = createMaterialTopTabNavigator();
  
  function tabPNMSStackScreen() {
    const { isNutritionScanned } = useContext(NutriSyncContext);
    console.log(isNutritionScanned);
  
    return (
      &lt;tabPNMS.Navigator initialRouteName=&quot;PNMSNutrition&quot; tabBar={() =&gt; null}&gt;
        &lt;tabPNMS.Screen name=&quot;PNMSNutrition&quot; component={PNMSNutrition} /&gt;
        {isNutritionScanned ? (
          &lt;tabPNMS.Screen name=&quot;NutritionFacts&quot; component={NutritionFacts} /&gt;
        ) : null}
      &lt;/tabPNMS.Navigator&gt;
    );
  }
  </code></pre>
  <p>and In stack Navigation:</p>
  <pre><code>const SearchStack = createStackNavigator();
  const SearchStackScreen = () =&gt; (
    &lt;NutriSyncContextProvider&gt;
      &lt;SearchStack.Navigator
        initialRouteName=&quot;Search&quot;
        screenOptions={{
          gestureEnabled: false,
          headerStyle: {
            backgroundColor: &quot;#101010&quot;,
          },
          headerTitleStyle: {
            fontWeight: &quot;bold&quot;,
          },
          headerTintColor: &quot;#ffd700&quot;,
          headerBackTitleVisible: false, //this will hide header back title
        }}
        headerMode=&quot;float&quot;
      &gt;
        &lt;SearchStack.Screen
          name=&quot;Search&quot;
          component={Search}
          options={({ navigation }) =&gt; ({
            title: &quot;Search&quot;,
            headerTitleAlign: &quot;center&quot;,
            headerLeft: () =&gt; (
              &lt;Entypo
                name=&quot;menu&quot;
                size={24}
                color=&quot;green&quot;
                onPress={() =&gt; navigation.dispatch(DrawerActions.toggleDrawer())}
              /&gt;
            ),
          })}
        /&gt;
        &lt;SearchStack.Screen
          name=&quot;NutriTabs&quot;
          options={() =&gt; ({
            title: &quot;PNMS&quot;,
            headerTitleAlign: &quot;center&quot;,
          })}
          component={tabPNMSStackScreen}
        /&gt;
      &lt;/SearchStack.Navigator&gt;
    &lt;/NutriSyncContextProvider&gt;
  );
  </code></pre>
  <p>I have NutriSyncContextProvider around the stack, but when I click the button on my page it will call nutrionScanClick method in context class it works just fine but when i do navigation.navigate to the NutritionFacts tab that is enabled i get error saying NutritionFacts tab doesn't exist</p>
  <p>I got it working below is the code:</p>
  <pre><code> const nutrionScanClick = () =&gt; {
      if (!isNutritionScanned) setisNutritionScanned(true);
      else {
        //Make a API call here for new data for the new scanned one's and then navigate
        navigation.navigate(&quot;NutritionFacts&quot;);
      }
    };
  
    useEffect(() =&gt; {
      if (isNutritionScanned) {
        navigation.navigate(&quot;NutritionFacts&quot;);
      }
    }, [isNutritionScanned]);
  </code></pre>