Use sideMenu with react-native-maps ?

[ArthurAttout]

Hello !

So I have this screen on which I use react-native-maps and react-native-side-menu When opening the drawer, the maps sometimes moves with the movement, which results in a bad UX.

Has someone ever had the issue ? Is there something, like an event, when the drawer is opening that I could catch to lock the scrolling on the map (event though I don't even think it's possible) ?

Thanks !

[CatalinMS]

Hello,

I encountered the same issue. Is there a solution to this?

Thanks

[mike-marcacci]

I'm seeing similar behavior on iOS using Mapbox. I've tried setting pointerEvents="none" on the map's containing View using the onMove callback, but it appears that the event is already captured map.

[alexcittadini]

double clicking on the map (to zoom) also occasionally opens the side view for me

[alexcittadini]

easy fix - disable gestures

<SideMenu menu={} isOpen={this.state.sideMenu} disableGestures

[reasonman]

I noticed this when I switched from react-native-navigation drawers to this and my fix there ended up working around this as well. The problem there is that the map would consume the swipe gesture before the drawer did. The fix was to put a small view vertically along the drawers edge that 'blocked' the map from getting the touch:

class App extends Component {
  render() {
    const menu = <Menu navigator={navigator} />
    return(
      <SideMenu menu={menu} edgeHitWidth={30}>
        <MapScreen />
      </SideMenu>
    )
  }
}

class MapScreen extends Component {
render() {
    return(
      <SafeAreaView style={styles.container}>
        <MapView />
        <View style={styles.mapDrawerOverlay} />
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
   container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#abcdef',
      },
   mapDrawerOverlay: {
      position: 'absolute',
      left: 0,
      top: 0,
      opacity: 0.0,
      height: Dimensions.get('window').height,
      width: 20
    }
})

For whatever reason if I set the view width and edgeHitWidth to the same, the drawer doesn't open at all. I set it to +10 of the view and it seems to match up, don't know why it can't be the same size though.