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;
If you have
layoutDirection="rtl"
prop in PagerView. Try Removing it e.gNot working code
Working code for me
This solution worked for me.