title: Change state in other component in React Native
body: <p>I'm quite new to React-Native.
  I have a screen which will render depends on its current state like below. At default (initial state) it will render the login screen.
  App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, TouchableOpacity, Text } from 'react-native';
  import { Header } from './components/Export';
  import LoginBox from './components/LoginBox';
  import AdditionalActivity from './components/AdditionalActivity';
  import SignUp from './components/SignUp';
  
  
  export default class App extends Component {
  
    state = {
      status: 'initial'
    }
  
    renderBasedOnLoggedInState() {
      if(this.state.status == 'initial') {
        return (
          &lt;View&gt;
            &lt;Header headerText="APP NAME"/&gt;
            &lt;LoginBox/&gt;
            &lt;AdditionalActivity /&gt;
          &lt;/View&gt;
        );
      } else if (this.state.status == 'logged') {
        return (
          &lt;View&gt;
            &lt;Text&gt;Welcome to my application&lt;/Text&gt;
          &lt;/View&gt;
        )
      } else {
        return (
          &lt;View&gt;
            &lt;Header headerText="APP NAME"/&gt;
            &lt;SignUp/&gt;
            &lt;AdditionalActivity /&gt;
          &lt;/View&gt;
        )
      }
    }
  
    render() {
      return (
        &lt;View&gt;
          {this.renderBasedOnLoggedInState()}
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p>When the login below is successed, I need to change the state of component App from "initial" to "logged". How could I do it? The login function here is only for test purpose so don't care much about it XD.
  LoginBox.js</p>
  
  <pre><code>import React, { Component } from 'react'
  import { Alert, Text, View, TouchableOpacity, Button } from 'react-native'
  import GreyTextbox from './GreyTextbox'
  
  
  export default class LoginBox extends Component {
      state = {
          username: '',
          password: '',
      }
  
      Login()
      {    
          var username = this.state.username;
          var password = this.state.password;
          var userdata = require('./a.json');
  
          var count = 0;
          for (let j = 0; j &lt; 2; j++) {
              if ((userdata[j].username == username) &amp;&amp; ( userdata[j].password == password))
              {
                  Alert.alert("true");    
                  count++;
              }             
          }   
          if(count == 0)
          {
              Alert.alert("false");   
          }
      }
  
      render() {
          return (
              &lt;View style={styles.containerStyle}&gt;
                  &lt;GreyTextbox
                      secureOption={false}
                      placeholder="username"
                      value={this.state.username}
                      onChangeText={username =&gt; this.setState({username})}
                  /&gt;
                  &lt;GreyTextbox
                      secureOption={true}
                      placeholder="password"
                      value={this.state.password}
                      onChangeText={password =&gt; this.setState({password})}
                  /&gt;
                  &lt;TouchableOpacity
                      style={styles.buttonStyle}
                      onPress={this.Login.bind(this)} &gt;                   &gt;
                      &lt;Text style={styles.textStyle}&gt;Log In&lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
          )
      }
  }
  
  const styles = {
      containerStyle: {
          //flex: 0.35,
          height: 180,
          justifyContent: 'space-between',
          marginTop: 40,
          marginLeft: 30,
          marginRight: 30,
          position: 'relative'
      },
      buttonStyle: {
          borderWidth: 1,
          borderColor: '#3da8ff',
          alignContent: 'center',
          justifyContent: 'center',
          marginLeft: 25,
          marginRight: 25,
          paddingTop: 5,
          paddingBottom: 5,
      },
      textStyle: {
          color: '#3da8ff',
          alignSelf: 'center',
          fontSize: 20
      }
  }
  </code></pre>