React-Native-ViewPager icon indicating copy to clipboard operation
React-Native-ViewPager copied to clipboard

Android: ViewPager loses scroll anchors

Open metalmalte opened this issue 9 years ago • 5 comments

Hi,

if you are using an IndicatorViewPager in combination with a navigator (in my case react-native-navigation), the ViewPager loses the scroll anchors. To be more specific: lets say the view pager is our root view. When you now push a view on the navigator and pop it again, the view pager is scrolling contiously. This only occurs on android.

Does anyone have an idea here?

Regards, Malte

metalmalte avatar Sep 20 '16 12:09 metalmalte

Hi,

Could you make a video of this issue? I do not clearly understand what you mean.

Thanks Zubin

zbtang avatar Oct 11 '16 10:10 zbtang

I have the same problem as well. The PagerTitleIndicator is no longer connected to the viewpager when we navigate away from the component using a navigator (react-native-navigation)

Is there a way to reconnect it?

davetao avatar Jan 24 '17 13:01 davetao

I'm seeing this same issue. When you navigate away and back (ExNavigation in my case), it no longer snaps to page when scrolling, and no inertia scrolling.

It's a problem with the react native ViewPagerAndroid component. I solved it by not rendering the view for a split second (e.g. setState({loading:true})) then letting it display again.

EricCarrGH avatar Apr 08 '17 16:04 EricCarrGH

@EricCarrGH tell the truth !!

Below my code :

//....
constructor(props) {
        super(props);
        this.state = {
            loading: true
        }
        this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}

onNavigatorEvent(event) {
        switch(event.id) {
            case 'didAppear':
                setTimeout(() => {
                    this.setState({
                        loading: false
                    })
                });
                break;
            case 'didDisappear':
                this.setState({
                    loading: true
                });
                break;
        }
    }

 render() {
        if (this.state.loading){
            return (
                <View style={{flex: 1, alignItems: "center", justifyContent: "center"}} >
                    <Text>Loading ...</Text>
                </View>
            )
        }
        //....
}

Hope it can help someone !

Sebastien-Lampazona avatar Jan 05 '18 15:01 Sebastien-Lampazona

@skymax406 Thanks a lot!!

Shamplol avatar Jan 05 '18 15:01 Shamplol