title: What is the best way to implement a loading screen with react navigation (I want to load data into context before navigation is displayed
body: <p>I don't know if I'm asking this question right but here goes. I use the Context API for storing global state. When the app loads, I'm displaying a Splash Screen (I do this natively and I'm not building a managed app / Expo). In the background I want to load some data into the global context object (in this example it's UserProfileContext). When this is complete I will display the main navigation. I think the code will make it clear what I'm trying to do.</p>
  <p>The problem is that I don't have access to the global context until I display the navigation routes because I use the Context objects to wrap the navigation component. How can I accomplish  what I'm trying to do?</p>
  <p>If there is a better way to load some data before choosing my route I am willing to change the structure of the navigation and/or app.</p>
  <p>Here is my code for the navigation:</p>
  <pre><code>const Stack = createStackNavigator()
  const Drawer = createDrawerNavigator()
  
  function CheckinStack() {
     return (
        &lt;Stack.Navigator headerMode={'none'}&gt;
           &lt;Stack.Screen
              name={'Search Locations'}
              component={SearchLocationsScreen}
           /&gt;
  
           &lt;Stack.Screen
              name={'Check In Form'}
              component={CheckInFormScreen}
           /&gt;
  
           &lt;Stack.Screen
              name={'Checked In'}
              component={CheckedInScreen}
           /&gt;
  
           &lt;Stack.Screen
              name={'Business Details'}
              component={BusinessDetailsScreen}
           /&gt;
        &lt;/Stack.Navigator&gt;
     )
  }
  
  function MainDrawer() {
      const {updateUserProfile} = useContext(UserProfileContext);
     const [isLoading, setIsLoading] = useState(true)
  
     const load = async () =&gt; {
        try {
              const profile = await retrieveUserProfile()
              profile &amp;&amp; updateUserProfile(profile)
  
              setIsLoading(false)
        } catch (e) {
              
          }
     }
  
      if(isLoading){
          return &lt;LoadingScreen setIsLoading={setIsLoading}/&gt;
      }
  
     return (
        &lt;Drawer.Navigator
           drawerStyle={{
              width: Dimensions.get('window').width &gt; 600 ? '50%' : '70%',
              maxWidth: 400,
           }}
           drawerContent={(props) =&gt; &lt;CustomDrawerContent {...props} dataLoaded /&gt;}&gt;
           &lt;Drawer.Screen name={'Search Locations'} component={CheckinStack} /&gt;
           &lt;Drawer.Screen name={'About'} component={AboutScreen} /&gt;
           &lt;Drawer.Screen name={'Favorites'} component={FavoritesScreen} /&gt;
           &lt;Drawer.Screen name={'Profile'} component={ProfileScreen} /&gt;
           &lt;Drawer.Screen name={'Report Issues'} component={ReportIssuesScreen} /&gt;
        &lt;/Drawer.Navigator&gt;
     )
  }
  
  const NavContainer = () =&gt; {
     return (
        &lt;NavigationContainer&gt;
           &lt;UserLocationProvider&gt;
              &lt;BusinessLocationsProvider&gt;
                 &lt;UserProfileProvider&gt;
                    &lt;CheckInProvider&gt;
                       &lt;FavoritesProvider&gt;
                          &lt;MainDrawer /&gt;
                       &lt;/FavoritesProvider&gt;
                    &lt;/CheckInProvider&gt;
                 &lt;/UserProfileProvider&gt;
              &lt;/BusinessLocationsProvider&gt;
           &lt;/UserLocationProvider&gt;
        &lt;/NavigationContainer&gt;
     )
  }
  </code></pre>