@hellojh/react-native-infinite-scroll

npm-react-native-infinite-scroll

It is a library of infinite scrolls and inverse infinite scrolls used by React Native.

Infinite scrolls are often used when paging, and reverse infinite scrolls are often used when implementing chatting.

If you use it, I'd appreciate it if you could press ⭐ on the GitHub!

Installation

npm i @hellojh/react-native-infinite-scroll

Components

---

Component	Description
<InfiniteScroll></InfiniteScroll>	Scrolling from top to bottom.
<R_InfiniteScroll></R_InfiniteScroll>	Scroll from bottom to top.

InfiniteScroll

It's a typical infinite scroll.

props	Description	Type
endPoint	"OnScrollEnd" starts when you reach the point of "endPoint" from the floor.	Int
onScrollEnd	A function to be executed when the scroll arrives last.	Function

sample code

<InfiniteScroll
    endPoint={100}
    onScrollEnd={fetchData}
>
    {
        array.map((item, index) => {
            return(
                <Text key={index}>{item}</Text>
            )
        })
    }
</InfiniteScroll>

R_InfiniteScroll

It's the opposite of a typical infinite scroll.
It detects when the scroll reaches the top and the scroll is facing the bottom at the first rendering.

props	Description	Type
onScrollEnd	This is a function to be executed when the scroll arrives at the top.	Function

sample code

<R_InfiniteScroll
    onScrollEnd={fetchData}
>
    {
        array.map((item, index) => {
            return(
                <Text key={index}>{item}</Text>
            )
        })
    }
</R_InfiniteScroll>

---

npm-react-native-infinite-scroll (Korean)

React Native에서 사용하는 무한스크롤과 역무한스크롤 라이브러리입니다.

무한스크롤은 페이징 처리할 때 많이 사용하며 역무한스크롤의 경우 채팅을 구현할 때 많이 사용합니다.

사용하시면 깃허브에 ⭐ 한 번만 눌러주시면 감사하겠습니다!!

Installation

npm i @hellojh/react-native-infinite-scroll

Components

---

Component	Description
<InfiniteScroll></InfiniteScroll>	위에서 아래로 향하는 스크롤입니다.
<R_InfiniteScroll></R_InfiniteScroll>	아래에서 위로 향하는 스크롤입니다.

InfiniteScroll

일반적인 무한스크롤입니다.

props	Description	Type
endPoint	바닥에서부터 endPoint의 지점에 도달하였을 때 onScrollEnd가 시작됩니다.	Int
onScrollEnd	스크롤이 마지막에 도착했을 때 실행시킬 함수입니다.	Function

sample code

<InfiniteScroll
    endPoint={100}
    onScrollEnd={fetchData}
>
    {
        array.map((item, index) => {
            return(
                <Text key={index}>{item}</Text>
            )
        })
    }
</InfiniteScroll>

R_InfiniteScroll

일반적인 무한스크롤의 반대입니다.
스크롤이 제일 위로 도달하였을 때를 감지하며 첫 렌더링 시 스크롤이 제일 아래로 향해있습니다.

props	Description	Type
onScrollEnd	스크롤이 제일 위에 도착했을 때 실행시킬 함수입니다.	Function

sample code

<R_InfiniteScroll
    onScrollEnd={fetchData}
>
    {
        array.map((item, index) => {
            return(
                <Text key={index}>{item}</Text>
            )
        })
    }
</R_InfiniteScroll>