React-native-router-flux: Swipe down conflicts / bugs inside modal (direction="vertical")

[brunolemos]

Version

Tell us which versions you are using:

• react-native-router-flux v3.35.0 (master branch)
• react-native v0.34.1
• device: iPhone 6S (iOS 10.0)

Expected behaviour

1. When swiping left to go to previous page, modal should not be closed.
2. When swiping down a listview, modal should not be closed.

3. There should have an easy option to disable swipe down gesture.

   Actual behaviour

4. In a modal that has multiple pages, when you swipe left to go to previous one, sometimes the modal will close. It will only work if you swipe perfectly in horizontal. If you go down just a little bit, the swipe left gesture will be aborted.

5. You can scroll the listview, but sometimes it will close the modal instead, which is almost always not the desired behaviour.
6. A swipeDownToClose={false} scene property could be a workaround to fix the above problems. But should not be the primary solution, as both swipes should be able to work together.
   

   Steps to reproduce

<Scene key="myModal" direction="vertical">
    <Scene key="modalPage1" component={Page1WithListView}/>
    <Scene key="modalPage2" component={Page2}/>
</Scene>

1. Open modalPage 1
2. Scroll down the listview
3. [SEE GIF BELLOW] When hits the end of the list, the modal will close
4. Go to modalPage2
5. Now the modal has a back button
6. Swipe left to go back to modalPage1
7. [SEE GIF BELLOW] The swipe gesture will keep being aborted because it will think you are trying to close the modal

[ghost]

I'm having this issue as well, but with a Webview

[YuriyUlantsev]

@brunolemos This moment has been observed for a long time.
I use the following decision:

const getSceneStyle = (props, computedProps) => {
const preVerticalDirection = props.scenes[1] ? props.scenes[1].navigationState.direction === "vertical" : null;
const idx = props.scene.index;
const {direction} = props.scene.navigationState;
const inputRange = [idx - 1, idx, idx + 1];

const style = {
flex: 1,
backgroundColor: 'white',
};

if (direction == 'vertical') {
const translateY = props.position.interpolate({
inputRange,
outputRange: [SceneHeight, 0, 0],
});
style.transform = [
{ scale: 1 },
{ translateY },
];
return style;
}

if (preVerticalDirection) {
const scale = props.position.interpolate({
inputRange,
outputRange: [1, 1, 0.95]
});
style.transform = [{scale}];
style.opacity = props.position.interpolate({
inputRange,
outputRange: [1, 1, 0.3],
});
return style;
}

const translateX = props.position.interpolate({
inputRange,
outputRange: [SceneWidth, 0, -SceneWidth/5]
});
style.transform = [{ translateX }];
return style;
};

<Router getSceneStyle={getSceneStyle}/>

[brunolemos]

@YuriyUlantsev Sorry, tried your code and it didn't fix the issue.

[samfoot]

@brunolemos I also have the same issue with a listview in a modal scene. If you drag down slowly on the list it correctly scrolls the listview but if you scroll too fast it then starts to dismiss the modal.

Do you have any workarounds at the moment?

[brunolemos]

@spreech I'm migrating from aksonov/react-native-router-flux to wix/react-native-navigation as it uses 100% native navigation and doesn't have this problems.

[aksonov]

@brunolemos You are right, but it is not problem of RNRF, but JS-based navigation... Actually I've created react-native-router-native to use 100% native navigation but with the same syntax as RNRF...

[casoetan]

This should be easy.
This works for me. Notice the panHandlers

<Scene
      key='login'
      component={LoginComponent}
      panHandlers={null}
      direction='vertical'
      title='Login'>

[brunolemos]

@aksonov cool that you are working on it, I think that's the way to go. I'll keep on eye on the project.

[brettpappas]

@casoetan Thanks for the tip! This fixes the issue for me as well.

[AndrewHenderson]

@asokol Is there documentation on migrating to react-native-router-native? And is it compatible with Redux? I attempted to swap libraries and received several errors.

[jacenko]

@casoetan This helped. Is there a way to still be able to swipe down on the header or a specific component in the scene to dismiss it?

[ryancoughlin]

@casoetan Agreed, I have seen a few interactions that work similar to that and feel very natural. I like the swiping down to dismiss, but maybe add an event on the navigationBar or change the threshold of the responder that listens to the dismiss event.