react-native-pager-view infinite scroll

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

Jul 14 '20 04:07 hengkx

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

Jul 16 '20 11:07 troZee

#30

Jul 16 '20 15:07 hengkx

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

Oct 20 '20 16:10 dhirajanand014

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.

Apr 19 '21 10:04 binchik

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} />
    </>
  )

Apr 21 '21 09:04 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} />
    </>
  )

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%', }}>