title: React Native how to pass this.setState change to parent
body: <p>I am new to React Native I am making a sample app where the user can login and register for a new account. </p>
  
  <p>I have two React classes, </p>
  
  <p>One is the main class index.ios.js and another class called register.js. In the index class I am saying if the variable register is true render the register screen. </p>
  
  <p>In the class register.js I am trying to set the variable register to false using this.setState({register:false}) but it is not causing the re render of the parent (index.ios.js). Is the a super(state) method or something similar that I am missing ? I believe the parent state is not getting the values of the updated register variable. </p>
  
  <p>Here are my classes: </p>
  
  <p>Render inside index.ios.js:</p>
  
  <pre><code>render: function() {
      if(this.state.register) {
        return this.renderRegisterScreen();
      }
      else if (this.state.loggedIn) {
        return this.userLoggedIn();
      }
      else {
        return this.renderLoginScreen();
      }
    }
  </code></pre>
  
  <p>Register.js:</p>
  
  <pre><code>var React = require('react-native');
  var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableHighlight,
    TextInput,
  } = React;
  
  var Register = React.createClass({
          render: function() {
          return (
            &lt;View style={styles.container}&gt;
              &lt;View style={styles.rafitoImage}&gt;
                &lt;Image source={require('./logo.png')}&gt;&lt;/Image&gt;
                &lt;Text style={styles.slogan}&gt;Eliminate the need to wait!&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View style={styles.bottomSection}&gt;
                &lt;View style={styles.username}&gt;
                  &lt;View style={styles.inputBorder}&gt;
                    &lt;TextInput placeholder="Username..." style={styles.usernameInput} onChangeText={(text) =&gt; this.setState({username: text})}/&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.inputBorder}&gt;
                    &lt;TextInput password={true} placeholder="Password..." style={styles.usernameInput} onChangeText={(text) =&gt; this.setState({password: text})}/&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.inputBorder}&gt;
                    &lt;TextInput password={true} placeholder="Verify Password..." style={styles.usernameInput} onChangeText={(text) =&gt; this.setState({verifyPassword: text})}/&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.inputBorder}&gt;
                    &lt;TextInput placeholder="Phone.." style={styles.usernameInput} onChangeText={(text) =&gt; this.setState({phone: text})}/&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.inputBorder}&gt;
                    &lt;TextInput placeholder="Email.." style={styles.usernameInput} onChangeText={(text) =&gt; this.setState({email: text})}/&gt;
                  &lt;/View&gt;
                  &lt;TouchableHighlight style={styles.button}
                    underlayColor='#f1c40f' onPress={this.register}&gt;
                          &lt;Text style={styles.buttonText}&gt;Register&lt;/Text&gt;
                  &lt;/TouchableHighlight&gt;
                  &lt;TouchableHighlight style={styles.signUp} onPress={this.resetToLogin}
                  underlayColor='#ffffff'&gt;
                  &lt;Text style={styles.signUpText}&gt;Already A Member &lt;/Text&gt;
                  &lt;/TouchableHighlight&gt;
                &lt;/View&gt;
              &lt;/View&gt;
              &lt;View style={styles.copyright}&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          );
      },
  
      resetToLogin: function() {
          this.setState({
              register: false //I want this to re render the home screen with the variable register as false
          });
      }
  });
  
      var styles = StyleSheet.create({
        container: {
          flex : 1
        },
        bottomSection: {
          flex: 5,
          flexDirection: 'row' 
        },
        button: {
              height: 36,
              backgroundColor: '#32c5d2',
              justifyContent: 'center',
              marginTop: 20
          },
        buttonText: {
              fontSize: 18,
              color: 'white',
              alignSelf: 'center'
        },
        signUpText: {
          color: '#3598dc'
        },
        signUp: {
          alignItems: 'flex-end',
          marginTop: 10,
        },
        username: {
          flex: 1,
          padding: 5
        },
        rafitoImage: {
          flex: 3,
          justifyContent: 'center',
          alignItems: 'center',
        },
        copyright: {
          alignItems: 'center'
        },
        usernameInput: {
              height: 36,
              marginTop: 10,
              marginBottom: 10,
              fontSize: 18,
              padding: 5
        },
        copyrightText: {
          color: '#cccccc',
          fontSize: 12
        },
        inputBorder: {
          borderBottomWidth: 1,
          borderBottomColor: '#ececec'
        },
        slogan: {
          color: '#3598dc'
        }
      });
  
  module.exports = Register;
  </code></pre>
  
  <p><strong>Attempt 1</strong></p>
  
  <p>As per the answer I added this to my index.ios.js</p>
  
  <pre><code>renderRegisterScreen: function() {
      return (
        &lt;Register login={this.login}/&gt;
      )
    }
  </code></pre>
  
  <p>And I added this to my register.js</p>
  
  <pre><code>&lt;TouchableHighlight style={styles.signUp} onPress={this.props.login}
                  underlayColor='#ffffff'&gt;
                  &lt;Text style={styles.signUpText}&gt;Already A Member &lt;/Text&gt;
                  &lt;/TouchableHighlight&gt;
  </code></pre>
  
  <p>But for some reason it does not even go to the register screen anymore, it executes the login function as soon as the register screen renders. What am I missing now ? Please advise. </p>
  
  <p>Thanks</p>
  
  <p><strong>Update</strong></p>
  
  <p>It works when I pass down registered as a property but not when I do not. I would like to understand why if someone could post that. </p>
  
  <p>Thanks</p>