CODEWITHSUNDEEP
react-nativereact-native-maps
Generic_coder
Generic_coder

Reputation: 51

React Native Maps text above marker

I wonder if its possible to deplay text on top of a marker so you know what the marker is without having to click on it

<MapView
        style={styles.map}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        <MapView.Marker
          coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
        >
          <View>
            <Text
              style={{
                position: "absolute",
                color: "black",
                textAlign: "center",
              }}
            >
              text
            </Text>
          </View>
        </MapView.Marker>
      </MapView>

Currently doing this but the marker disapears once i put the Text tag, if i remove it the marker shows up again

Upvotes: 3

Views: 1027

Answers (1)

Mohamed Moustafa
Mohamed Moustafa

Reputation: 124

You can use CallOut component from MapView it shows its content whenever you tap the map/marker but this will work only with iOS so you have to check for platform if iOS you can use it and if android you can create your own.you can check react-native-maps/callout

<MapView
  style={{ flex: 1 }}
  initialRegion={{
    latitude: 37.78825,
    longitude: -122.4324,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
  }}
>
  <Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }}>
    {Platform.OS === 'ios' ? (
      // iOS: Use Callout
      <Callout style={{ width: 200, height: 50, margin: 8, justifyContent: 'center' }}>
        <Text
          style={{ color: 'black', fontWeight: 'bold' }}
          numberOfLines={2}
        >
          {address}
        </Text>
      </Callout>
    ) : (
      // Android: Custom View
      <View
        style={{
          backgroundColor: 'white',
          padding: 5,
          borderRadius: 5,
          marginBottom: 10,
          elevation: 3, // Shadow for Android
          shadowColor: 'black',
          shadowOffset: { width: 0, height: 2 },
          shadowOpacity: 0.3,
          shadowRadius: 4,
        }}
      >
        <Text style={{ color: 'black', fontWeight: 'bold' }}>
          {address}
        </Text>
      </View>
    )}
  </Marker>
</MapView>

Upvotes: 0

Related Questions