Experiment with custom controls in react-native-mapbox-gl/maps

MapControl.stores.tsx

import MapboxGL from "@react-native-mapbox-gl/maps";
import { storiesOf } from "@storybook/react-native";
import React from "react";
import { StyleSheet, Text, TouchableNativeFeedback, View } from "react-native";

/*
Gist to demonstrate an issue I had with @react-native-mapbox-gl/maps.

I'm trying to display a button over a map and allow the user to click it without
the event bubbling up to the map. However, calls to stopPropagation and preventDefault
don't seem to prevent the propagation. The red button demonstrates this.

I've managed to work around the problem by placing the button outside the MapView element
and positioning it absolutely over the top. The blue button demonstrates the workaround.
*/

const styles = StyleSheet.create({
  map: {
    width: "100%",
    height: "100%",
  },
  // eslint-disable-next-line react-native/no-color-literals
  button: {
    position: "absolute",
    top: 10,
    left: 10,
    padding: 10,
    backgroundColor: "rgba(255, 0, 0, 0.5)",
  },
  // eslint-disable-next-line react-native/no-color-literals
  button2: {
    position: "absolute",
    top: 10,
    right: 10,
    padding: 10,
    backgroundColor: "rgba(0, 0, 255, 0.5)",
  },
});

storiesOf("Map", module).add("Custom Control", () => {
  return (
    <View>
      <MapboxGL.MapView
        style={styles.map}
        styleURL="mapbox://styles/mapbox/streets-v11"
        onPress={_evt => {
          console.log("map pressed");
        }}
      >
        <TouchableNativeFeedback
          onPress={evt => {
            evt.preventDefault();
            evt.stopPropagation();
            console.log("button 1 pressed");
          }}
        >
          <View style={styles.button}>
            <Text>Press me 1</Text>
          </View>
        </TouchableNativeFeedback>
      </MapboxGL.MapView>
      <TouchableNativeFeedback
        onPress={() => {
          console.log("button 2 pressed");
        }}
      >
        <View style={styles.button2}>
          <Text>Press me 2</Text>
        </View>
      </TouchableNativeFeedback>
    </View>
  );
});