Getting issue with TouchableOpacity in "react-native-grid-view"

Question

I am using react-native-grid-view node module to list my items, in that I wrote code as below:

showPlayer(item) {
        Alert.alert("Sample", "showPlayer");
}

renderItem(item) {
        return <TouchableOpacity style={{alignItems:"center"}} onPress={this.showPlayer.bind(this, item)}>
            <ImageLoad
                placeholderSource = {require('../images/PlaceHolder.png')}
                style={styles.thumbnail}
                isShowActivity = {false}
                source={{uri: thumbnailObj.value}}
        />
        <Text style={styles.gridText}> {item.name}</Text>
    </TouchableOpacity>
  }

For the above code I am getting this error:

undefined is not an object (evaluating 'this.showPlayer.bind')

Answer 1

This does not issue with react-native-grid-view you need to pass reference of this to renderItem function

 renderItem(item, that) {
        return <TouchableOpacity style={{alignItems:"center"}} onPress={that.showPlayer.bind(this, item)}>
            <ImageLoad
                placeholderSource = {require('../images/PlaceHolder.png')}
                style={styles.thumbnail}
                isShowActivity = {false}
                source={{uri: thumbnailObj.value}}
        />
        <Text style={styles.gridText}> {item.name}</Text>
    </TouchableOpacity>
  }

render() {
    return (
    <View> {this.renderItem(item, this)} </View>
)}