title: How to update state from other component?
body: <p>I am using react native and react navigation for routing. </p>
  
  <p>How to update state from another component/page? </p>
  
  <p>HomeScreen </p>
  
  <pre><code>export class HomeScreen extends Component {
    constructor(){
      this.state = {
        test: ''
      }
    }
  
    updateState = ()=&gt;{
      this.setState({test:'new value'});
    }
  
   }
  
  
  
  SideMenuScreen
  import { HomeScreen } from "./home"; 
  
  export class SideMenuScreen extends Component {
  
    updateHomeState = ()=&gt;{
      let oHome = new HomeScreen(); 
      oHome.updateState();
    }
  
  }
  </code></pre>
  
  <p>My App.js and routing and sidemenu config as below : </p>
  
  <pre><code>import { createAppContainer, createDrawerNavigator } from "react-navigation";
  import { SideMenuScreen } from "./screens/Sidemenu";
  import { HomeScreen } from "./screens/Home";
  
  export default class App extends Component {
    render() {
      return(
        &lt;AppContainer&gt;&lt;/AppContainer&gt;
      );
    }
  }
  
  const AppNavigator = createDrawerNavigator(
    {Home: HomeScreen, 
      other: otherpage},
    {
      contentComponent: SideMenuScreen
    }
  );
  
  const AppContainer = createAppContainer(AppNavigator);
  </code></pre>
  
  <p>updateState executing but not updating state. </p>