CODEWITHSUNDEEP
reactjsreact-hooksreact-navigation
user938363
user938363

Reputation: 10368

Context hook interfares with React Navigation routing

My React Native (0.61.5)/React 16.9.0 app has nested 3 layer react navigation (5.x) routing structure like below:

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.

The app will display 3 tabs and route to Chat screen under Event tab until context hook is added to AppScreen.js. With context added, I can see the Event tab and won't be able to open Chat screen.

Here is the code in AppScreen.js:

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 (
     <propsContext.Provider value={propsVal}>
        <authContext.Provider value={authVal}>
            <stateContext.Provider value={stateVal}> 
                <BTab.Navigator>
                    <BTab.Screen name="Event" component={EventStackScreen} />
                    <BTab.Screen name="Group" component={GroupStackScreen} />
                    <BTab.Screen name="Contact" component={ContactStackScreen} />
                </BTab.Navigator>
             </stateContext.Provider>
        </authContext.Provider>
    </propsContext.Provider> 

  );
};

As soon as the 3 context providers are removed, then routing to Chat screen work again. Here is the EventStackScreen.js:

const EStack = createStackNavigator();

export default function EventStackScreen({route, navigation}) {
    const data = route.params.data;

    //do something....

    return (
        <EStack.Navigator initialRouteName="Event">
          <EStack.Screen name="Event" component={Event} />
          <EStack.Screen name="New Event" component={NewEvent} />
          <EStack.Screen name="Edit Event" component={EditEvent} />
          <EStack.Screen name="Chat" component={Chat} />
        </EStack.Navigator>
      );
}

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 React Navigation to use context instead.

Upvotes: 0

Views: 42

Answers (1)

user938363
user938363

Reputation: 10368

To solve the problem, move all the context related code into a GlobalContext.js and import it in AppScreen.js with import {authContext, stateContext, propsContext} from "./GlobalContext". Here is the GlobalContext.js:

import React, {Component} from 'react';

const authContext = React.createContext(null);
const propsContext = React.createContext(null);
const stateContext = React.createContext(null);

export {authContext, stateContext, propsContext}

Upvotes: 0

Related Questions