React-native View-pager setPage is not working on iOS

1.7k Views Asked by At

I'm using react-native-pager-view and I try to setPage on my index change but it doesn't work on iOS devices. Flow is like this that I try to pass the index as a props to my custom ViewPager and I'm using the UseEffect to setPage for my ViewPager which is not working on iOS and I have no idea why.

    // @flow
    import React, { useEffect, useRef } from 'react';
    import { StyleSheet, View, I18nManager } from 'react-native';
    import PagerView, { PagerViewOnPageSelectedEvent } from 'react-native-pager-view';
    
    type Props = {
        children: React$Node,
        index: number,
        onIndexChange: (index: number) => void,
    };
    

    const MyViewPager = ({ children, index, onIndexChange }: Props) => {
        const viewPagerRef = useRef<PagerView>(null);
    
        useEffect(() => {
            viewPagerRef.current?.setPage(index);
        }, [index]);
    
     
        const onPageSelect = (e: PagerViewOnPageSelectedEvent) => {
            onIndexChange(e.nativeEvent.position);
        };
    
        return (
            <View style={styles.container}>
                <PagerView
                    ref={viewPagerRef}
                    style={styles.container}
                    initialPage={index}
                    orientation="horizontal"
                    onPageSelected={onPageSelect}
                >
                    {children}
                </PagerView>
            </View>
        );
    };
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
        },
    });
    
    export default MyViewPager;

2

There are 2 best solutions below

0
On

If you have layoutDirection="rtl" prop in PagerView. Try Removing it e.g

Not working code

      <PagerView
        initialPage={0}
        layoutDirection="rtl"
        ref={ref}
        scrollEnabled={false} >

Working code for me

<PagerView
    initialPage={0} 
    ref={ref} 
    scrollEnabled={false} >

This solution worked for me.

0
On

the @next version "^6.0.0-rc.0" worked for me

yarn add react-native-pager-view@^6.0.0-rc.0

or if you are using npm

npm i react-native-pager-view@^6.0.0-rc.0