onPress for listview in react-native does not work

Question

I'm facing a weird problem. In my react native app, if I set onPress event to Button it is not triggered. What am I missing here?

import React, {Component,} from 'react';
import { AppRegistry, Image, ListView, StyleSheet, Text, View,} from 'react-native';

   var REQUEST_URL ='https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json'; //URL to fetch json data

   export default class SampleAppMovies extends Component {
   constructor(props) {
     super(props);
     this.state = {
       dataSource: new ListView.DataSource({
       rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  }

//Before Page view 
componentDidMount() {
    this.fetchData();
}

//Fetch Data
fetchData() {
  fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
          this.setState({
            dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
            loaded: true,
          });
       })
       .done();
   }
  //On press for get all data 
 _getData = (name) =>{
     console.log(name); 
  }
 //On Press for getmovie
 _getMovie=(movie)=>{
     console.log('Movie Name', movie.title); //To get movie title
     console.log('Movie Year', movie.year); //To get movie year
  }
 //Main render view
 render() {
  if (!this.state.loaded) {
    return this.renderLoadingView();
  }
   //List View
   return (
      <ListView
          dataSource={this.state.dataSource}
          renderRow={this.renderMovie}
       /> //List view
    );
  }
  renderLoadingView() {
      return (
        <View style={styles.container}>
          <Text>//Before loading all movies list
            Loading movies...
          </Text>
         </View>
     );
   }
  //To get view movie list
  renderMovie(movie) {
    return (
      <View style={styles.container}>
        <Image
          source={{uri: movie.posters.thumbnail}}
           style={styles.thumbnail}
         /> //Image of movie
        <View style={styles.rightContainer}>
          <Button transparent onPress={this._getData(movie)}>  //Onpress to get all details
            <Text style={styles.title} >{movie.title}</Text>
          </Button>
          <Button transparent onPress={this._getMovie(movie)}>// On Press
            <Text style={styles.year} >{movie.year}</Text>
          </Button>
        </View>
      </View>
     );
   }
 }

Is there any solution to get onpress trigger for above example without adding onPress on ListView tag?

Try adding one of your onPress functions to the root <View> as a first debugging step. — MattyK14
you are actually CALLING the function right away and setting onPress equal to the value that your function returns. If uou want onPress to be an actual function, not its return value (makes the most sense) then follow the answer below or set onPress={this._getMovie} but then you dont have the ability to pass in the movie variable you wanted. — Tope

Poptocrack Poptocrack · Accepted Answer · 2017-07-24T12:37:58

Try to change your onPress with:

<Button title={movie.year} onPress={() => {
  this._getMovie(movie)
}}/>

onPress for listview in react-native does not work

1 Answers