react-native renderRow with button: push rowData to button-function

Question

• [ 24.1 ] What's the version of React Native you're using?
• [ both ] Does this occur on iOS, Android or both?
• [ Mac ] Are you using Mac, Linux or Windows?

I'm doing this:

_onPress(data) {
    Actions.shopProducts(data);
}

...

renderRow(rowData){
return (
<Button onPress={this._onPress.bind(this)}>
    <View style={styles.row}>
        <View style={styles.listViewContainer}>
            <Image
                source={{uri: rowData.image}}
            />

            <View style={styles.rightContainer}>
                <Text style={styles.smallText}>Name: {rowData.name}</Text>
                <Text style={styles.smallText}>Straße: {rowData.address}</Text>
                <Text style={styles.smallText}>Ort: {rowData.location}</Text>
            </View>
        </View>
    </View>
    </Button>
);
}

...

I'm getting following error:

Possible Unhandled Promise Rejection (id: 0): undefined is not an object (evaluating 'this._onPress.bind') renderRow @...

I'm actually using react-native-router-flux and react-native-button.

What causes this error? I can't understand this...

Best regards

Edit: Now I want to know how to push the rowData to my Button-function... Any idea?

Answer 1

Don't forget to 'bind' the renderRow itself , like:

<ListView 
  dataSource={this.state.dataSource} 
  renderRow={this.renderRow.bind(this)} 
  ... 
/>

And for passing data to the _onPress method, do this:

<Button onPress={this._onPress.bind(this, rowData)}>