- 📖 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.
- FlatList
- VirtualizedList
- SectionList
Using npm:
npm install --save react-native-use-listUsing yarn:
yarn add react-native-use-listimport { 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>
</>
);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} // <---
/>
</>
);/example/examples
/Flatlist
Pagination.tsx
AdvancedPagination.tsx
PullToRefresh.tsx
/VirtualizedList
Pagination.tsx
PullToRefresh.tsx
/SectionList
Pagination.tsx
PullToRefresh.tsx
/example/templates (coming soon)
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library