How to change the default background colour for mapView.callout using react-native-maps?

user_4973173 0
Viewed 2902

I am trying to change the background color of the callout, but the background color is not effecting to the total view.

Here is the screenshot of what I have:

enter image description here

I want the backgroundColor to encompass the full tooltip.

Here is my code:

<MapView.Callout
            style={{
              width: 200,
              height: 40,
              backgroundColor: '#107B67',
              borderRadius: 10,
              zIndex: 10
            }}
          >
            <View
              style={{
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center'
              }}
            >
              <Text>logkjbkb</Text>
            </View>
          </MapView.Callout>

How can I set the backgroundColor to the whole callout?

react-native-maps react-native maps
2 Answers

You need to set the 'tooltip' prop on the Callout component to true.

<MapView.Callout
    tooltip={true}
    style={{
        width: 200,
        height: 40,
        backgroundColor: '#107B67',
        borderRadius: 10,
        zIndex: 10
     }}
  >
</MapView.Callout>`

Prop: tooltip

Type: Boolean false

If false, a default "tooltip" bubble window will be drawn around this callouts children. If true, the child views can fully customize their appearance, including any "bubble" like styles.

Here is the reference: https://github.com/react-native-community/react-native-maps/blob/master/docs/callout.md

user_115060050

This worked for me (if you want to use default bubble)

  • Create a custom callout with style CustomCallout View with style {margin: -30; padding: 30; backgroundColor: "Your favorite color"}
  • Use it inside Callout <Callout> <CustomCallout/> </Callout>
user_99031760
Related