oldo.nicho oldo.nicho - 1 month ago 16
Javascript Question

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

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

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