title: Context API in react native
body: <p>Hey guys im just start learning about React native context api I want to know that how can I implement this as globally like global state 
  and its also not working after navigate to another screen and why do we include class name in provider <code>&lt;ProfileScreen screen= {this.state.contextData}/&gt;</code> can we do it globally..
  here's my code</p>
  
  <pre><code>global.cart=1
  const Context = React.createContext(global.cart)
  
  class HomeScreen extends Component&lt;Props&gt; {
      constructor(props){
        super(props);
        this.state={
              contextData:5
             }
        }
  
        Incrementhome=()=&gt;{
  
          this.setState({contextData:global.cart})
            global.cart++
        }
        Decrementhome=()=&gt;{
          this.setState({contextData:global.cart})
          global.cart--
        }
    render() {
      return (
        &lt;View&gt;
        &lt;Context.Provider value={this.state.contextData}&gt;
          &lt;Button title="Incrementhome"
            onPress={this.Incrementhome}/&gt;
            &lt;Button title="decrementhome"
              onPress={this.Decrementhome}/&gt;
  
  &lt;ProfileScreen screen= {this.state.contextData}/&gt;
        &lt;/Context.Provider&gt;
  &lt;Button title='sd' onPress={()=&gt;{this.props.navigation.navigate('Profile')}}/&gt;
  
        &lt;/View&gt;
      )
    }
  }
  </code></pre>
  
  <p>class profile screen which can show my data</p>
  
  <pre><code>class ProfileScreen extends Component&lt;Props&gt; {
    render() {
    return (
        &lt;View style={{}}&gt;
          &lt;Context.Consumer&gt;
            {data=&gt;  &lt;Text style={{fontSize:50}}&gt;{data}&lt;/Text&gt;}
          &lt;/Context.Consumer&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>class profile screens that is also a provider</p>
  
  <pre><code>class ProfileScreens extends Component&lt;Props&gt; {
      static navigationOptions =
    {
       title: 'MainActivity',  header: &lt;Button title='sd' onPress={()=&gt;{this.props.navigation.navigate('ProfileScreen')}}/&gt;
     };
    constructor(props){
      super(props);
  
      this.state={contextData:0
          }
  
      }
  
    render() {
      return (
        &lt;View &gt;
          &lt;Context.Provider value={this.state.contextData}&gt;
            &lt;Button title="decrement" onPress={()=&gt;{ this.props.changeHomeScreen() }}/&gt;
            &lt;Button title='sd' onPress={()=&gt;{this.props.navigation.navigate(Profile)}}/&gt;
          &lt;/Context.Provider&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>my navigator</p>
  
  <pre><code>export default HomeScreen = createStackNavigator({
    HomeScreen:{
      screen:HomeScreen
    },
      Profile:{
        screen:ProfileScreen
      },
        ProfileScreens:{
          screen:ProfileScreens
        },
  })
  </code></pre>