title: react-native property function parameter is not passing through
body: <p>First off I want to say I am new to react-native and react in general so if I am doing things totally wrong, let me know.</p>
  
  <p>Currently I am building an application with a login function in react-native 0.48.4.
  First off I want to make a hard-coded login function before I am going to work with API calls, my project structure is like this: </p>
  
  <ul>
  <li>./src/components/login/<em>All the components used by the login screen</em></li>
  <li>./src/screens/loginscreen.component.js</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default class LoginScreenComponent extends Component {
      render () {
          return (
              &lt;KeyboardAvoidingView behavior={'padding'} style={styles.loginContainer}&gt;
                  &lt;LogoComponent/&gt;
                  &lt;TextLogoComponent/&gt;
                  &lt;LoginFormComponent login={() =&gt; { this.login(); }}/&gt;
              &lt;/KeyboardAvoidingView&gt;
  
          );
      }
      
      login (email, password) {
          console.log(email); //prints undefined
          if (email == 'test' &amp;&amp; password == 'test') {
              this.props.navigation.navigate('LoggedIn');
          } else {
              Alert.alert(
                  'Oops',
                  'Wrong username or password, please try again.',
                  [
                      {text: 'OK'},
                  ],
                  { cancelable: false }
              );
          }
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see I am passing a login function as property to the LoginFormComponent.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default class LoginFormComponent extends Component {
      constructor (props) {
          super(props);
      }
  
      state = {
          email: '',
          password: '',
      };
  
      render () {
          return (
              &lt;View style={styles.container}&gt;
                  &lt;UserInput placeholder={'E-mail'} onChangeText={(email) =&gt; this.setState({email})} value={this.state.email}/&gt;
                  &lt;UserInput placeholder={'Password'} onChangeText={(password) =&gt; this.setState({password})} value={this.state.password} secureTextEntry={true}/&gt;
                  &lt;Button text={'Login'} onPress={() =&gt; {this.onLoginPress(); }}/&gt;
                  &lt;TouchableHighlight&gt;
                      &lt;Text style={styles.text}&gt;
                          Forgot password?
                      &lt;/Text&gt;
                  &lt;/TouchableHighlight&gt;
              &lt;/View&gt;
          );
      }
  
      onLoginPress () {
          console.log(this.state.email); //prints the email correctly
          this.props.login(this.state.email, this.state.password);
      }
  }
  
  LoginFormComponent.propTypes = {
      login: PropTypes.func.isRequired
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the LoginFormComponent I call the function onLoginPress () which calls the property function login with as parameter this.state.email and this.state.password. If I execute this code this.state.email (And this.state.password) is defined before passing it through the this.props.login function but undefined when it reaches the actual login function. My question is, what is the correct way to pass parameters through property functions in react-native?</p>
  
  <p>Example console log when pressing the button:</p>
  
  <p>test@test.nl
  undefined</p>