CODEWITHSUNDEEP
react-nativereact-native-flatlist
Amrita Stha
Amrita Stha

Reputation: 3347

Click listener in flatlist

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>
}

Upvotes: 31

Views: 56327

Answers (6)

Manish Ahire
Manish Ahire

Reputation: 1343

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);
}

Upvotes: 27

AlkanV
AlkanV

Reputation: 501

you dont need to add Touchable related component into your Flatlist renderItem. Just pass onTouchStart prop to your Flatlist.

in example:

<FlatList
  style={themedStyles.flatListContainer}
  data={translations}
  renderItem={renderItem}
  keyExtractor={(item, index) => `${item.originalText}____${index}`}
  showsHorizontalScrollIndicator={false}
  showsVerticalScrollIndicator={false}
  ListEmptyComponent={renderEmptyListComponent}
  onTouchStart={onBackgroundPressed}
/>

Upvotes: 1

Virluz
Virluz

Reputation: 666

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

disableScrollViewPanResponder = {true}

Upvotes: 4

Andrew Nguonly
Andrew Nguonly

Reputation: 2621

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

Upvotes: 3

Nabeel K
Nabeel K

Reputation: 6128

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>
}

Upvotes: 13

Raj Suvariya
Raj Suvariya

Reputation: 1664

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

Upvotes: 21

Related Questions