Click listener in flatlist

react native flatlist onpress item
react native flatlist selected item
react-navigation flatlist
flatlist columns
flatlist getitemlayout
flatlist initialscrollindex
flatlist refreshcontrol
flatlist horizontal scroll

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

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

FlatList component navigate to new details screen on click, r/reactnative: A community for learning and developing native mobile applications using React Native by Facebook. < FlatList viewabilityConfig = {this. viewabilityConfig} minimumViewTime Minimum amount of time (in milliseconds) that an item must be physically viewable before the viewability callback will be fired.


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

[Please Help] Click Event on FlatList items not working , I have a horizontal FlatList, where each time it reaches the end, it automatically adds new elements to the list, so it kind of is an infinite list. I have a horizontal FlatList, where each time it reaches the end, it automatically adds new elements to the list, so it kind of is an infinite list. I want the app to scroll through the list by itself automatically, but during my testing


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

How to highlight and multi-select items in a FlatList component , I have a horizontal FlatList, where each time it reaches the end, RN's own touchable component and implement my own touch event handler. You set an OnClickListener instance (e.g. myListener named object)as the listener to a view via setOnclickListener(). When a click event is fired, that myListener gets notified and it's onClick(View view) method is called. Thats where we do our own task. Hope this helps you.


FlatList · React Native, selected: styles.list;. Next, when we click on any item in our FlatList the selectItem function gets rendered and it changes the styling of that item to  Bài này chia sẻ với các bạn cách hiên thị màn hình kiểu Modal, nhập thông tin và thêm một Item vào FlatList SUBSCRIBE TO MY CHANNEL FOR MORE INTERESTING VIDEOS: https


React Native Simple FlatList Component Android iOS Example , Provides a handle to the underlying scroll node. Is this page useful? ← Button​Image  ListView - A core component designed for efficient display of vertically scrolling lists of changing data. The minimal API is to create a ListView.DataSource , populate it with a flat array of data blobs, and instantiate a ListView component with that data source and a renderRow callback which takes a blob from the data array and returns a renderable component.


How can i change the FlatList item background color when button is , Use FlatList component in react native android iOS application with FlatList Item Separator line, custom Flat List items and get item clicked  Importantly, TouchableWithoutFeedback works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.