React-native-pager-view: initial page render question

[baesumin]

Ask your Question

when PagerView rendered,
even though the initialPage={1} is selected, Page 0 is displayed first then Page 1 is displayed.
i use Android simulator. help!

[troZee]

Hello 👋
Thank you for reporting an issue. How about the ios ?

[baesumin]

Hello 👋
Thank you for reporting an issue. How about the ios ?

I haven't tried ios.

[troZee]

I am not able to reproduce it, hence I am closing this issue

[baesumin]

i think same problems in android ..

https://www.gitmemory.com/issue/react-native-community/react-native-viewpager/101/553832372
https://github.com/callstack/react-native-pager-view/issues/190
https://github.com/callstack/react-native-pager-view/issues/101

Even if i use 'ViewPagerRef.current.setPageWithoutAnimation(idx)',
always initialPage0 first appear.

<ViewPager
        ref={ViewPagerRef}
        initialPage={1}
        onPageSelected={e => {
          console.log(e.nativeEvent.position);
        }}>
        <View key="1">
          <aPager />
        </View>
        <View key="2">
          <bPager />
        </View>
</ViewPager>

log says 0 then 1

[rajeshde]

Will this fix be on a new release version soon?

[troZee]

@rajeshde https://github.com/callstack/react-native-pager-view/releases/tag/v5.3.3

[tx-techxpert]

still not working for me

[phuocantd]

still not working for me

same to you

[troZee]

I am not able to reproduce that

https://user-images.githubusercontent.com/12766071/127867430-939f9bc1-2ab6-41b1-b85e-f7ecaada0766.mov

[troZee]

is it refers to this issue ? https://github.com/callstack/react-native-pager-view/issues/409

[skipness]

Maybe it's about using state to store the initialIndex? I found that if I use state to store the index, pager will select page 0 first then select page 3

// BasicPagerViewExample.js
export function BasicPagerViewExample() {
  const { ref, ...navigationPanel } = useNavigationPanel();
  const [index, setIndex] = useState(0);
  useEffect(() => {
    setIndex(3)
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <AnimatedPagerView
        //@ts-ignore
        testID="pager-view"
        ref={ref}
        style={styles.PagerView}
        initialPage={index}
       .......

but if I set initialPage like this: initialPage={3} or using useLayoutEffect to set the index, pager will set to third page on first rendering

https://user-images.githubusercontent.com/8035517/128470055-7ff54522-963f-4dd0-ac58-d3bb9a1ad5b8.mp4

[troZee]

Why do you store the initial index in state ? It is incorrect usage. Please take a look on the example https://github.com/callstack/react-native-pager-view/blob/master/example/src/BasicPagerViewExample.tsx