Broken color styles with animated CircleLayer

[salindersidhu]

Describe the bug
It looks like colors are missing or not applied to animated circles when using expressions styles. The circle color defaults to black.

To Reproduce

1. Create a new react native app.

npx react-native init AwesomeProject

2. Install RN mapbox.

npm install @react-native-mapbox-gl/maps --save

3. Replace App.js with the code snippet below.

4. Run the app.

Code:

import React, {useState, useEffect} from 'react';
import MapboxGL from '@react-native-mapbox-gl/maps';
import {StyleSheet, Animated} from 'react-native';

const circleStyles = {
  circleColor: [
    'step',
    ['get', 'val'],
    '#6FBF73',
    1.0,
    '#A2CF6E',
    2.0,
    '#FFCD38',
    4.0,
    '#FFAC33',
    5.0,
    '#FF784E',
    6.0,
    '#F6685E',
    7.0,
    '#ED4B82',
    8.0,
    '#E666FB',
    9.0,
    '#AF52BF',
  ],
  circleRadius: 20,
  circleOpacity: 1,
};

const shape = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        val: 2,
      },
      geometry: {
        type: 'Point',
        coordinates: [-105.8203125, 48.69096039092549],
      },
    },
    {
      type: 'Feature',
      properties: {
        val: 6,
      },
      geometry: {
        type: 'Point',
        coordinates: [-88.154296875, 51.28940590271679],
      },
    },
    {
      type: 'Feature',
      properties: {
        val: 8,
      },
      geometry: {
        type: 'Point',
        coordinates: [-90.3515625, 40.44694705960048],
      },
    },
  ],
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

const App = () => {
  const [opacity] = useState(new Animated.Value(1));
  const [radius] = useState(new Animated.Value(15));

  const expandAnimation = Animated.parallel([
    Animated.timing(opacity, {
      toValue: 0,
      duration: 1000,
      useNativeDriver: false,
    }),
    Animated.timing(radius, {
      toValue: 15 * 3,
      duration: 1000,
      useNativeDriver: false,
    }),
  ]);

  const circleAnimation = Animated.loop(expandAnimation);

  useEffect(() => {
    circleAnimation.start();
  }, [circleAnimation]);

  return (
    <MapboxGL.MapView
      styleURL={MapboxGL.StyleURL.Light}
      style={styles.container}>
      <MapboxGL.ShapeSource id="shapeSource" shape={shape}>
        <MapboxGL.Animated.CircleLayer
          id="animatedCircle"
          style={[circleStyles, {circleRadius: radius, circleOpacity: opacity}]}
        />
      </MapboxGL.ShapeSource>
    </MapboxGL.MapView>
  );
};

export default App;

Expected behavior
The circles render with animations and correct colors. The colors are based off the Feature's value property in the GeoJSON data.

Actual behavior
The circles render with animations but with black color.

Screenshot

Video
https://user-images.githubusercontent.com/12175684/159401269-d77ef0cf-3c13-4ad5-9c76-6a1f47fe60da.mp4

Versions (please complete the following information):

• Platform: Android and iOS
• Platform OS: Android 9 and iOS 15.2
• Device: all
• Emulator/ Simulator: yes
• Dev OS: OSX 11.6.4 Win11
• Mapbox GL version: 8.6.0-beta.0
• React Native Version: 0.67.4

[mfazekas]

The issue seems to be that RN supports animated styles but styles are different for RN than for rnmapbox, objects are valid as style values in RN but arrays are non valid in RN style values.

See:
https://github.com/facebook/react-native/blob/main/Libraries/Animated/nodes/AnimatedStyle.js

The solution would be writing our own animated wrappers.

class MyComponent extends React.Component {
  setNativeProps(props) {
    console.log('### props', props);
  }
  render() {
    return <View />;
  }
}

const AnimatedMyComponent = Animated.createAnimatedComponent(MyComponent);

function _nativeRef(ref) {
  return ref.refs.nativeLayer;
}

describe('MyComponent', () => {
  test.only('testSetNativePropsForStyle', () => {
    const baseStyle = {
      array: [1, 2, 3],
      object: { a: 1, b: 2 },
      constantValue: 42,
    };

    let animatedValue = new Animated.Value(10.0);
    Animated.timing(animatedValue, {
      toValue: 20.0,
      duration: 1000.0,
      easing: Easing.linear,
      useNativeDriver: false,
    }).start();

    const setNativeProps = jest.fn();

    let myComponentRef;
    // eslint-disable-next-line no-unused-vars
    const testRenderer = TestRenderer.create(
      <AnimatedMyComponent
        id="my-component"
        style={[baseStyle, { animatedValue }]}
        ref={(ref) => (myComponentRef = ref)}
      />,
    );

    myComponentRef.setNativeProps = setNativeProps;

    expect(setNativeProps).toHaveBeenCalledTimes(0);
    for (let i = 0; i < 5; i++) {
      clock.tick(200);
      clock.fireRequestAnimationFrames();

      expect(setNativeProps).toHaveBeenCalledTimes(1 * (i + 1));
      expect(setNativeProps).toHaveBeenCalledWith({
        style: {
          animatedValue: 10 + (i + 1) * 2,
          object: {},
        },
      });
    }
  });

[mfazekas]

Valid bug, but not planned do to lack of resources. Closing as not planned.