title: React Native <ListItem onPress={...}> - why is this function executing?
body: <p>I'm just starting to wrap my head around React Native and am using Redux for management of <code>state</code>, the <a href="http://nativebase.io/" rel="noreferrer">NativeBase library</a> for my UI components and <a href="https://github.com/aksonov/react-native-router-flux" rel="noreferrer">react-native-router-flux</a> is handling navigation between views. </p>
  
  <p>Currently I'm building a basic list that is created from an array of <code>guest</code> objects. The list is stored in the Redux store and I'm able to access it and display accordingly. Each item in the list is associated with a <code>guest</code> within a <code>guests</code> array. I'd like to make each item in the list touchable, and then pass the relevant <code>guest</code> object as a property to the next view to display details.</p>
  
  <p>To do so I'm using the <code>onPress</code> function which is a standard function associated with the <code>ListItem</code> component (see NativeBase docs <a href="http://nativebase.io/docs/v0.5.9/components#listOnClick" rel="noreferrer">here</a>). I've also followed <a href="https://github.com/aksonov/react-native-router-flux/blob/master/docs/MINI_TUTORIAL.md#passing-information" rel="noreferrer">the documentation</a> for <code>react-native-router-flux</code> and defined the navigation action outside of the component itself so that the <code>ListItem</code> calls it when pressed and not each time it renders. </p>
  
  <p>My problem is that I am finding that the <code>onPress={goToView2(guest)}</code> function is being called each time the <code>ListItem</code> is rendered rather than specifically when the <code>ListItem</code> is pressed.</p>
  
  <p>I am sure it must be something simple that I have omitted. Any suggestions?</p>
  
  <p>View1.js - view that displays initial list of <code>guests</code>:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon,
    Text, List, ListItem } from 'native-base';
  import { connect } from 'react-redux';
  import { Actions as NavigationActions } from 'react-native-router-flux';
  
  class View1 extends Component {
    render() {
  
      // This is the function that runs every time a ListItem component is rendered. 
      // Why is this not only running on onPress?
  
      const goToView2 = (guest) =&gt; {
        NavigationActions.view2(guest);
        console.log('Navigation router run...');
      };
  
      return (
        &lt;Container&gt;
          &lt;Header&gt;
            &lt;Title&gt;Header&lt;/Title&gt;
          &lt;/Header&gt;
  
  
          &lt;Content&gt;
            &lt;List
              dataArray={this.props.guests}
              renderRow={(guest) =&gt;
                &lt;ListItem button onPress={goToView2(guest)}&gt;
                  &lt;Text&gt;{guest.name}&lt;/Text&gt;
                  &lt;Text note&gt;{guest.email}&lt;/Text&gt;
                &lt;/ListItem&gt;
              }
            &gt;
            &lt;/List&gt;
          &lt;/Content&gt;
  
          &lt;Footer&gt;
            &lt;FooterTab&gt;
              &lt;Button transparent&gt;
                &lt;Icon name='ios-call' /&gt;
              &lt;/Button&gt;
            &lt;/FooterTab&gt;
          &lt;/Footer&gt;
        &lt;/Container&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; {
    console.log('mapStateToProps state', state);
    return { guests: state.guests };
  };
  
  export default connect(mapStateToProps)(View1);
  </code></pre>
  
  <p>View2.js - view that displays details of the selected <code>guest</code> from <code>View1.js</code>:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon,
    Text, List, ListItem } from 'native-base';
  
  class View2 extends Component {
      render() {
          console.log('View2 props: ', this.props);
  
          return (
              &lt;Container&gt;
                  &lt;Header&gt;
                      &lt;Title&gt;Header&lt;/Title&gt;
                  &lt;/Header&gt;
  
                  &lt;Content&gt;
                  &lt;Content&gt;
                  &lt;List&gt;
                      &lt;ListItem&gt;
                          &lt;Text&gt;{this.props.name}&lt;/Text&gt;
                      &lt;/ListItem&gt;
                  &lt;/List&gt;
              &lt;/Content&gt;
                  &lt;/Content&gt;
  
                  &lt;Footer&gt;
                      &lt;FooterTab&gt;
                          &lt;Button transparent&gt;
                              &lt;Icon name='ios-call' /&gt;
                          &lt;/Button&gt;
                      &lt;/FooterTab&gt;
                  &lt;/Footer&gt;
              &lt;/Container&gt;
          );
      }
  }
  
  export default View2;
  </code></pre>