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

[danieldav2]

same issue

[chandrucrayond]

Guys, Did you find out the solution. I also had the same error,

[szydlovsky]

@danieldav2 @chandrucrayond could any of you guys give me a repro for the problem? Just as I mentioned above, the problem occurs because Animated.addWhitelistedNativeProps was used on a prop more than once.

[dmacpro91]

For me this was happening because 'processColor' was imported from react-native rather than reanimated.

[Bayramito]

@danieldav2 @chandrucrayond could any of you guys give me a repro for the problem? Just as I mentioned above, the problem occurs because Animated.addWhitelistedNativeProps was used on a prop more than once.

It's still a valid issue. Strangely it is happening when you try to interpolate colors of a svg path.

    const animatedProps = useAnimatedProps(
      () => {
        const fill = interpolateColor(translateX.value, circleInputRange, dashboardAppColors);
        return {
          fill,
        };
      },
      [],
      createAnimatedPropAdapter(
        props => {
          if (Object.keys(props).includes("fill")) {
            props.fill = {type: 0, payload: processColor(props.fill)};
          }
          if (Object.keys(props).includes("stroke")) {
            props.stroke = {type: 0, payload: processColor(props.stroke)};
          }
        },
        ["stroke","fill"],
      ),
    );

BUT !!!! On me personally, this is happening only if i navigate to this screen where i used this code above. Lets say i used this in dashbard component and if i give my dashboard to navigator as initialRoute, then everything is working fine. Only if i navigate from somewhere then this error getting thrown.

BTW you can reproduce this issue simply by trying to apply dynamic interpolation to fill and stroke properties of a Animated SVG path.

Like

[Bayramito]

I just spotted something, if your custom component is being rendered immediately on did mount, you are most likely getting this crash...

but if you add a slight delay like

    const [show, setShow] = React.useState(false);
    useEffect(() => {
      setTimeout(() => {
        setShow(true);
      }, 1000);
    }, []); 


        {show && <Bubble width={BUBBLE_WIDTH} height={BUBBLE_HEIGHT} />}

no errors ... at least on me :)

[szydlovsky]

@Bayramito yeah, too bad setTimeout should never be used to fix bugs haha... We will have someone look into the problem as soon as we find some time

[piaskowyk]

Hey, it seems that one of your dependencies utilizing Reanimated (and potentially SVG) is invoking the addWhitelistedNativeProps method in their code. You should search through the entire codebase, especially in node_modules, for occurrences of the addWhitelistedNativeProps method. Reanimated never calls addWhitelistedNativeProps, so you can throw an exception inside that method (https://github.com/software-mansion/react-native-reanimated/blob/main/packages/react-native-reanimated/src/ConfigHelper.ts#L29) to identify who is calling that method.

without any reproduction it is hard to us to tell more :/