React-native-pager-view: infinite scroll

[hengkx]

As dev, I would like to have ability to have infinite scroll behavior.

[troZee]

Hey,
For now, we don't support this kind of functionality. PR are welcome.

[hengkx]

30

[dhirajanand014]

How do we about implementing it customly. This is much required!

[binchik]

I insert the first page to the end of pages aray: const pages = [<Page1 />, <Page2 />, <Page3 />, <Page1 />];. Then I track selected page using onPageSelected callback, and when selectedPage >= pages.length - 1 I call pagerViewRef.current?.setPageWithoutAnimation(0);.

That creates an illusion of infinite scroll, it doesn't work if you want to go swipe back from the first page to see the last, but it must be achievable in the same way, setting the initialPage={1}.

A proper implementation would be nice though.

[ahmedam55]

To continue of @binchik steps:

const slides = [slide1, slide2, slide3]
  const firstSlide = slides[0]
  const lastSlide = slides[slides.length - 1]
  const loopingSlides = [lastSlide, ...slides, firstSlide]
  const viewPagerRef = useRef()

  return (
    <>
      <ViewPager
        initialPage={1}
        ref={viewPagerRef}
        onPageSelected={event => {
          const currentPage = event.nativeEvent.position
          const reachedFakeLastSlide = currentPage === 0
          const reachedFakeFirstSlide = currentPage === loopingSlides.length - 1

          if (reachedFakeFirstSlide) {
            viewPagerRef.current.setPageWithoutAnimation(1)
          } else if (reachedFakeLastSlide) {
            viewPagerRef.current.setPageWithoutAnimation(loopingSlides.length - 2)
          } else {
            setPage(currentPage)
          }
        }}
        style={styles.container}
      >
        {loopingSlides}
      </ViewPager>
      <Indicators length={3} active={page - 1} />
    </>
  )

[oarsoy]

To continue of @binchik steps:

const slides = [slide1, slide2, slide3]
  const firstSlide = slides[0]
  const lastSlide = slides[slides.length - 1]
  const loopingSlides = [lastSlide, ...slides, firstSlide]
  const viewPagerRef = useRef()

  return (
    <>
      <ViewPager
        initialPage={1}
        ref={viewPagerRef}
        onPageSelected={event => {
          const currentPage = event.nativeEvent.position
          const reachedFakeLastSlide = currentPage === 0
          const reachedFakeFirstSlide = currentPage === loopingSlides.length - 1

          if (reachedFakeFirstSlide) {
            viewPagerRef.current.setPageWithoutAnimation(1)
          } else if (reachedFakeLastSlide) {
            viewPagerRef.current.setPageWithoutAnimation(loopingSlides.length - 2)
          } else {
            setPage(currentPage)
          }
        }}
        style={styles.container}
      >
        {loopingSlides}
      </ViewPager>
      <Indicators length={3} active={page - 1} />
    </>
  )

There is no example for loop implementation with this component. I tried to apply this code to my project, but I couldn't run. Any idea?

  render() {

  const slides = this.state.slideData;
  const viewPagerRef = useRef<Container2 | null>(null);
    const firstSlide = slides[0]
  const lastSlide = slides[slides.length - 1]
  const loopingSlides = [lastSlide, ...slides, firstSlide]

const Container2 = styled(PagerView)`
    height: ${height}px;
    width: 100%;
`

<Container2
            orientation='horizontal'
            initialPage={1}
            onPageSelected={(e) => {

 const currentPage = e.nativeEvent.position
          const reachedFakeLastSlide = currentPage === 0
          const reachedFakeFirstSlide = currentPage === loopingSlides.length - 1

          if (reachedFakeFirstSlide) {
            viewPagerRef.current.setPageWithoutAnimation(1)
          } else if (reachedFakeLastSlide) {
            viewPagerRef.current.setPageWithoutAnimation(loopingSlides.length - 2)
          }



    this.setState({ selectedd: e.nativeEvent.position })
  //  console.log(this.state.selectedd);
   // alert('aaas') 
  }
  }
        ref={viewPagerRef}>                 
{item.subdata.map((subitem, indexx) => {
                return (
<View key={indexx} style={{ justifyContent: 'center', width: '100%', }}>                    

[CPPAlien]

@binchik it's not good, it will cause blink

[troZee]

I did a investigation and it should be implemented using below tutorials/code:

Android:
https://medium.com/mobile-app-development-publication/android-bi-direction-infinite-viewpager-2-scrolling-1a729e4ee773

iOS:
https://github.com/igroomgrim/Infinite-scroll-with-uipageviewcontroller