setPage behavior inconsistency

Environment

"react-native-pager-view": "5.1.8",

Description

I have 3 pages, current index is 0, I invoke viewPagerRef.setPage(2)

android behavior

animation of scrolling goes from page 0 through page 1 to page 2 onPageScroll receives events from page 0 to page 1 and to page 2

ios behavior

On ios view pager skips page 1 while scrolling in both UI and onPageScroll events. animation of scrolling goes from page 0 to page 2. It skips page 1. onPageScroll receives events from page 0 to page 1 and then jumps imminently to page 2.

expected behavior

ios doesn’t skip page with index 1

Reproducible Demo

notice scrolling behavior on the ios.

https://user-images.githubusercontent.com/13404754/118357899-9f699100-b57c-11eb-9ffb-9fbf5b3debec.mov

import React from 'react'
import { Animated, Dimensions, Pressable, StyleSheet, View } from 'react-native'
import ViewPager from 'react-native-pager-view'
import { Text } from 'react-native'

const AnimatedViewPager = Animated.createAnimatedComponent(ViewPager)

export const SwapMealScreen: React.FC<{}> = React.memo(() => {
  const ref = React.useRef<ViewPager>(null)

  const pageScrollPosition = React.useMemo(() => new Animated.Value(0), [])
  const pageScrollOffset = React.useMemo(() => new Animated.Value(0), [])

  const pageIndicatorTransactionX = Animated.add(
    Animated.multiply(pageScrollPosition, Dimensions.get('window').width / 3),
    Animated.multiply(pageScrollOffset, Dimensions.get('window').width / 3)
  )

  const [pageIndex, setPageIndex] = React.useState(0)

  return (
    <>
      <View style={styles.titles}>
        {[1, 2, 3].map((pageName, index) => {
          const isSelected = index === pageIndex

          return (
            <Pressable
              collapsable={false}
              onPress={() => {
                // bug triggers here
                ref.current?.setPage?.(index);
              }}
              key={pageName}
              style={styles.tabContainer}
            >
              <Text
                style={{
                  fontSize: 32,
                  color: isSelected ? '#090' : '#000'
                }}
              >
                {pageName}
              </Text>
            </Pressable>
          )
        })}
        <Animated.View
          style={[
            styles.indicator,
            {
              transform: [
                {
                  translateX: pageIndicatorTransactionX
                }
              ]
            }
          ]}
        />
      </View>
      <AnimatedViewPager
        ref={ref}
        transitionStyle={'scroll'}
        overScrollMode={'never'}
        initialPage={pageIndex}
        onPageScroll={Animated.event(
          [
            {
              nativeEvent: {
                position: pageScrollPosition,
                offset: pageScrollOffset
              }
            }
          ],
          {
            useNativeDriver: true
          }
        )}
        onPageSelected={event => setPageIndex(event.nativeEvent.position)}
        style={styles.pager}
      >
        {[1, 2, 3].map(page => {
          return (
            <View
              style={{
                backgroundColor: `rgba(0, 0, 0, ${(page - 1) * 0.5})`,
                width: '100%',
                height: '100%'
              }}
            />
          )
        })}
      </AnimatedViewPager>
    </>
  )
})

const styles = StyleSheet.create({
  tabContainer: {
    flex: 1,
    paddingBottom: 8,
    marginBottom: 6,
    paddingHorizontal: 8,
    marginHorizontal: 16
  },
  indicator: {
    left: 24,
    position: 'absolute',
    bottom: 0,
    height: 3,
    width: 30,
    backgroundColor: 'green'
  },
  titles: {
    marginTop: 60,
    flexDirection: 'row'
  },
  pager: {
    overflow: 'visible',
    flex: 1
  }
})

[troZee]

I ended up removing the animation from my project. I am not ios native developer, but I will be happy to test code if someone proposes a fix for this.

I am closing this issue, bc if we want to fix it, we need to change the whole iOS “engine” responsible for the page transition (I have no control on the page transitions)

Hence above reason, I am closing this issue. More you can find here: https://github.com/callstack/react-native-pager-view/issues/140

[punksta]

I ended up removing the animation from my project. I am not ios native developer, but I will be happy to test code if someone proposes a fix for this.