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

1. Install this package using npm or yarn

with npm:

npm install --save react-native-load-more-flatlist

with yarn:

yarn add react-native-load-more-flatlist

2. 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