zbtang / React-Native-ViewPager

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

Android: ViewPager loses scroll anchors #17

Open metalmalte opened 8 years ago

metalmalte commented 8 years ago

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

zbtang commented 7 years ago

Hi,

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

Thanks Zubin

davetao commented 7 years ago

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?

EricCarrGH commented 7 years ago

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.

Sebastien-Lampazona commented 6 years ago

@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 !

Shamplol commented 6 years ago

@skymax406 Thanks a lot!!