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

Mastaba

I believe OverlayComponent is just an example of a component but not an actual thing exported. – Killerdiller

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)',
  },
});

Lupelupee

thanks for the reply. this is what i ended up doing in the end, there were a few bugs with it like the view capturing all events but all got solved in the end. Wish it was clearer in the documentation. OverlayComponent still yields undefined for example – Mastaba

@Mastaba how did you prevented the view from capturing all the events? – Leralerch

Two suggestions. 1. Overlay is an overlay over latitude longitude co-ordinates. So it is similar to a map marker. Not suitable for absolute positioning over map points/pixels(instead of co-ordinates). 2. Instead of bottom:50 in overlay, bottom: '50%' will put the overlay right in center. Similar to pointing to the location at the center of map viewport. More useful in location picker scenarios. – Merth

Answer 2

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

Mastaba

Good choice! The React and React Native Google Map implementations has been made by aliens and not for human mindset. – Doubleton