Box Shadow react-native-maps package

41 Views Asked by At

I have a problem when placing a shadow box to a marker in the react-native-maps tool so any help you can give me would be great! Thank you in advance.

I am using Expo v49.0.0 React Native v0.72.5 React Native Maps 1.7.1

Image without box shadow

<Marker 
  coordinate={mapRegion} 
  title={firebase.auth().currentUser.displayName}
  resizeMode="contain"
  style={styles.markerStyle}
>
  <View style={styles.viewMarker}>
    <Image
      source={userPhoto ? { uri: userPhoto } : AVATAR_DEFECTO}
      style={styles.markerImage}
    />
  </View>
</Marker>

Style.js

markerStyle: {
    zIndex: 1000,
    borderRadius: 50,
    shadowColor: "#f00",
    shadowOffset: {
        width: 20,
        height: 20,
    },
    shadowOpacity: 0.9
},
viewMarker: {
    shadowColor: "#f00",
    shadowOffset: {
        width: 20,
        height: 20,
    },
    shadowOpacity: 0.9
},
markerImage: {
    width: 60,
    height: 60,
    maxHeight: 60,
    borderRadius: 50,
    maxWidth: 60,
    borderColor: theme.Default.border,
    borderWidth: 3,
    shadowColor: "#f00",
    shadowOffset: {
        width: 20,
        height: 20,
    },
    shadowOpacity: 0.9
}

I tried to add the boxShadow to the Marker, the View and the Image, but no, I even tried to follow a tutorial on YouTube if it worked but it didn't work for me.

I tried adding the shadow to the three elements, the Marker, View and Image, I hoped it would work.

0

There are 0 best solutions below