Skip to content

React Native library of easy solutions for common List use cases.

License

Notifications You must be signed in to change notification settings

dozsolti/react-native-use-list

Repository files navigation

Alt text

Expo supported npm GitHub issues npm

Features

  • 📖 Pagination
    • Navigate to next or previous page.
    • Go to a specific page (via index).
    • Page looping
    • Item alignment
  • 🔁 Pull to Refresh
    • isRefreshing state
  • 💡 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

About

React Native library of easy solutions for common List use cases.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks