React Native: How to show marker info on geojson point?

Question

I try to get the info from a geojson point but cant find anywhere a solution.

the point in my geojson:

{
                "type": "Feature",
                "properties": {
                    "name": "bridge",
                    "sym": "Waypoint"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        35.1480779,
                        31.6900743,
                        933
                    ]
                }
            }

the marker and way points works perfectly, I just need to show the info on click event.

Answer 1

If you would like to show the information from the geojson data everytime you click the marker, you can set the value of your title or description from the geojson data. Here's a sample code and code snippet below:

import React, { Component } from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import MapView, { Marker, Geojson } from 'react-native-maps';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});
const myPlace = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        name: 'bridge',
        sym: 'Waypoint',
      },
      geometry: {
        type: 'Point',
        coordinates: [64.165329, 48.844287],
      },
    },
  ],
};

class MapApp extends Component {
  
  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          initialRegion={{
            latitude: 64.165329,
            longitude: 48.844287,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>
          <Marker
            coordinate={{
              latitude: myPlace.features[0].geometry.coordinates[0],
              longitude: myPlace.features[0].geometry.coordinates[1],
            }}
            title={myPlace.features[0].geometry.type}
            description={myPlace.features[0].properties.name}
          />

          <Geojson
            geojson={myPlace}
            strokeColor="red"
            fillColor="green"
            strokeWidth={2}
          />
        </MapView>
      </View>
    );
  }
}

export default MapApp;