title: How can I use React Native AsyncStorage with React hooks?
body: <p>I have set a React Context like so: </p>
  
  <pre><code>export const TokenContext = createContext({token: ''});
  </code></pre>
  
  <p>and I am using it to create a Provider in my App.js, where I'm trying to first retrieve the token from AsyncStorage: </p>
  
  <pre><code>const App = () =&gt; {
  
      const [token, setToken] = React.useState('');
  
      const retrieveData = async () =&gt; {
          const storedToken = await AsyncStorage.getItem('token');
          console.log(storedToken);
          setToken(storedToken);
  
          return;
      };
  
      React.useEffect(() =&gt; {
          retrieveData();
      }, []);
  
      return (
          &lt;NavigationContainer&gt;
              &lt;TokenContext.Provider token={token}&gt;
                  &lt;RootNav  /&gt;
              &lt;/TokenContext.Provider&gt;
          &lt;/NavigationContainer&gt;
      );
  };
  </code></pre>
  
  <p>I want to consume that Context in the <code>RootNav</code> component being used above: </p>
  
  <pre><code>const RootNav = () =&gt; {
      const token = React.useContext(TokenContext);
      const isSignedIn = !!token;
  
      return (
          &lt;Root.Navigator&gt;
              {isSignedIn ? (
                  &lt;&gt;
                      &lt;Root.Screen name={RouteNames.TAB_NAV} component={TabNav} /&gt;
                  &lt;/&gt;
              ) : (
                  &lt;&gt;
                      &lt;Root.Screen
                          name={RouteNames.LOGIN_SCREEN}
                          component={LoginScreen}
                      /&gt;
                  &lt;/&gt;
              )}
          &lt;/Root.Navigator&gt;
      );
  };
  </code></pre>
  
  <p>However, the token value in the context is undefined even though there is a value in the storage. If I manually pass the prop down to RootNav (without context), I can use it just fine, like so: </p>
  
  <p>App.js</p>
  
  <pre><code>...
    return (
          &lt;NavigationContainer&gt;
               &lt;RootNav token={token} /&gt;
          &lt;/NavigationContainer&gt;
      );
  </code></pre>
  
  <p>RootNav.js</p>
  
  <pre><code>
  const RootNav = ({token}) =&gt; {
      const isSignedIn = !!token;
  
      return (
      ...
  </code></pre>
  
  <p>However, I want to use this token in places that are more nested down so I'd rather just use context if I can get it to work. Any ideas? </p>