title: How to call function inside react native context provider
body: <p>I have the below file and I am trying to call <code>setAuthState</code> however I can't seem to figure out how to call this function from another file. This context file is content from a mix of online sources with my changes so I think it should work but I am unsure how to call it properly. Everything I find when searching SO and Google is calling the function from inside the context provider like I am already doing inside <code>useEffect</code>.</p>
  <p>I tried importing it as below</p>
  <p>screen.js</p>
  <pre><code>import useAuth from '../../context/useAuth'
  const { setAuthState } = useAuth();
  </code></pre>
  <p>then using it as</p>
  <pre><code>setAuthState(credentials)
  </code></pre>
  <p>Files with the actual code</p>
  <p>useAuth.js</p>
  <pre><code>import { useContext } from 'react';
  import AuthContext from 'auth.js';
  
  export default () =&gt; {
    const context = useContext(AuthContext);
    if (context === undefined) {
      throw new Error('Error message: &lt;tbd&gt;');
    }
    return context;
  }
  </code></pre>
  <p>auth.js</p>
  <pre><code>import React, { createContext, useState, useEffect } from 'react';
  import { globalStorage } from '../state/global'
  
  const AuthContext = createContext();
  
  const AuthProvider = ({ children }) =&gt; {
    const [auth, setAuth] = useState(null);
  
      const checkAuth = () =&gt; {
        try {
          // do stuff
        } catch(e) {
          console.error(e)
        }
      }
  
    const setAuthState = data =&gt; {
      try {
        // do stuff
        setAuth(data);
      } catch (err) {
        console.error(err);
      }
    };
  
    useEffect(() =&gt; {
      checkAuth();
    }, []);
  
    return (
      &lt;AuthContext.Provider value={{ auth, setAuthState}}&gt;
        {children}
      &lt;/AuthContext.Provider&gt;
    );
  };
  
  export { AuthProvider };
  
  export default AuthContext;
  </code></pre>
  <p>Edit ** code response to an answer</p>
  <pre><code>&lt;NavigationContainer&gt;
        &lt;AppProvider&gt;
            &lt;AppNavigation&gt;&lt;/AppNavigation&gt;
          &lt;FlashMessage position=&quot;bottom&quot; /&gt;
        &lt;/AppProvider&gt;
  &lt;/NavigationContainer&gt;
  </code></pre>