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

[valeriavodianchuk]

Description

There is some piece of code that uses animated props
` const animatedProps = useAnimatedProps(
() => {
if (!scrollOffsetAnimatedValue) return { fill: '#ffffff' };

        const fill = interpolateColor(
            scrollOffsetAnimatedValue.value,
            [0, 300],
            ['#ffffff', '#000000']
        );

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

And animated SVG
const AnimatedPath = Animated.createAnimatedComponent(Path);
<Svg width='21' height='21' viewBox='0 0 21 21' fill='none'> <AnimatedPath fillRule='evenodd' clipRule='evenodd' d='...' animatedProps={animatedProps} /> </Svg>

Finally, we have this error - Property 'fill' was whitelisted both as UI and native prop. Please remove it from one of the lists.

Version of react-native-reanimated - 3.9.0, react-native-svg - 13.10.0

Steps to reproduce

1. Use animated props with 'fill' property

Snack or a link to a repository

Reanimated version

3.9.0

React Native version

0.72.1

Platforms

Android, iOS

JavaScript runtime

None

Workflow

React Native

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[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,
  },
});