Custom marker is croping from right to bottom. Only in IOS.

[midhun-sa]

Summary

Custom marker with a circle animation is not visible completely in IOS only, in Android it is working fine. In IOS it is cropping from right and bottom.

Reproducible sample code

<MapView
        ref={mapView}
        provider={PROVIDER_GOOGLE}
        style={{...props.style}}
        mapType={props.userType === 'companyAdmin' ? props.basemap : 'standard'}
        showsBuildings
        zoomEnabled={props.zoomEnable}
        rotateEnabled={props.rotateEnable}
        scrollEnabled={props.scrollEnable}
        initialRegion={currentRegion}
        onRegionChange={async (region, details) => {
          await UpdateCurrentRegion(region);
        }}
        onRegionChangeComplete={region => {
          setCurrentRegion(region);
        }}
        followsUserLocation={true}
        onMapReady={checkDeviceTofocus}
        maxZoomLevel={19}
        showsCompass={false}>
        {props.showUserLocation && (
          <MapMarker2
            latitude={realTimeLocation.latitude}
            longitude={realTimeLocation.longitude}
            latitudeDelta={realTimeLocation.latitudeDelta}
            longitudeDelta={realTimeLocation.longitudeDelta}
            zIndex={
              device !== null && device !== undefined ? device.length : 10
            }
          />
        )}
        {device !== null &&
          device !== undefined &&
          device.map(
            (e, index) =>
              e.deviceStatus === 1 &&
              e.location &&
              Object.keys(e.location).length !== 0 &&
              e.location.lat.length !== 0 &&
              e.location.lon.length !== 0 && (
                <MapMarker
                  onPress={() => {
                    props.currentId(e.deviceId, e.id, e.location);
                  }}
                  key={index}
                  latitude={e.location.lat}
                  longitude={e.location.lon}
                  latitudeDelta={props.latitudeDelta}
                  longitudeDelta={props.longitudeDelta}
                  PinColorValueOfPointer={e.pinColor ? e.pinColor : 0}
                  zindex={index}
                  radius={e.radius}
                  interpolated={props.interpolated}
                />
               
              ),
          )}
      </MapView>




This is my marker

<Marker
        style={{
          backgroundColor: 'rgba(246, 78, 96,0.5)',//this is for understanding the width and height of the marker container
          minHeight: CircleRadius,
          minWidth: CircleRadius,
          alignItems: 'center',
          justifyContent: 'flex-end',
        }}
        tracksViewChanges={true}
        zIndex={props.zindex}
        onPress={props.onPress}
        coordinate={{
          latitude: props.latitude,
          longitude: props.longitude,
          latitudeDelta: props.latitudeDelta,
          longitudeDelta: props.longitudeDelta,
        }}>
        <Animated.View
          style={[
            {
              backgroundColor: fillColor,
              minHeight: CircleRadius,
              minWidth: CircleRadius,
              borderWidth: 1,
              borderColor: strokeColor,
              borderRadius: height(100),
              zIndex: 100,
              alignItems: 'center',
              justifyContent: 'center',
            },
            (props.PinColorValueOfPointer === 2 ||
              props.PinColorValueOfPointer === 1) && {
              transform: [{scale: props.interpolated}],
            },
          ]}>
          {props.PinColorValueOfPointer === 2 ? (
            <DeviceLocationIconRed />
          ) : props.PinColorValueOfPointer === 1 ? (
            <DeviceLocationIconOrange />
          ) : props.PinColorValueOfPointer === 0.5 ? (
            <DeviceLocationIcon />
          ) : (
            <DeviceLocationIconGreen />
          )}
        </Animated.View>
      </Marker>


This is the animation
 const [movingValue] = useState(new Animated.Value(0));

  useEffect(() => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(movingValue, {
          toValue: 1,
          duration: 1000,
          useNativeDriver: true,
        }),
        Animated.timing(movingValue, {
          toValue: 0,
          duration: 1000,
          useNativeDriver: true,
        }),
      ]),
    ).start();
    return () => {};
  }, []);

  let interpolated = movingValue.interpolate({
    inputRange: [0, 1],
    outputRange: [0.5, 1],
  });

Steps to reproduce

Create a custom marker with circle animation in it. Scale the circle like in the code that i have provided in the reproducible code. In IOS the markers circle should not be cropping.

Expected result

screen-20240315-112049.mp4

Actual result

Skype_Video.1.mp4

React Native Maps Version

"react-native-maps": "^1.8.0",

What platforms are you seeing the problem on?

iOS (Google Maps)

React Native Version

"react-native": "0.73.2",

What version of Expo are you using?

Not using Expo

Device(s)

iPad mini (5th generation )

Additional information

When I commented the provider={PROVIDER_GOOGLE} the animation works fine without croping. but I want to use google maps in bot platforms so that is becomes consistent.

[UmarLE]

Simulator.Screen.Recording.-.iPhone13.-.2024-05-22.at.11.54.30.mp4

i have same problem i solved it by define anchor

 <Marker
      onPress={onPress}
      image={require('../../../Assets/Images/circle.png')}
      anchor={{ x: 0.5, y: 0.5 }}  // Center the marker image
      coordinate={{
        latitude: data?.latitude,
        longitude: data?.longitude,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01,
      }}
    />