title: Context hook interfares with React Navigation routing
body: <p>My React Native (0.61.5)/React 16.9.0 app has nested 3 layer react navigation (5.x) routing structure like below:</p>
  
  <pre><code>App.js (NavigationContainter/StackNavigator)
      SplashScreen.js
      AppScreen.js (TabNavigator)
         EventStackScreen.js (StackNavigator)
           Event.js (screen)
           Chat.js (screen)
           Newevent.js (screen)
           Editevent.js (screen)
         GroupStackScreen.js (StackNavigator)
           Group.js (screen)
           Newgroup.js (screen)
         ContactStackScreen.js (StackNavigator)
           Contact.js (screen)
           Newcontact.js (screen)
  
   *The file extension indicates that it is a single file. 
  </code></pre>
  
  <p>The app will display 3 tabs and route to <code>Chat</code> screen under <code>Event</code> tab until context hook is added to <code>AppScreen.js</code>. With context added, I can see the <code>Event</code> tab and won't be able to open <code>Chat</code> screen. </p>
  
  <p>Here is the code in <code>AppScreen.js</code>:</p>
  
  <pre><code>export default function AppScreen ({route, navigation}) {
  
    console.log("Routes available in AppScreen : ", navigation.dangerouslyGetState().routes)
    const authContext = React.createContext(null);
    const stateContext = React.createContext(null);
    const propsContext = React.createContext(null);
    console.log("route in AppScreen : ", route.params);
    const {data} = route.params;
  
    //do something here
  
    let authVal = {
      myself,
      result,  
      updateToken,  
    }
    let stateVal = {
      group_id,
      grp_name,
      role,
      alias,
      updateGroup,
      updateGrpmember,
    }
    let propsVal = {
      device_id,
    }
  
    return (
       &lt;propsContext.Provider value={propsVal}&gt;
          &lt;authContext.Provider value={authVal}&gt;
              &lt;stateContext.Provider value={stateVal}&gt; 
                  &lt;BTab.Navigator&gt;
                      &lt;BTab.Screen name="Event" component={EventStackScreen} /&gt;
                      &lt;BTab.Screen name="Group" component={GroupStackScreen} /&gt;
                      &lt;BTab.Screen name="Contact" component={ContactStackScreen} /&gt;
                  &lt;/BTab.Navigator&gt;
               &lt;/stateContext.Provider&gt;
          &lt;/authContext.Provider&gt;
      &lt;/propsContext.Provider&gt; 
  
    );
  };
  </code></pre>
  
  <p>As soon as the 3 context providers are removed, then routing to <code>Chat</code> screen work again. Here is the <code>EventStackScreen.js</code>:</p>
  
  <pre><code>const EStack = createStackNavigator();
  
  export default function EventStackScreen({route, navigation}) {
      const data = route.params.data;
  
      //do something....
  
      return (
          &lt;EStack.Navigator initialRouteName="Event"&gt;
            &lt;EStack.Screen name="Event" component={Event} /&gt;
            &lt;EStack.Screen name="New Event" component={NewEvent} /&gt;
            &lt;EStack.Screen name="Edit Event" component={EditEvent} /&gt;
            &lt;EStack.Screen name="Chat" component={Chat} /&gt;
          &lt;/EStack.Navigator&gt;
        );
  }
  </code></pre>
  
  <p>I have been rubbing my head quite some time for this routing problem and haven't figured out where is the problem. The last resort is to get rid of the context and pass the variable value in a traditional way even though it is recommended by <code>React Navigation</code> to use context instead.</p>