Callout component not displaying correctly using React Native Maps

Question

Basically the Callout component is always being cut does not matter what I put inside of it.

Example:

The code:

<MapView
        ref={mapRef}
        style={{
          width: 300,
          height: 400,
        }}
        zoomControlEnabled
        showsUserLocation
        showsMyLocationButton
        showsBuildings={false}
        showsIndoors={false}
        showsPointsOfInterest={false}
        loadingEnabled>
        <Marker
          coordinate={{
            latitude: -20.213090469552533,
            longitude: -40.266256965125116,
          }}
          pinColor={'red'}>
          <Callout>
            <View style={{padding: 10}}>
              <Text style={{color: 'black'}}>Olá</Text>
            </View>
          </Callout>
        </Marker>
      </MapView>

I was expecting to at least show some text inside of it but nothing worked so far.

Are there any updates on this? I am experiencing the same issue — JaRoMaster
– JaRoMaster, Commented Nov 26, 2024 at 20:24

Chanu Perera · Accepted Answer · 2025-01-03 06:49:38Z

0

This happens due to the React Native New Architecture. please refer the React Native Docs https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here

to figure this out without downgrading the react-native version, you can just disable the React Native New Architecture,

Locate your Android/gradle.properties

change newArchEnabled=false

And make sure to rebuild the gradle file after the change

edited Jan 3 at 6:49

answered Jan 3 at 6:48

Chanu Perera

12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Craig Wheeler · Accepted Answer · 2025-09-18 00:43:36Z

0

Try adding title and description props to the <Marker /> component like this:

<Marker
  coordinate={{
    latitude: -20.213090469552533,
    longitude: -40.266256965125116,
  }}
  pinColor="red"
  title="Test title"
  description="Test description"
>

answered Sep 18 at 0:43

Craig Wheeler

1562 silver badges6 bronze badges

Collectives™ on Stack Overflow

Callout component not displaying correctly using React Native Maps

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related