React native drawer not opening on swipe over map - react-native

Question

I am using react-native-navigation to start a single screen app that contains a Google map using - react-native-maps and a left drawer:
Navigation:
Navigation.startSingleScreenApp({
screen: {
screen : 'map.MapScreen',
title : 'Map',
navigatorStyle: {
navBarHidden: true
}
},
drawer : {
left : {
screen : 'drawer.DrawerScreen',
passProps: {}
},
disableOpenGesture: true
},
animationType: 'slide-down',
passProps: {}
})
MapScreen:
export default class MapScreen extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.container}>
<MapView
style={styles.map}
provider={PROVIDER_GOOGLE}>
</MapView>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
zIndex: -1
},
map: {
...StyleSheet.absoluteFillObject,
},
});
Unfortunately if I try to open the drawer, by swiping to the right, over the map, it won't open.
Does anyone have any idea on how to fix this?

Answer 1

You can use an overlay to add some invisible edge on the side of the map that does capture the gesture for opening the drawer.
looks something like this:
const Screen = {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
};
class Foo extends React.Component<Props, object> {
render() {
return (
<View style={styles.container}>
<MapView
style={styles.mapContainer}
/>
<View style={styles.mapDrawerOverlay} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
mapContainer: {
width: Screen.width,
height: Dimensions.get('window').height,
},
mapDrawerOverlay: {
position: 'absolute',
left: 0,
top: 0,
opacity: 0.0,
height: Dimensions.get('window').height,
width: 10,
},
});
This will use an overlay that is transparent and covers a small fraction of the map view. Beginning a drag-gesture in this area now can trigger the drawer.

Answer 2

Do not use ...StyleSheet.absoluteFillObject on your map styles.
Doing this will resolve your issue
const React = require("react-native");
const { StyleSheet, Dimensions } = React;
const { width, height } = Dimensions.get("window");
export default {
map: {
width: width,
height: height
}
};

Answer 3

You need to activate ToggleDrawer() when you hit the side of the map which is covered by a thin TouchableOpacity window. here is the example code in homeview. make sure to bring in props as a variable to your function.
import React from 'react';
import {View, Text, SafeAreaView, StyleSheet, Dimensions, TouchableOpacity} from 'react-native';
import MapView, {Marker} from 'react-native-maps';
const HomeScreen = (props) => {
return(
<SafeAreaView style = {{flex: 1}}>
<View style = {styles.container}>
<MapView
style={styles.mapStyle}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
}
/>
</MapView>
<TouchableOpacity style = {styles.mapDrawerOverlay} onPress = {() => {
props.navigationProps.toggleDrawer();}
} />
</View>
</SafeAreaView>
);
};
export default HomeScreen;
const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
alignItems: 'center',
justifyContent: 'flex-end',
},
mapDrawerOverlay:{
position: 'absolute',
left: 0,
top: 0,
opacity: 0.0,
height: Dimensions.get('window').height,
width:10,
},
mapStyle: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});