title: How to change components states from another component?
body: <p>I have an ApplicationHeader component in my applicationn that is called in App.js </p>
  
  <p><strong>ApplicationHeader.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export default class ApplicationHeader extends Component {
    constructor(props){
        super(props)
        this.state = {
          loggedUser: null,
        }
    }
    render() {
      return(
          &lt;View style={AppStyle.header}&gt;
            &lt;View style={{flex:1}}&gt;
              &lt;Image source={require('../assets/images/logo.png')} style = { AppStyle.headerLogo}/&gt;
            &lt;/View&gt;
            &lt;View style={{flex:0.1}}&gt;
              &lt;Image source={require('../assets/images/bag-topbar.png')} style = { AppStyle.headerBag}/&gt;
            &lt;/View&gt;
            &lt;View style={{flex:0.15}}&gt;
              &lt;Image source={this.state.loggedUser !== null ? imgWishListLogged : imgWishList} style = { AppStyle.headerWishlist}/&gt;
            &lt;/View&gt;
          &lt;/View&gt;
       );
     }
  }
  </code></pre>
  
  
  
  <p>My <strong>App.js</strong> renders <strong>ApplicationHeader</strong></p>
  
  <pre><code>  render() {
  
       return (
         &lt;SafeAreaView forceInset={{ bottom: 'never'}} style={styles.container}&gt;
           {Platform.OS === 'ios' &amp;&amp; &lt;StatusBar barStyle="default" /&gt;}
           &lt;ApplicationHeader /&gt;
           &lt;AppNavigator /&gt;
         &lt;/SafeAreaView&gt;
       );
  
    }
  </code></pre>
  
  <p>Now, In my <strong>Homepage.js</strong> I would like to send userLogged state or prop to ApplicationHeader to change the icon when user is logged.</p>
  
  <pre><code>class Homepage extends Component {
    render() {.....
  </code></pre>