zbtang / React-Native-ViewPager

ViewPager and Indicator component for react-native on both android and ios.
950 stars 276 forks source link

setPage shows wrong page in iOS #171

Open dani1996dani opened 5 years ago

dani1996dani commented 5 years ago

I developed a set of pages using rn-viewpager, using Expo SDK 32, and ran it on an Android emulator while doing so. It works flawlessly on the Android emulator. I started testing it on my physical iPhone, and to my surprise, every time I use setPage(pageIndex), the wrong page shows up, and I think it just always skips 2 pages instead of just one. Are you aware of why would such strange behaviour would occur on iOS? I ran it like a million times on Android and it worked fine.

this is my code that called the setPage() function, and i even tracked it in my logs, and it is NOT being called twice.

componentWillReceiveProps(newProps) {
        if (this.props.createPlanSlider.currentIndex !== newProps.createPlanSlider.currentIndex) {
            log('setting page index to', newProps.createPlanSlider.currentIndex);
            this.viewPager.setPage(newProps.createPlanSlider.currentIndex);
        }
    }

and this is my render function, that shows the pager


render() {
        return (
            <View style={{ flex: 1 }}>
                <View>
                    <IndicatorViewPager
                        ref={viewPager => { this.viewPager = viewPager; }}
                        initialPage={this.props.createPlanSlider.currentIndex}
                        horizontalScroll={false}
                        scrollEnabled={false}

                        //onPageSelected={this.onPageSelected.bind(this)}

                        style={{ height: '100%' }}
                        indicator={this._renderDotIndicator()}>
                        <View>
                            <FinishedCreatingWorkout workoutType={this.props.plan.planType} editing />
                        </View>
                        <View>
                            <CreateManualPlan />
                        </View>

                    </IndicatorViewPager>
                </View>
            </View>
        );
    }

Looking forward to hearing what you guys & gals have to suggest, and if you need more snippets of code to better understand the problem, don't hesitate to write I'll post it here

Environment: Expo: SDK 32 rn-viewpager: 1.2.9 iOS: 12.3.1 iPhone: SE

mAlaliSy commented 5 years ago

I have a similar problem, setPage and setPageWithoutAnimation does not work on iOS. It does not have any effect.

edutq commented 4 years ago

Are you changing the state when calling viewPager.setPage()? If you are then the ViewPager is re-rendering in iOS and that might be the source of the problem. I had a similar problem specifically in iOS because of that. Hope this could (still) help you