Animate the MarkerView

[pohsiu]

I tried to integrate with react-native-reanimated of useAnimatedProps.
But seems like https://github.com/rnmapbox/maps/blob/main/src/components/MarkerView.tsx#L82-L87 will break the update process due to string object prop.

And finally I made it work by rewrite the Kotlin receive props from stringJSON to ReadableArray and process the toPointGeometry inside of MarkerViewManager.kt

version: 10.0.11
pohsiu@a0f5cab

[mfazekas]

@pohsiu thanks much, looks good, can you also post a simple component to reproduce the issue?

[pohsiu]

Hi @mfazekas here are my code below:

import { MarkerView } from '@rnmapbox/maps';
import React, { useCallback, useEffect } from 'react';
import Animated, {
  useSharedValue,
  useAnimatedProps,
  withTiming,
  Easing,
} from 'react-native-reanimated';

const useAnimatedCoord = (coordinate) => {
  const [long, lat] = coordinate;
  const longitude = useSharedValue(long);
  const latitude = useSharedValue(lat);
  const animatedProps = useAnimatedProps(
    () => ({
      coordinate: [longitude.value ?? 0, latitude.value ?? 0],
    }),
    [long, lat]
  );
  const animate = useCallback((options) => {
    const { duration = 500, easing = Easing.inOut(Easing.ease) } = options;

    const animateValue = (value, toValue) => {
      if (!toValue) {
        return;
      }

      value.value = withTiming(toValue, {
        duration,
        easing,
      });
    };

    animateValue(latitude, options.latitude);
    animateValue(longitude, options.longitude);
  }, []);
  return [animatedProps, animate];
};
const AnimatedMarkerView = Animated.createAnimatedComponent(MarkerView);
const GNMarkerView = ({ coordinate: coord, allowOverlap, children }) => {
  const [animatedProps, animate] = useAnimatedCoord(coord);

  // useEffect(() => {
  //   animate({
  //     latitude: coord[1],
  //     longitude: coord[0],
  //     duration: 1000,
  //     easing: Easing.linear,
  //   });
  // }, [coord]);

  return (
    <AnimatedMarkerView animatedProps={animatedProps} allowOverlap={allowOverlap}>
      {children}
    </AnimatedMarkerView>
  );
};

export default React.memo(GNMarkerView);

"eas-cli": "^3.15.0",
"expo": "~48.0.18",
"react": "18.2.0",
"react-native": "0.71.8",
"react-native-reanimated": "^3.5.4",
"@rnmapbox/maps": "10.0.11",

Run on android platform

Faced issue:
ERROR ReanimatedError: Exception in HostFunction: com.facebook.react.bridge.JSApplicationIllegalArgumentException: Error while updating property 'coordinate' of a view managed by: RCTMGLMarkerView, js engine: reanimated

I am not 100% this is due to @rnmapbox/maps, might also related with how reanimated update the props

[pohsiu]

I made it work by fork with these change pohsiu@a0f5cab

[jleprinc]

Great, this worked for me on Android but not on iOS, have you done something else for iOS? I don't see any change in swift in your patch

[pohsiu]

Sry pal, on iOS I used react-native-maps instead, iOS rnmapbox lib replacement is still in progress

[jleprinc]

Ok I have manage to reproduce the same on iOS, I'm thinking about doing a PR:

For those looking for it on iOS, this are the changes for the version 10.1.3
RNMBXMarkerView

// replace String type by Array of number
@objc public var coordinate: Array<NSNumber>? {
didSet {
      update()
    }
  }

// get point from the array of number
var point: Point? {
    guard let _lat = coordinate?[1] else {
        Logger.log(level: .error, message: "[getPoint] No latitude were set")
        return nil
    }
    guard let _lon = coordinate?[0] else {
        Logger.log(level: .error, message: "[getPoint] No Longitude were set")
        return nil
    }
    
    let coord = CLLocationCoordinate2D(
        latitude: Double(_lat) as CLLocationDegrees, longitude: Double(_lon) as CLLocationDegrees);
     
    return Point(coord)
  }

RNMBXMarkerViewManager:

RCT_EXPORT_VIEW_PROPERTY(coordinate, NSArray)

[trungledangAxonActive]

Hi @pohsiu , I've tried doing the same thing as you did but it seems like the Animation is not working. Does it work on your side?

[pohsiu]

I saw @jleprinc create the Pull Request, let me close this

[jleprinc]

This doesn't works for Mapbox 11 on ios, anyone has an idea why? I would reopen it beause of that