TouchableOpacity onpress not working react native listview

Question

I am using list view inside the tabvewAnimated. Right now I am facing problem while adding the onPress() TouchableOpacity to row where its get automatically triggered whenever page loads andwhen i added this.props.navigator.push({id: 8,}); it giving me error "undefined is not object(evaluating 'this.props.navigator.push')" I am using Navigator and building the app on android

Here is my code:

const RecievedPage = React.createClass({

    getInitialState() {
        let dataSource = new ListView.DataSource({rowHasChanged:(r1,r2) => r1.guid != r2.guid});
        return {
            dataSource: dataSource.cloneWithRows(dataList),
            loader:true,
        }
    },

    display(rowData){
        this.props.navigator.pop();
        ToastAndroid.show(rowData+"", ToastAndroid.SHORT);
    },

    componentWillMount() {
        let self = this;
        SharedPreferences.getItem("sender_id", (value) => {
            let user_id = value;
            let url = BASE_URL;
            fetch(url, {
                method: "GET",
                headers: {
                    "Accept": "application/json",
                    "Content-Type": "application/json",
                },
            })
                .then((response) => response.json())
                .then((responseData) => {
                    if (responseData.responsecode === 1) {
                        Received = responseData.data;
                        if (Received.length === 0) {
                        ToastAndroid.show("No Data found", ToastAndroid.SHORT);
                        }else{
                            self.setState({dataSource:this.state.dataSource.cloneWithRows(Received), loader:false});
                        }

                    }
                    else {
                        ToastAndroid.show('please try again...', ToastAndroid.SHORT);
                    }
                })
                .catch(e => {
                    // ToastAndroid.show('Error:Please try again...', ToastAndroid.SHORT);
                })
                .done();
        });
    },



    renderRow(rowData, sectionID,rowID){

        let  QrView = (rowData.qrImageUrl!== "")?
            <TouchableOpacity activeOpacity={.5}  onPress={() => this.display(rowData.qrImageUrl)}  >
            <Image
                source={{uri:rowData.qrImageUrl}}
                style={{height:40,width:40,margin:15}}
                resizeMode="contain"/>
            </TouchableOpacity>
            :
            <Text style={{fontSize : 18,marginTop:15,color:"black",margin:15}} >NA</Text>;

        return <View key={sectionID}>
            <View style={{ flex: 1,height:70,flexDirection: 'row',justifyContent: 'space-between'}}>

                <Text style={{fontSize : 18,marginTop:15,color:"black"}} >{rowData.sender_name}</Text>
                <View>
                    {QrView}
                </View>
            </View>
        </View>
    },


    render() {
        return(
            <ListView dataSource={this.state.dataSource}
                      renderRow={this.renderRow}
                      enableEmptySections={true}
                      style={{backgroundColor:"white", }}/>
        );
    },
});

Answer 1

You are calling the function instead of passing a function.

This:

<TouchableOpacity activeOpacity={.5}  onPress={this.display(rowData.qrImageUrl)}>

Should be:

<TouchableOpacity activeOpacity={.5}  onPress={() => this.display(rowData.qrImageUrl)}>