React Native <ListItem onPress={...}> - why is this function executing?

Question

I'm just starting to wrap my head around React Native and am using Redux for management of state, the NativeBase library for my UI components and react-native-router-flux is handling navigation between views.

Currently I'm building a basic list that is created from an array of guest 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 guest within a guests array. I'd like to make each item in the list touchable, and then pass the relevant guest object as a property to the next view to display details.

To do so I'm using the onPress function which is a standard function associated with the ListItem component (see NativeBase docs here). I've also followed the documentation for react-native-router-flux and defined the navigation action outside of the component itself so that the ListItem calls it when pressed and not each time it renders.

My problem is that I am finding that the onPress={goToView2(guest)} function is being called each time the ListItem is rendered rather than specifically when the ListItem is pressed.

I am sure it must be something simple that I have omitted. Any suggestions?

View1.js - view that displays initial list of guests:

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) => {
      NavigationActions.view2(guest);
      console.log('Navigation router run...');
    };

    return (
      <Container>
        <Header>
          <Title>Header</Title>
        </Header>


        <Content>
          <List
            dataArray={this.props.guests}
            renderRow={(guest) =>
              <ListItem button onPress={goToView2(guest)}>
                <Text>{guest.name}</Text>
                <Text note>{guest.email}</Text>
              </ListItem>
            }
          >
          </List>
        </Content>

        <Footer>
          <FooterTab>
            <Button transparent>
              <Icon name='ios-call' />
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}

const mapStateToProps = state => {
  console.log('mapStateToProps state', state);
  return { guests: state.guests };
};

export default connect(mapStateToProps)(View1);

View2.js - view that displays details of the selected guest from View1.js:

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 (
            <Container>
                <Header>
                    <Title>Header</Title>
                </Header>

                <Content>
                <Content>
                <List>
                    <ListItem>
                        <Text>{this.props.name}</Text>
                    </ListItem>
                </List>
            </Content>
                </Content>

                <Footer>
                    <FooterTab>
                        <Button transparent>
                            <Icon name='ios-call' />
                        </Button>
                    </FooterTab>
                </Footer>
            </Container>
        );
    }
}

export default View2;

Answer 1

Try to do <ListItem button onPress={() => {goToView2(guest)}}

Answer 2

const goToView2 = (guest) => {
      NavigationActions.view2(guest);
      console.log('Navigation router run...');
    };

<ListItem button onPress={this.goToView2(guest)}>

if you're using arrow function in the function then its just this.goToView2(guest) ...writing arrow function inside a render method causes performance issues...even though its negligible, its better to avoid it