MarkerView is not compatible with createAnimatedComponent

[unendingblue]

trafficstars

Describe and reproduce the Bug

This issue blocks migration from @rnmapbox/maps.

Using Reanimated's createAnimatedComponenton MarkerView does not work. More specifically:

• MarkerView is a functional component and therefore is not supported out of the box. Only class components are compatible with createAnimatedComponent.
• Using React's forwardRef does not work, causing the render errors Cannot read property 'getScrollableNode' of null and Cannot read property '__internalInstanceHandle' of null.

Having support for Reanimated is quite crucial from a UX point of view, especially when it comes to using useAnimatedProps on the marker's coordinates for smooth movement.

import React from 'react';
import Animated from 'react-native-reanimated';
import { MarkerView } from '@maplibre/maplibre-react-native';

const AnimatedMarkerView = Animated.createAnimatedComponent(
  React.forwardRef(MarkerView),
);

const AnimatedMarkerTestMap = () => {
  return (
    <MapView>
      <AnimatedMarkerView coordinate={[0, 0]}>
        [...]
      </AnimatedMarkerView>
    </MapView>
  );
};

Related issue: https://github.com/maplibre/maplibre-react-native/issues/334 (proposed solution is not a suitable substitute)

@maplibre/maplibre-react-native Version

10.0.1

Which platforms does this occur on?

No response

Which frameworks does this occur on?

Expo

Which architectures does this occur on?

Old Architecture

Environment

-

[lpatrun]

@unendingblue
Have you tried this

const AnimatedMarkerView = Animated.createAnimatedComponent(MarkerView);

Or did you find other solution?

[unendingblue]

@lpatrun Reanimated's createAnimatedComponent only accepts class-based components and RNML's implementation of MarkerView is functional. At the moment (prior to React 19) the solution is to use forwardRef, but it doesn't work in this case - unfortunately I haven't had time to investigate why that is.

[KiwiKilian]

I've started to cleanup the default RN Animated examples in #697 and also noticed missing forwardRef wrappings for MarkerView as well as the layers. So you did try to add forwardRef to MarkerView and that gave Cannot read property '__internalInstanceHandle' of null?

[unendingblue]

@KiwiKilian Yep that's correct.

[kkx64]

Would love a solution for this 😅 @unendingblue @KiwiKilian