🐛 Imperative API Calls (setPage, incrementPage, decrementPage) Behave Unexpectedly When initialIndex is Greater Than 0

[GhayoorUlHaq]

Description

Having an issue with the imperative API calls setPage, incrementPage, and decrementPage. When the initialIndex is set to a value greater than 0, these methods seem to increment or decrement the page number by the value of initialIndex rather than by 1. This behavior is unexpected and seems to be a bug on both iOS and android.

When I use swipe gesture, it works fine.

Expected Behavior

The page number should increment or decrement by 1, regardless of the initialIndex value when we use Imperative API calls.

Code to reproduce

import React, {useRef} from 'react';
import {Text, View, StyleSheet, Pressable} from 'react-native';
import InfinitePager from 'react-native-infinite-pager';
import {GestureHandlerRootView} from 'react-native-gesture-handler';

const NUM_ITEMS = 50;

function getColor(i: number) {
  const multiplier = 255 / (NUM_ITEMS - 1);
  const colorVal = Math.abs(i) * multiplier;
  return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`;
}

const Page = ({index}: {index: number}) => {
  return (
    <View
      style={[
        styles.flex,
        {
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: getColor(index),
        },
      ]}>
      <Text style={{color: 'white', fontSize: 80}}>{index}</Text>
    </View>
  );
};

export default function App() {
  const pagerRef = useRef(null);
  return (
    <GestureHandlerRootView style={styles.flex}>
      <Pressable
        onPress={() => {
          pagerRef.current?.decrementPage({animated: true});
        }}
        style={styles.button}>
        <Text>Prev</Text>
      </Pressable>
      <Pressable
        onPress={() => {
          pagerRef.current?.incrementPage({animated: true});
        }}
        style={{...styles.button, right: 0}}>
        <Text>Next</Text>
      </Pressable>
      <InfinitePager
        initialIndex={3}
        ref={pagerRef}
        PageComponent={Page}
        style={styles.flex}
        pageWrapperStyle={styles.flex}
      />
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  flex: {flex: 1},
  button: {
    backgroundColor: 'red',
    height: 75,
    width: 75,
    top: 150,
    zIndex: 100,
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

How issue look likes

issue.mov