react-native-fetch-list

React Native Fetch List

This component will manage data loading, rereshing and loading more with a fetch prop which returns a promise. You don't need to do these by youself. Rendering with Flatlist.

Usage

props

Other props will be spread onto FlatList

Name	Type	description
fetch	(params: { page: number; limit: number }) => Promise<T[]>	how to get data
limit	number, optional	data limit per page, default 10
data	T[], optional	if you want to manage the data by yourself, use this prop
onChange	(data: T[]) => void, optional	be triggered when data change
filter	(item: T) => boolean, optional	method to filter some data

example

import React, { useRef, useEffect } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import ListView from 'react-native-fetch-list';

const App = () => {
  const keyExtractor = item => item.id;

  const request = ({ page, limit }) => {
    return fetch(
      `https://cnodejs.org/api/v1/topics?page=${page}&limit=${limit}`,
    )
      .then(res => res.json())
      .then(data => data.data);
  };

  const list = useRef();

  useEffect(() => {
    list.current.fetch();
  }, []);

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item.title}</Text>
    </View>
  );

  return (
    <ListView
      ref={list}
      fetch={request}
      keyExtractor={keyExtractor}
      renderItem={renderItem}
      ListEmptyComponent={<Text>no data</Text>}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    paddingVertical: 10,
    paddingHorizontal: 15,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#999',
  },
});

export default App;