Property 'fill' was whitelisted both as UI and native prop. Please remove it from one of the lists. about react-native-reanimated

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[szydlovsky]

Hey @valeriavodianchuk I have just created a similar example that doesn't throw an error (and in general wasn't able to reproduce the problem), please take a look, maybe you forgot something or redundantly used addWhitelistedUI/NativeProps ?

import { StyleSheet, View } from 'react-native';
import Animated, {
  useAnimatedProps,
  interpolateColor,
  useScrollViewOffset,
  useAnimatedRef,
  createAnimatedPropAdapter,
  processColor,
} from 'react-native-reanimated';
import React from 'react';
import { Circle, Svg } from 'react-native-svg';

const AnimatedCircle = Animated.createAnimatedComponent(Circle);

export default function EmptyExample() {
  const ref = useAnimatedRef<Animated.ScrollView>();
  const scrollOffset = useScrollViewOffset(ref);

  const animatedProps = useAnimatedProps(
    () => {
      const fill = interpolateColor(
        scrollOffset.value % 300,
        [0, 300],
        ['#ffffff', '#000000']
      );

      return {
        fill,
      };
    },
    [scrollOffset.value],
    createAnimatedPropAdapter(
      (props) => {
        if (Object.keys(props).includes('fill')) {
          props.fill = { type: 0, payload: processColor(props.fill) };
        }
      },
      ['fill']
    )
  );

  return (
    <View style={styles.container}>
      <Animated.ScrollView ref={ref} contentContainerStyle={styles.scroll}>
        <View style={styles.box} />
        <View style={styles.box} />
        <View style={styles.box} />
      </Animated.ScrollView>
      <Svg height="200" width="200">
        <AnimatedCircle
          cx="50%"
          cy="50%"
          fill="none"
          r="50%"
          animatedProps={animatedProps}
        />
      </Svg>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  scroll: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 300,
    height: 700,
    backgroundColor: 'pink',
    margin: 40,
  },
});