Click listener in flatlist

Question

How can I add click listener in Flatlist?

My code:

renderItem({item, index}){
    return <View style = {{
    flex:1,
    margin: 5, 
    minWidth: 170, 
    maxWidth: 223,
    height: 304,
    maxHeight: 304,
    backgroundColor: '#ccc',
    }}/>
}
render(){
return(<FlatList
contentContainerStyle={styles.list}
data={[{key: 'a'}, {key: 'b'},{key:'c'}]}
renderItem={this.renderItem}
/>);
}
}

Update 1: I used button but it is not working in Flatlist. However using only button instead of Flatlist, it works. Why is it not working in Flatlist renderItem?

_listener = () => {
    alert("clicked");
}

renderItem({item, index}){
    return<View>
      <Button
          title = "Button"
          color = "#ccc"
          onPress={this._listener}
      />
    </View>
}

Answer 1

You need to wrap your row element (inside your renderItem method) inside <TouchableWithoutFeedback> tag. TouchableWithoutFeedback takes onPress as it's prop where you can provide onPress event.

For TouchableWithoutFeedback refer this link

Answer 2

I used TouchableWithoutFeedback. For that, you need to add all the renderItem elements (i.e your row) into the TouchableWithoutFeedback. Then add the onPress event and pass the FaltList item to the onPress event.

import {View, FlatList, Text, TouchableWithoutFeedback} from 'react-native';

render() {

  return (

      <FlatList style={styles.list}

          data={this.state.data}

          renderItem={({item}) => (

              <TouchableWithoutFeedback onPress={ () => this.actionOnRow(item)}>

                  <View>
                     <Text>ID: {item.id}</Text>
                     <Text>Title: {item.title}</Text>
                  </View>

             </TouchableWithoutFeedback>

         )}
      /> 
   );
}

actionOnRow(item) {
   console.log('Selected Item :',item);
}

Answer 3

I used TouchableOpacity. and it's working great.This will give you click feedback. which will not be provided by TouchableWithoutFeedback. I did the following:

import { View, Text, TouchableOpacity } from "react-native";

. . .

_onPress = () => {
     // your code on item press
  };

render() {
   <TouchableOpacity onPress={this._onPress}>
      <View>
        <Text>List item text</Text>
      </View>
   </TouchableOpacity>
}

Answer 4

The Pressable component is now preferred over TouchableWithoutFeedback (and TouchableOpacity). According to the React Native docs for TouchableWithoutFeedback:

If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API.

Example implementation:

import { Pressable } from "react-native";

render() {
  return(
    <FlatList
      contentContainerStyle={styles.list}
      data={[{key: 'a'}, {key: 'b'}, {key:'c'}]}
      renderItem={({item}) => (
        <Pressable onPress={this._listener}>
          // BUILD VIEW HERE, e.g. this.renderItem(item)
        </Pressable>
      )}
    />
  );
}

References

1. TouchableWithoutFeedback (React Native): https://reactnative.dev/docs/touchablewithoutfeedback
2. Pressable (React Native): https://reactnative.dev/docs/pressable

Answer 5

If you are facing flatlist row first click issue please add below property to flatlist.

disableScrollViewPanResponder = {true}