React-native-navigation: [V2] disabled sideMenu + iOS pop gestures don't play nicely together

[chrisbenincasa]

Issue Description

I believe there is a subtle issue happening when using a stack layout within a SideMenu layout. Namely, when dynamically disabling the left SideMenu when pushing screens to the stack (to ensure that a right swipe pops from the stack rather than opening the SideMenu), the pop gesture is extremely hard to trigger.

I think this is due to the gesture handler for the SideMenu is still active and attempting to handle the right swipe but the action is terminated because the SideMenu is disabled. If so, perhaps the sideMenu gesture handling should be disabled while the sideMenu itself is disabled? Or there could be another workaround.

Steps to Reproduce / Code Snippets / Screenshots

1. Create a stack layout nested inside of a sideMenu layout (with left and center components)
2. Push a new screen onto the stack while simultaneously disabling the left side menu.
3. Attempt to swipe right in order to pop the new screen from the stack and go back. Note that it's difficult to pop the screen.
4. Redo the steps above but without the sideMenu. After pushing a new screen, note that the pop gesture triggers as expected and feels natural.

Example configuration

export let ListBottomTabs = {
    bottomTabs: {
        id: 'BottomTabs',
        children: [{
            stack: {
                children: [{
                    component: {
                        name: 'navigation.main.ListView',
                        passProps: {
                            text: 'List View'
                        },
                        options: {
                            bottomTab: {
                                text: 'My List',
                                icon: require('../Images/Icons/list-icon.png'),
                                testID: 'FIRST_TAB_BAR_BUTTON'
                            },
                            topBar: {
                                title: {
                                    text: 'My Lists',
                                    color: 'white'
                                },
                                background: {
                                    color: Colors.headerBackground
                                },
                                visible: true
                            }
                        }
                    }
                }]
            }
        },
        {
            stack: {
                children: [{
                    component: {
                        name: 'navigation.main.SearchScreen',
                        passProps: {
                            text: 'Search'
                        },
                        options: {
                            bottomTab: {
                                text: 'Search',
                                icon: require('../Images/Icons/search.png'),
                                testID: 'SECOND_TAB_BAR_BUTTON'
                            },
                            topBar: {
                                title: {
                                    text: 'Search'
                                },
                                // searchBar: true,
                                background: {
                                    color: Colors.headerBackground
                                },
                                visible: true
                            }
                        }
                    }
                }]
            }
        },
        {
            stack: {
                children: [{
                    component: {
                        name: 'navigation.main.NotificationsScreen',
                        passProps: {
                            text: 'Notifications'
                        },
                        options: {
                            bottomTab: {
                                text: 'Notifications',
                                icon: require('../Images/Icons/notification.png'),
                                testID: 'THIRD_TAB_BAR_BUTTON'
                            },
                            topBar: {
                                title: {
                                    text: 'Notifications'
                                },
                                visible: true
                            }
                        }
                    }
                }]
            }
        }],
        options: {
            sideMenu: {
                left: {
                    enabled: true
                }
            }
        }
    }
}

export let ListView = {
    sideMenu: {
        left: {
          component: {
            name: 'navigation.main.MenuScreen',
            passProps: {
              side: 'left'
            }
          }
        },
        center: {
            ...ListBottomTabs,
            options: {
                showsShadow: false
            }
        },
        options: {
            sideMenu: {
                left: {
                    enabled: true
                }
            }
        }
    }
}

Example push

Navigation.push(this.props.componentId, {
    component: {
        name: 'navigation.main.ItemList',
        options: {
            topBar: {
                visible: true,
                title: {
                    text: list.name
                }
            },
            animated: true,
            sideMenu: {
                left: {
                    enabled: true
                }
            }
        }
    }
})

---

Environment

• React Native Navigation version: 2.0.2425
• React Native version: 0.56.0
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Device; iOS 11.4.1; Debug

[billel-boudchicha]

Same behaviour here , test in iOS simulator

[rgoldiez]

Running into the same issue. Seems that the drawer is still capture gestures even though it is disabled.

[jans-y]

Same problem here, in iOS simulator, not able to pop. It sometimes work on device with a lot of effort.

[rgoldiez]

I am working on a PR for this and expect to submit it today for review.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[laukaichung]

@rgoldiez @guyca @chrisbenincasa
This problem still exists in real devices (mine is testing it on IPhone XR). I'm using the latest 2.1.3-snapshot.46 version. I already have the sidemenu disabled by default, but the IOS pop gestures are very difficult to get triggered. It takes more than a few swipes to get it to work. The stack layout alone works well.
Navigation.setRoot({ root: { sideMenu: { left: { component: { id: "drawer1", name: "drawer", } }, center: { stack: { id: "centerStack", children: [ { component: { name: "screen1", } }, ], options: { sideMenu: { left: { enabled: false, visible: false } } } }, }, }, }, });

[itsam]

@yogevbd @rgoldiez @guyca @chrisbenincasa
Hi guys, this problem still exists on version 2.18.4 both for release and debug in iPhone 7 real device. Any ideas or workarounds are highly appreciated. Thanks in advance.

[itsam]

Still an issue in v4.5.3
Thanks in advance