react-native-infinite-scrolling

react-native-infinite-scrolling

A react native package developed to implement infinite scrolling in any react-native app.

Getting Started

Install via npm

npm i react-native-infinite-scrolling

Usage

Import the InfiniteScroll component from react-native-infinite-scrolling:

import InfiniteScroll from 'react-native-infinite-scrolling'

This component accepts 3 parameters / props:

1. data: It contains data in form of an array which will be mapped.
2. renderData: It accepts a function which returns the mapped data. It accepts a single parameter which indicates a single element of the data array.
3. loadMore: It also accepts a function which will load more data once the bottom of the page is reached while scrolling.

Usage Example:

import InfiniteScroll from 'react-native-infinite-scrolling'

const TestingApplication = () => {
  const [data, setData] = useState([])
  useEffect(() => {
    loadMore()
  },[])

  const renderData = ({ item }) => {
    return(
      <View>
        <Text> {item.title} </Text>
        <Text> {item.id} </Text>
      </View>
    )
  }

  const loadMore = () => {
    axios.get('https://jsonplaceholder.typicode.com/todos?_limit=10')
    .then((response) => {
      let updatedData = data.concat(response.data)
      setData(updatedData)
    })
    .catch((error) => console.log('error =', error))
  }
  return(
    <InfiniteScroll 
      renderData = {renderData}
      data = { data }
      loadMore = { loadMore }
    />
  )
}

export default TestingApplication

Build with:

1. React
2. react-native
3. Hooks