title: React Native Context - TypeError: undefined is not an object (evaluating '_useContext.theme')
body: <p>I keep getting an error when I try to use Context API for dark/light mode in App.js</p>
  <p><strong>Theme.js</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState } from "react";
  
  export const ThemeContext = React.createContext();
  //theme = light, dark
  
  export const ThemeProvider = ({ children }) =&gt; {
      const [theme, setTheme] = useState("dark");
  
      const toggleTheme = () =&gt; {
          if (theme === "light") setTheme("dark");
          else setTheme("light");
      };
  
      return (
          &lt;ThemeContext.Provider value={{ theme, toggleTheme }}&gt;
              {children}
          &lt;/ThemeContext.Provider&gt;
      );
  };</code></pre>
  </div>
  </div>
  </p>
  <p>App.js</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { ThemeContext, ThemeProvider } from "./app/utility/ThemeManager";
  
  export default function App() {
  
      const { theme } = useContext(ThemeContext); // This is throwing the error
  
  return (
    &lt;ThemeProvider&gt;
      ...//Rest of my app 
      //How I'd like to use my theme
        &lt;StatusBar style={theme === "dark" ? "light" : "dark"} /&gt;
  &lt;/ThemProvider&gt;
  );
  };</code></pre>
  </div>
  </div>
  </p>
  <p>I'd like to understand why this is throwing the error and how I could fix it?</p>
  <p>Thanks in advance!</p>