Push new view and come back to the swiper make troubles (wix/react-native-navigation)

[zagoa]

Which OS ?

Android

Version

• react-native-swiper v1.5.13
• react-native v0.54.4

Problem

I use my swiper to do something like Snapchat. I also use wix/React-native-navigation. But in on of my children of the swiper I have a button. This button can push a new view, this is all right ( I have a new view with some kind of things ). But when I press the back button of my android phone I go back to the swiper view BUT the swipe is broken, I need to do multiple swipes to scroll to another screen of the swiper.

Steps to reproduce

1. Create a swiper with 2 screen
2. In one of those screen add a button to push a new view (wix/react-native-navigation).
3. Then do a pop() or press the back button of an android phone

[ozberkctn]

i have same problem. any solution ?

[viotti]

Are you using React Native Navigation v2? If so, I've traced the problem to v2.0.2247.

React Native Swiper works with React Native Navigation v2.0.2246, on Android, but not with v2.0.2247.

This commit, https://github.com/wix/react-native-navigation/pull/3094, seems to break with React Native Swiper.

[viotti]

This issue does not happen with React Native Navigation version 2.0.2274.

[zagoa]

So the problem come from react native navigation version 1. I use it because v2 is not released.

[viotti]

I did not try React Native Swiper with RNN version 1. But I had the same problem you described with version 2.0.2247. Today I updated RNN to 2.0.2274 and the swiper is behaving properly again.

[Tritty]

I have the same problem with v0.44.3RN and v1.1.245 RNN. And I CAN NOT update the RNN. Is there any way to resolve it? Thanks a lot.

[Tritty]

Hi，all！I've found the resolusion. Please check at Toggling tabs not working after poping back in Android. This work for me!

Here's my code.

constructor(props: Props) {
    super(props);
    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
  }

public render(): JSX.Element {
    const { showTouch, flex } = this.state;
    return (
      <View>
            <Swiper
              style={{padding: 0, flex}}
              //other props
            >
              // your component
            </Swiper>
      </View>
    );

private onNavigatorEvent(event) {
    switch (event.id) {
      case "willAppear":
        this.setState({ flex: 1 });
        break;
      case "willDisappear":
        this.setState({ flex: 0 });
        break;
    }
  }
}

I hope it works for u too!

[Tritty]

You can alse user RNN's resetTo() to go back you original page. It works too.

[zagoa]

Great solution ! Thank you so much.