React Native <ListItem onPress={...}> - why is this function executing?
<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>