title: How to implement Context API in React Native
body: <p>I just start looking for changing theme globally, and found <a href="https://reactjs.org/docs/context.html" rel="nofollow noreferrer">Context</a> can do that,</p>
  
  <p>but I've a problem to implement the example code to my react native project,</p>
  
  <p>I've tried this code:</p>
  
  <pre><code>//themeContext.js
  
  const themes = {
    light: {
      foreground: '#000000',
      background: '#eeeeee',
    },
    dark: {
      foreground: '#ffffff',
      background: '#222222',
    },
  };
  
  export const ThemeContext = React.createContext({
    theme: themes.dark,
    toggleTheme: () =&gt; {},
  })
  
  //App.js
  
  import React, { Component } from 'react';
  import {InitialScreen} from './routes/routes';
  import { ThemeContext } from './Component/themeContext';
  
  export default class App extends Component {
    constructor(props) {
      super(props);
      this.state={
        theme:themes.light,
        toggleTheme:this.toggleTheme
      }
      this.toggleTheme=()=&gt;{
        this.setState(state=&gt;({
          theme:state.theme === themes.dark ? themes.light : themes.dark
        }))
      }
    }
  
    render() {
      console.disableYellowBox = true;
      return (
        &lt;ThemeContext.Provider value={this.state}&gt;
          //this is Login.js
          &lt;InitialScreen/&gt;
        &lt;/ThemeContext.Provider&gt;
      );
    }
  }
  
  //Login.js
  
  import React from 'react';
  import { Text, TouchableOpacity, View } from 'react-native';
  import { ThemeContext } from '../Component/themeContext';
  
  export default class Login extends Component {
    render() {
      return (
        &lt;ThemeContext.Consumer&gt;
          {({theme, toggleTheme})=&gt;{
            &lt;View style={{backgroundColor:theme.background}}&gt;
              &lt;Text&gt;{this.state}&lt;/Text&gt;
            &lt;/View&gt;
          }}
        &lt;/ThemeContext.Consumer&gt;
      );
    }
  }
  </code></pre>
  
  <p>but i have an error <code>Can't find variable: Component</code>, i don't know where should i put <code>import React from 'react';</code> cause i think I've add <code>Component</code> var in <code>app.js</code> and <code>login.js</code></p>
  
  <p>any help would be appreciate</p>