React-native-navigation: [V2] iOS Side Menu Layout disables component panResponder gestures on a certain move threshold

Created on 28 Jun 2018 · 14Comments · Source: wix/react-native-navigation

Issue Description

On iOS gestures are interrupted if you have defined a side menu layout. Any panResponder gestures are commandeered by side menu controller upon reaching a certain threshold (appears to be greater than 10 units).

Steps to Reproduce / Code Snippets / Screenshots

A simple app to reproduce.

App.js is as follows:

import React from 'react';
import { Navigation } from 'react-native-navigation';
import { StyleSheet, Text, View, Platform, Animated, PanResponder} from 'react-native';

class List extends React.Component {
constructor() {
super();
this._panResponder = PanResponder.create({
    onMoveShouldSetPanResponder: (evt, gestureState) => {
    return true;
    },
    onPanResponderMove: (evt, gestureState) => {
    console.log('x: ' + gestureState.dx + ', y: ' + gestureState.dy);
    }
});
}
render() {
return (
    <Animated.View style={{flexGrow: 1}}
    {...this._panResponder.panHandlers}/>
);
}
}

const App = () => {
Navigation.registerComponent("List", () => List );

Navigation.events().registerAppLaunchedListener(() => {

    Navigation.setDefaultOptions(
    {
        statusBar: {
        backgroundColor: 'yellow'
        },
        //popGesture: false,
        layout: {
        backgroundColor: 'green',
        orientation: ['portrait'] // An array of supported orientations
        },
        topBar: {
        height: 50,
        title: {
            text: "hey"
        },
        backButton: {
            visible: false
        },
        background: {
            color: 'blue',
        },
        },
        sideMenu: {
        right: {
            enabled: true,
        }
        }    
    }
    )

    Navigation.setRoot({
    root: {
        sideMenu: {
        center: {
            stack: {
            id: "contentStack",
            children: [{
                component: {
                name: 'List',
                passProps: {
                    text: 'stack with one child'
                },
                options: {
                    sideMenu: {
                    right: {
                        visible: false,
                        enabled: true
                    }
                    }
                }
                }
            }],
            }
        },
        right: {
            component: {
            name: 'List',
            alignment: 'fill'
            }
        }
        }
    }
    });
});
}

export {App as default};

index.ios.js is as follows:

import App from './App';

new App();

Environment

React Native Navigation version: 2.8.0
React Native version: 0.55.0
Platform(s) (iOS, Android, or both?): iOS
Device info (Simulator/Device? OS version? Debug/Release?): Simulator OS 11.4

🏚 stale

Source

Squall410

👍14

Most helpful comment

I am experiencing the same thing. I want a side drawer but then it seems to take precedence over the gestures of the content component. Great example @Squall410. I would think this would be pretty high priority since the whole point of having a smart phone with a touch screen is to implement gesture actions. Also side drawers are really common. I hope we can get the two to work together. Does any one have any ideas?

Milesc22 on 16 Jul 2018

👍8

All 14 comments

Milesc22 on 16 Jul 2018

👍8

nezaidu on 6 Aug 2018

Update: I updated our builds against version 2.0.2505 and this is still occurring. The sample code app above also exhibits this behavior against this version as well.

Squall410 on 29 Aug 2018

Update: tested against version 2.0.2556 and this appears to be resolved. Thank you!

Squall410 on 21 Sep 2018

I recently updated to 2.2.0 and started to see this again. It also occurs on version 2.3.0 and 2.4.0. The same sample app can be used to see the behavior without any additional steps. Initial post updated to indicate new version constraints.

Squall410 on 26 Dec 2018

👍5

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 Detox and report back. Thank you for your contributions.