Image dosent display on the map

[SlavaC7]

When I display a picture on the map in the marker component, it is not shown on the map

code:

import { Image, View } from 'react-native'


 <MapView
        ref={mainMapRef}
        style={S.styles.map}
        toolbarEnabled={false}
        provider={MapProvider}
        userInterfaceStyle={'light'}
        maxZoomLevel={21}
        cameraZoomRange={{
          maxCenterCoordinateDistance: 1000000,
          animated: true,
        }}
        initialRegion={initialRegion}>
....
 <Marker
              tracksViewChanges={false}
              anchor={{ x: 0.5, y: 0.5 }}
              coordinate={location}>
              <View style={{ backgroundColor: 'blue' }}>
                <Image
                  source={DefaultImage}
                  // pngSource={DefaultImage}
                  style={{
                    width: 30,
                    height: 30,
                    backgroundColor: 'red',
                    zIndex: 1000,
                  }}
                />
              </View>

              <Icon name={'UserPin'} />
            </Marker>

screenshot

The map shows the component (SVG) and View is displayed on the map on the coordinates, but the image is not. I could not find a solution to the problem. I have tried many ways to display the image but I can only see the red background of the image and that's it.

I also managed to display the image by interlacing the marker image={{{uri}}}. But it cannot be edited in any way (dimensions, BorderRadius, etc.).

if there are any solutions, please help me

[milad-hub]

Hey @SlavaC7!

The problem is that React Native's <Image> component doesn't play nice with custom marker views - it's a Fresco rendering thing. That's why the backgrounds show up but not the actual image.

Try using the image prop directly on the Marker instead:

<Marker
  coordinate={location}
  image={DefaultImage}
  anchor={{ x: 0.5, y: 0.5 }}
/>

Works with both local images and remote URLs.

If you really need to customize the look (like adding borderRadius or whatever), SVG is your answer:

import Svg, { Circle } from 'react-native-svg';

<Marker coordinate={location}>
  <Svg width={30} height={30}>
    <Circle cx="15" cy="15" r="15" fill="#FF5722" />
  </Svg>
</Marker>

The image prop should fix your issue though.