Custom Marker issue

[PabloHernan2000]

Summary

Hello.

Reproducible sample code

import { View, Image } from 'react-native'
import React, { memo, useState } from 'react'
import { Marker } from 'react-native-maps'

const BusMarkerComponent = memo(({ coordinates, route, direction, arrow, rotate }) => {

    return (
        <Marker
            coordinate={coordinates}
            title={path}
            centerOffset={{ x: 0.5, y: 0.5 }}
            anchor={{ x: 0.45, y: 0.45 }}
        >
            <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                <Image source={direction} style={{ width: 70, height: 70, transform: [{ rotate: rotate }] }} />
<Image source={arrow} style={{ maxWidth: 14, maxHeight: 14, width: 14, height: 14, position: 'absolute', top: 20, left: 10, tintColor: 'black' }} resizeMode={'contain'} />
</View>
</Marker>
)
})

export default AutobusMarkerComponent;

Steps to reproduce

In my react native app I am using markers as follows

On iOS, the images are displayed correctly, but on Android, it doesn't show anything. Only if I press it, it shows me the text in the title.

Am I doing something wrong?

Expected result

Has anyone had the same problem? Is there a solution? How?

Actual result

I've been trying and haven't been able to come up with a solution.

React Native Maps Version

1.24.10

What platforms are you seeing the problem on?

Android

React Native Version

0.80.1

What version of Expo are you using?

Not using Expo

Device(s)

Android Simulator

Additional information

No response

[dannyyy-jimenez]

+1

[hussainahmad]

using this #5606 resolve the issue.

[quydangdac]

using this #5606 resolve the issue.

This only handles displaying the data again when returning to the screen. Please also refer to issue #5609 . The issue of displaying custom markers still hasn't been addressed.
This issue is similar to issue #5571

[pinpong]

Working on my Emulator with #5606 applied

          <Marker
              anchor={{x: 0.45, y: 0.45}}
              key={marker.key}
              centerOffset={{x: 0.5, y: 0.5}}
              coordinate={marker.coordinate}>
              <View style={{justifyContent: 'center', alignItems: 'center'}}>
                <Image
                  source={require('./assets/flag-pink.png')}
                  style={{
                    width: 70,
                    height: 70,
                    transform: [{rotate: '180deg'}],
                  }}
                />
                <Image
                  source={require('./assets/flag-pink.png')}
                  style={{
                    maxWidth: 14,
                    maxHeight: 14,
                    width: 14,
                    height: 14,
                    position: 'absolute',
                    top: 20,
                    left: 10,
                    tintColor: 'black',
                  }}
                  resizeMode={'contain'}
                />
              </View>
            </Marker>

[fakham]

I have the same issue, the only solution I found is using SVG instead of PNG.

[sema-dev12]

Any solution? I have same issue
React Native Maps Version
1.24.3
React Native Version
0.79.5

[PabloHernan2000]

I have the same issue, the only solution I found is using SVG instead of PNG.

Can I do this if I receive the SVGs from an API?

[dannyyy-jimenez]

the following worked for me after not being able to add the image (png) inside of the marker component

<Marker
testID={testID}
style={style}
zIndex={sidx === focusedLocationIdx ? 2 : 1}
image={pinImage}
/>
Pass image require('some.png') to the marker and remove the Image child

[sema-dev12]

Working fine for me, I am using this version

"react-native-maps": "^1.24.2",
"react-native": "0.79.5",

[guilhermecampossilva9]

If it works on iOS but not on Android, and you're using react-native-maps versions above 1.24.x, you must enable newArchteture in your gradle.properties file.

Ex: newArchEnabled=true

[BrodaNoel]

Enabling new arch is not enough to fix this problem on Android

[LeunensMichiel]

Yup, cut off markers here too. Marker is a simple react view that can have an expanded/collapsed state.

Noticed when upgrading our app from Expo 52 old arch => Expo 53 new arch

[m6265m]

I am able to view the custom markers but the thing is, my map has some filters, if I click on those filters some of the markers vanish/disappear. And sometimes they show the default red marker. Any idea how to resolve this issue? Although the data is coming correctly from BE