[Android] Text in custom callout grows vertically with width of marker

[satori-ytolstoguzov]

Is this a bug report?

Yes

Have you read the Installation Instructions?

Yes

Environment

"react-native": "0.51.0",
"react-native-maps": "git+https://github.com/react-community/react-native-maps.git" (0.18.3)

Steps to Reproduce

<MapView.Marker ...>
    ...
    <MapView.Callout tooltip><Text>This text should be one-liner</Text></MapView.Callout>
</MapView.Marker>

Expected Behavior

I expect it to be displayed same way non-tooltip text is:
Text is displayed in one line.

Actual Behavior

Text displayed vertically with same weird soft-wrapping:

Reproducible Demo

https://github.com/satori-ytolstoguzov/rn-maps-callout-offset/tree/android-callout-text
Add your API key to AndroidManifest.xml and do yarn install.

[alvelig]

Both platforms?

[satori-ytolstoguzov]

Only android. On iOS callout has different issues

[satori-ytolstoguzov]

I just realized that it's not soft-wrapping. The text has width of the marker. Even if I remove some spaces it's still has same wrapping.

[alvelig]

Exactly. Wrapping Text in a View and setting width takes out this effect, doesn't it?

[satori-ytolstoguzov]

Yes. If I specify width - it's working, but it's not dynamic.

[satori-ytolstoguzov]

My goal is to have width of the callout that corresponds width of a text plus some margins. I don't know any good ways to calculate width of the text beforehand.

[rborn]

@satori-ytolstoguzov could you try to play with a combination of minWidth/maxWidth ?

[satori-ytolstoguzov]

@rborn As you suggested I played with it. It looks like maxWidth is ignored unless it's smaller than marker width, then it works like width. It's reversed for minWidth: if it's smaller than marker width - it's ignored, if it's bigger - it works like width. The width of the text is not dynamic anyway.

For example:

<MapView.Callout tooltip style={{backgroundColor: 'red', minWidth: 100, maxWidth: 300}}><Text>This text should be one-liner</Text></MapView.Callout>

Result:

[rborn]

@satori-ytolstoguzov I was thinking to apply those on the Text, not Callout

[satori-ytolstoguzov]

It works strange. Notice that it has same height, but different width.

<MapView.Callout tooltip style={{backgroundColor: 'red'}}><Text style={{minWidth: 100, maxWidth: 400}}>This text should be one-liner</Text></MapView.Callout>

<MapView.Callout tooltip style={{backgroundColor: 'red'}}><Text style={{minWidth: 0, maxWidth: 400}}>This text should be one-liner</Text></MapView.Callout>

[rborn]

Sorry, no more ideas here, maybe you could try to find a module that measures the text without rendering it.

[satori-ytolstoguzov]

Tried to do that. iOS do that easily, Android struggles with that same as JS.

[rborn]

ok, what about faking it? You know how many chars are in the text, what is the size of the widest char so you can multiply and get/set a width.
some text will have a bigger padding, some less, but they will fit on one line.

if it's worth it, you could even make some calculations based on "thin" and "fat" chars.

[satori-ytolstoguzov]

We have also different fonts for iOS and Android, but it's doable. Thanks for the idea!