react native flatlist

                                    There is no specific component like it is in react-native to do this kind of stuff, so I usually just use map() to achieve this kind of things.

But if it is reusable you can surely create a List component for yourself so that you don't write map() function each time for the same list.

Kind of like this:

function Item(props) {
   return <li>{props.value}</li>;
}

function MyList(items) {
   return (
    <ul>
      {items.map((item) => <Item key={item.key} value={item} />)}
    </ul>
  );
}

                                    <FlatList
        data={listing}
        keyExtractor={(listing) => listing.id.toString()}
        renderItem={({ item }) => (
          <Card //function  using the data in the listing  
            title={item.title}
            subTitle={"₹" + item.price}
            image={item.image}
          />
        )}
      />

                                    <FlatList
    data={this.state.newsFeed}
    refreshing={this.state.refreshing}
    horizontal={this.state.isHorizontal}
    ref={ref => { this.newsFeedListRef = ref; }}
    renderItem={this.renderNewsFeedRow.bind(this)}
    keyExtractor={(item, index) => `feed_${index}`}
    onRefresh={this.__handleNewsFeedOnRefresh.bind(this)}
    //renderScrollComponent={this.renderScrollComponent.bind(this)}
    ListHeaderComponent={this.renderListHeaderComponent.bind(this)}
    getItemLayout={(data, index) => ({ index, length: ITEM_HEIGHT, offset: (ITEM_HEIGHT * index) })} />

                                    const [isFetching, setIsFetching] = useState(false);

const fetchData = () => {
  dispatch(getAllDataAction(userParamData));
  setIsFetching(false);
};

const onRefresh = () => {
  setIsFetching(true);
  fetchData();
};

<FlatList
  data={topics}
  keyExtractor={(item) => item.id.toString()}
  renderItem={renderItem}
  onRefresh={onRefresh}
  refreshing={isFetching}
  progressViewOffset={100}
  ListEmptyComponent={<Empty message="No data found." />}
/>;