title: Why am I getting undefine?
body: <p>I want to make setLoading function from &quot;Screen&quot; to be available in &quot;HomeScreen&quot;. So</p>
  <p><strong>context.js</strong></p>
  <pre><code>import { createContext } from &quot;react&quot;;
  export const LoadingContext = createContext();
  </code></pre>
  <p><strong>screen.js</strong>
  This is screen component (parent component for HomeScreen). And I want to control the state of Modal in HomeScreen (child component).</p>
  <pre><code>import { Modal, StyleSheet, View } from &quot;react-native&quot;;
  import { useMemo, useState } from &quot;react&quot;;
  import { LoadingContext } from &quot;../../context&quot;;
  
  const Screen = ({ children}) =&gt; {
     const [loading, setLoading] = useState(false);
  
     const loadingContext = useMemo(() =&gt; {
        return { setLoading: setLoading };
     }, [loading]);
  
     return (
        &lt;LoadingContext.Provider value={loadingContext}&gt;
           &lt;View&gt;
              {children}
           &lt;/View&gt;
        &lt;/LoadingContext.Provider&gt;
     );
  };
  
  export default Screen;
  </code></pre>
  <p><strong>HomeScreen.js</strong></p>
  <pre><code>import { View, Text } from &quot;react-native&quot;;
  import { LoadingContext } from &quot;../../context&quot;;
  import { useContext} from &quot;react&quot;;
  
  const HomeScreen = ({ navigation }) =&gt; {
  
     const context = useContext(LoadingContext);
  
     console.log(context);  // undefined
  
     return (
        &lt;Screen&gt;
              &lt;Text&gt;&lt;/Text&gt;
        &lt;/Screen&gt;
     );
  };
  
  
  export default HomeScreen;
  </code></pre>