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;
Try to do <ListItem button onPress={() => {goToView2(guest)}}