react-native-use-list

react-native-use-list copied to clipboard

Features

• :open_book: Pagination
  • Navigate to next or previous page.
  • Go to a specific page (via index).
  • Page looping
  • Item alignment
• :repeat: Pull to Refresh
  • isRefreshing state
• :bulb: Open for more. Request a feature in the issues tab.

Supported components

• FlatList
• VirtualizedList
• SectionList

Installation

Using npm:

npm install --save react-native-use-list

Using yarn:

yarn add react-native-use-list

Quickstart - Pagination

import { useList } from 'react-native-use-list';


const ref = useRef(null);

const { pageIndex, nextPage, prevPage, indexController } = useList({ ref });

return (
  <>
    <FlatList
      ...
      ref={ref} // <---
      {...indexController} // <---
    />
    <View style={styles.footer}>
      <Button text="<" onPress={prevPage} />
      <Text style={styles.footerIndex}>{pageIndex}</Text>
      <Button text=">" onPress={nextPage} />
    </View>
  </>
);

Quickstart - Pull to refresh

import { useList } from 'react-native-use-list';


const [data, setData] = useState([...]);

const updateData = async () => {
  ...
  setData([...])
}

const { isRefreshing, refreshController } = useList({
  onRefresh: updateData // <---
});

return (
  <>
    <Text>isRefreshing: {isRefreshing}</Text>
    <FlatList
      data={data}
      ...
      {...refreshController} // <---
    />
  </>
);

Folders

/example/examples
    /Flatlist
      Pagination.tsx
      AdvancedPagination.tsx
      PullToRefresh.tsx
    /VirtualizedList
      Pagination.tsx
      PullToRefresh.tsx
    /SectionList
      Pagination.tsx
      PullToRefresh.tsx

/example/templates (coming soon)

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library