title: React Native Context API returns undefined for state
body: <p>All I am trying to do is to welcome the user on the screen. Here is the code.</p>
  <p><strong>context.js</strong></p>
  <pre><code>import React, {Component} from &quot;react&quot;;
  
  const MyContext = React.createContext();
  class MyProvider extends Component {
        this.state = {
              isAuthenticated: false,
              user: {
                      name: &quot;YYY&quot;,
                      email: &quot;yyy@gmail.com&quot;
                    }
        };
  
    render() {
        console.log(this.state)
        return (
             &lt;MyContext.Provider value = {this.state}&gt;
                {this.props.children}
            &lt;/MyContext.Provider&gt;
        );
    };
  
  };
  export {MyContext, MyProvider};
  </code></pre>
  <p><strong>App.js Code</strong></p>
  <pre><code>import React from 'react';
  import {StyleSheet, Text } from 'react-native';
  import {MyContext, MyProvider} from './src/context/context';
  
  function App() {
    return (
        &lt;MyProvider&gt;
            &lt;Header /&gt;
        &lt;/MyProvider&gt;
    )
  }
  
  export default class Header extends React.Component {
    render() {
      return (
        &lt;MyContext.Consumer&gt;
          { value =&gt; { console.log(value);
                       return (
                            &lt;Text style={styles.text}&gt;
                                Welcome {value}
                            &lt;/Text&gt;)
                     }
          }
        &lt;/MyContext.Consumer&gt;
      )
    }
  }
  
  const styles = StyleSheet.create({
    text: {
      fontSize: 24,
      alignSelf: 'center',
      alignContent:'center',
    },
  
  });
  </code></pre>
  <p>The App simply prints <strong>Welcome</strong> on the screen. I would like it to print the entire state contents like isAuthenticate, name &amp; email. What am I doing wrong?</p>