React Native Load More Flatlist
A react-native-load-more-flatlist component is based on Flatlist component for React Native. This component will help you to achieve infinite scroll functionality of flatlist with the bottom loader component.
Install
- Install this package using
npm
oryarn
with npm
:
npm install --save react-native-load-more-flatlist
with yarn
:
yarn add react-native-load-more-flatlist
import { LoadMoreFlatlist } from 'react-native-load-more-flatlist';
Api
Props
All props are passed to underlying FlatList
Name | Type | Description |
---|---|---|
listData |
T[] |
List of items to be rendered. |
activityIndicatorStyle |
ViewStyle |
To set style to Activity Indicator(bottom loader). |
renderFlatlistItem |
(params: {item:{},index:number) => JSX.Element |
Flatlist render item. |
onListEndReached |
() => void |
Callback function once list scrolled to the end. |
isLoading |
boolean |
Flag to show or hide bottom loader indicator (required). |
indicatorColor |
string |
To set activity indicator color. |
listFooterComponent |
() => JSX.Element |
To pass custom list footer loader component. |
...props |
flatlist default props |
You can pass all other flatlist props. |
Example
import React, { useState } from 'react'
import { SafeAreaView } from 'react-native'
import {
LoadMoreFlatlist,
} from 'react-native-load-more-flatlist';
import ListItem from './components/listItem/ListItem';
import { data } from './data';
import styles from './style';
const App = () => {
const [listData, setListData] = useState(data)
const [isLoading, setIsLoading] = useState(false)
const onListEndReached = async () => {
setIsLoading(true)
await setTimeout(() => {
setListData([...listData, ...data])
setIsLoading(false)
}, 2000);
}
const renderFlatlistItem = ({ item, index }) => {
return <ListItem title={item.name} value={item?.value} />
}
return (
<SafeAreaView style={styles.container}>
<LoadMoreFlatlist
data={listData}
onListEndReached={onListEndReached}
renderFlatlistItem={renderFlatlistItem}
isLoading={isLoading}
style={styles.flatlistStyle}
/>
</SafeAreaView>
)
}
export default App
Data file (data.tsx)
export const data = [
{name: 'BitCoin', value: 50},
{name: 'Crypto', value: 45},
{name: 'Zipto', value: 58},
{name: 'CoinZero', value: 75},
{name: 'Ruppee', value: 69}];
List Item file (ListItem.tsx)
import React, { memo } from 'react'
import { Text, TouchableOpacity, View } from 'react-native'
import styles from './style'
interface props {
title?: string
onPress?: Function
isRajya?: boolean
value?: any
setSelectedValue?: any
}
const ListItem: React.FC<props> = (props) => {
const { title, value } = props
return (
<TouchableOpacity style={styles.containerStyle}>
<View style={styles.wrapperViewstyle}>
<Text style={styles.textStyle}>{title}</Text>
<Text style={styles.valueTextStyle}>{value}</Text>
</View>
</TouchableOpacity>
)
}
export default memo(ListItem);
List Item style file (style.ts)
import { StyleSheet } from 'react-native'
const styles = StyleSheet.create({
containerStyle: {
padding: 20,
margin: 10,
backgroundColor: 'white',
borderRadius: 4,
elevation: 5,
},
wrapperViewstyle: {
flexDirection: 'row',
justifyContent: 'space-between',
},
textStyle: {
fontWeight: '700',
color: 'black',
},
valueTextStyle: {
fontWeight: '700',
color: 'black',
},
})
export default styles