React Native Maps issue with overlaying components

Question

I am trying to overlay some elements in the middle and too of a map but to no avail. So far i've attempted to use 'OverlayComponent' as described on the documentation

render() {
  return (
    <MapView
      region={this.state.region}
    />
    <OverlayComponent
      style={{position: “absolute”, bottom: 50}}
    />
  );
}

This component it seems isn't really exported by react-native-maps anymore as

import MapView, { OverlayComponent } from 'react-native-maps';

yields undefined for OverlayComponent.

Any ideas? I am a bit at a loss as to how i should approach this.

I tried overlaying a View over the map with pointerEvents set to none which works but one of the elements im trying to overlay needs to capture input, specifically its a TextInput im trying to turn into a searchbar.

Thanks a bungh

Answer 1

react-native-maps has an <Overlay> Component API. That seems to be suitable for images only.

Why not overlay something like TouchableOpacity by positioning it absolutely and wrapping the whole thing in a <View>:

import { Text, TouchableOpacity, View } from 'react-native';
import MapView from 'react-native-maps';

...

render() {
  return (
    <View style={styles.container}>
      <MapView
        style={styles.map}
        ...
      />
      <TouchableOpacity style={styles.overlay}>
        <Text style={styles.text}>Touchable Opacity</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
  overlay: {
    position: 'absolute',
    bottom: 50,
    backgroundColor: 'rgba(255, 255, 255, 1)',
  },
});

Answer 2

We took the mapbox pill and life was better in oh so many ways for the entire team : )