title: React native context api not updated
body: <p>I'm using RN NetInfo to check if user connected to internet using component <code>&lt;NetworkProvider /&gt;</code> and I want to pass this components <code>stats</code> to all screens and components in my app.</p>
  
  <p>The problem is context api works good when I use it inside <code>render</code> function but when I use inside <code>componentDidMount</code> or <code>componentWillMount</code> the state not changed. Return initial value of <code>isConnected</code> state.
  <strong>Please read comment in code</strong></p>
  
  <p>so this my code</p>
  
  <p>NetworkProvider.js</p>
  
  <pre><code>import React,{PureComponent} from 'react';
  import NetInfo from '@react-native-community/netinfo';
  
  export const NetworkContext = React.createContext({ isConnected: true });
  
  export class NetworkProvider extends React.PureComponent {
  
    state = {
      isConnected: true // initial value
    };
  
    componentDidMount() {
      NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
    }
  
    componentWillUnmount() {
      NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
    }
  
    handleConnectivityChange = isConnected =&gt; this.setState({ isConnected });
  
    render() {
      return (
        &lt;NetworkContext.Provider value={this.state}&gt;
          {this.props.children}
        &lt;/NetworkContext.Provider&gt;
      );
    }
  }
  </code></pre>
  
  <p>this index.js</p>
  
  <pre><code>...
  import { NetworkContext } from '../components/NetworkProvider';
  
  export default class index extends Component {
  
      static navigationOptions = {};
      static contextType = NetworkContext;
      constructor(props) {
          super(props);
          this.state = {
          ...
          };
      }
  
      componentDidMount() {
          // return object state but with inital value {isConnected :true}
          console.log(this.context);
          //this.fetchData(this.state.page);      
      }
  
      render() {
          // here when I use this.context return object {isConnected:true/false} depends on internet connection status on device
  
          return(
                  &lt;FlatList
                  ...
                  /&gt;
          )
      }
  }
  ...
  </code></pre>