Dark Mode Callouts

[bwees]

Summary

I would like to set the background color fo the callout for use in dark mode situations. I cannot seem to find a solution to either setting the background color or just using whatever the default styling is. I cannot use a tooltip because I need the pointer and it has weird behavior when on the edges of the display.

I cannot set the background color of the view inside because it just has a white border around it.

Reproducible sample code

<Callout 
            style={{ 
                alignItems: 'center',
                backgroundColor: "black"
            }}
        >
            <Text>Hello</Text>
        </Callout>

Steps to reproduce

Use the callout example but use the above code as your Callout

Expected result

I expect the whole callouts color to change. I have not tested on android but this needs to look correct on both platforms...

Actual result

There is a white border or the callout is not centered when at edge of screen.

React Native Maps Version

1.7.1

What platforms are you seeing the problem on?

iOS (Apple Maps)

React Native Version

0.72.6

What version of Expo are you using?

SDK 48

Device(s)

All iOS, unsure about behavior on android

Additional information

No response

[jan-kozinski]

Hi, thanks for reporting this! Unfortunately, there's no other way than to use the tooltip property. But what you can do is nesting a triangle in the Callout to serve as a pointer as in

<Callout
          tooltip
          style={{
            width: 140,
            height: 140,
          }}>
          <View
            style={{
              height: '100%',
              width: '100%',
              backgroundColor: '#1b1b1b',
              borderRadius: 20,
              padding: 10,
            }}>
            <Text style={{color: 'white'}}> Hola! </Text>
          </View>
          <View
            style={{
              width: 0,
              height: 0,
              marginLeft: 'auto',
              marginRight: 'auto',
              borderColor: 'transparent',
              borderTopWidth: 20,
              borderTopColor: '#1b1b1b',
              borderLeftWidth: 20,
              borderRightWidth: 20,
              marginBottom: 10,
            }}
          />
        </Callout>

[bwees]

I have done this but when a marker is tapped on the edge of the screen, the callout is not centered on the point, resulting in a marker that is offset from the actual point. I can’t program the map to center on the point before the callout appears because it results in the same behavior.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If the issue remains relevant, simply comment Still relevant and the issue will remain open. Thank you for your contributions.