Flurry of setNativeProps deprecation warnings when using markers

[sharvilak11]

Summary

We are updating plotted markers for drivers frequently and it gives a flurry of warnings stating - setNativeProps is deprecated and will be removed in next major release. This ultimately bloats the console outputs.

console.warn('setNativeProps is deprecated and will be removed in next major release');

Please advise how to remove this warning.

Reproducible sample code

import {Animated, Easing, Image, Platform} from 'react-native';
import {useEffect, useRef, useState} from 'react';
import {AnimatedRegion, Marker} from 'react-native-maps';
import driverMarkerImg from '../../../../../assets/driver-marker.png';

const AnimatedImage = Animated.createAnimatedComponent(Image);

function DriverMarker({location, driver, ...rest}) {
  const [marker, setMarker] = useState(null);
  const [coordinate] = useState(
    new AnimatedRegion({
      latitude: location.Latitude,
      longitude: location.Longitude,
      latitudeDelta: 0.025,
      longitudeDelta: 0.025,
    })
  );
  const rotation = useRef(new Animated.Value(0.01)).current;
  const bearingDegree = rotation.interpolate({
    inputRange: [0, 360],
    outputRange: ['0deg', '360deg'],
  });

  function animateMarker(newLocation) {
    const newCoordinate = {
      latitude: newLocation.Latitude,
      longitude: newLocation.Longitude,
      latitudeDelta: 0.025,
      longitudeDelta: 0.025,
    };
    if (newLocation.Bearing !== null) {
      Animated.timing(rotation, {
        toValue: newLocation.Bearing,
        useNativeDriver: Platform.OS !== 'android',
        easing: Easing.linear,
        duration: 250,
      }).start();
      setTimeout(() => {
        smoothNavigation();
      }, 250);
    } else {
      smoothNavigation();
    }

    function smoothNavigation() {
      coordinate.timing(newCoordinate).start();
    }
  }

  useEffect(() => {
    animateMarker(location);
  }, [location]);

  return location.Bearing ? (
    <Marker.Animated
      identifier={driver.Id}
      coordinate={coordinate}
      ref={marker => {
        setMarker(marker);
      }}
      {...rest}
    >
      <AnimatedImage source={driverMarkerImg} className="w-10 h-14" style={{resizeMode: 'contain', transform: [{rotate: bearingDegree}]}} />
    </Marker.Animated>
  ) : null;
}

export default DriverMarker;

Steps to reproduce

Re-render a marker multiple times and this warning will be printed as many times too.

Expected result

Give an option to turn off this flurry of warnings.

Actual result

React Native Maps Version

1.3.2

What platforms are you seeing the problem on?

Android, iOS (Apple Maps)

React Native Version

0.70.5

What version of Expo are you using?

SDK 46

Device(s)

Any device

Additional information

No response

[zhenguet]

This is really funny.

With me, it just show on IOS, nothing on Android

[sharvilak11]

@zhenguet Funny thing is the console.warn statements are eating up entire memory and it starts giving memory warnings.

[zhenguet]

@sharvilak11 yes. In my case it warns twice but I can not do anything with map -_-
it's so crazy.

[BerkeAras]

Same issue. Map still works but this warnings are spamming the console.

[react-native-maps-bot]

🎉 This issue has been resolved in version 1.6.0-beta.2 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[react-native-maps-bot]

🎉 This issue has been resolved in version 1.6.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[skizzo]

This still happens on Version 1.8.0 / iOS, please re-open this.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If the issue remains relevant, simply comment Still relevant and the issue will remain open. Thank you for your contributions.