title: Create a Theme Provider component in React Native
body: <p>My application needs a color themes providing and I am trying to implement a Theme Providing component using a React Context, but it does not work. I can't figure out how to get the <code>theme</code> prop object from the Theme Provider's Context and how can I call the <code>updateTheme</code> function that is state of Theme Provider? This is my code:</p>
  <p><strong>ThemeProvider</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { LightTheme, DarkTheme } from '../themes'
  
  const Context = React.createContext();
  
  export class ThemeProvider extends React.Component {
    
    state = {
      theme: LightTheme,
      updateTheme: (theme) =&gt; {
        this.setState({ theme: theme })
      }
    }
  
    render() {
      const { theme } = this.state
      return (
        &lt;Context.Provider value={this.state} theme={theme} &gt;
          { this.props.children }
        &lt;/Context.Provider&gt;
      )
    }
  }
  
  export default ThemeProvider;
  </code></pre>
  <p><strong>App</strong></p>
  <pre><code>import React from 'react';
  import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
  } from 'react-native';
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import { HomeScreen } from './screens';
  import { NavBar, ThemeProvider } from './components';
  
  const Stack = createStackNavigator();
  
  const App: () =&gt; React$Node = () =&gt; {
  
    return (
      &lt;ThemeProvider&gt;
        &lt;NavigationContainer&gt;
          &lt;StatusBar barStyle=&quot;dark-content&quot; /&gt;
          &lt;NavBar /&gt;
          &lt;Stack.Navigator
            screenOptions={{
              headerShown: false
            }}
          &gt;
            &lt;Stack.Screen name=&quot;Home&quot; component={HomeScreen} /&gt;
          &lt;/Stack.Navigator&gt;
        &lt;/NavigationContainer&gt;
      &lt;/ThemeProvider&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p><strong>Navbar</strong> (this component have to get the <code>theme</code> prop from the ThemeProvider to change it's color)</p>
  <pre><code>import React from 'react';
  import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    StatusBar,
  } from 'react-native';
  
  import { Container, Header, Left, Body, Right, Button, Title } from 'native-base';
  import Icon from 'react-native-vector-icons/MaterialIcons';
  import { Layout } from '../constants';
  
  class NavBar extends React.Component {
    
    static contextType = ThemeProvider;
    constructor(props) {
      super(props);
    }
  
    render() {
      return (
        &lt;Header&gt;
          &lt;Left&gt;
            &lt;Button transparent&gt;
              &lt;Icon name='add' size={Layout.navIconSize} /&gt;
            &lt;/Button&gt;
          &lt;/Left&gt;
          &lt;Body&gt;
            &lt;Title&gt;Header&lt;/Title&gt;
          &lt;/Body&gt;
          &lt;Right&gt;
            &lt;Button transparent&gt;
              &lt;Icon name='alarm' size={Layout.navIconSize} /&gt;
            &lt;/Button&gt;
          &lt;/Right&gt;
        &lt;/Header&gt;
      )
    }
  }
  
  export default NavBar;
  </code></pre>
  <p><strong>Themes</strong></p>
  <pre><code>export const LightTheme = {
     dark: false,
     colors: {
        primary: 'rgb(255, 45, 85)',
        background: 'rgb(242, 242, 242)',
        card: 'rgb(255, 255, 255)',
        text: 'rgb(28, 28, 30)',
        border: 'rgb(199, 199, 204)',
        notification: 'rgb(255, 69, 58)',
     }
  }
  
  export const DarkTheme = {
     dark: true,
     colors: {
        primary: 'rgb(255, 45, 85)',
        background: 'rgb(0, 0, 0)',
        card: 'rgb(255, 255, 255)',
        text: 'rgb(28, 28, 30)',
        border: 'rgb(199, 199, 204)',
        notification: 'rgb(255, 69, 58)',
     },
  };
  </code></pre>