[Reanimated] Property opacity was whitelisted both as UI and native prop.

[dafrica1]

Running into an odd issue while upgrading my Expo native project from Expo 49 to 50.

When attempting to run the app, I get the following error:

[Reanimated] Property `opacity` was whitelisted both as UI and native prop.

When I check the react-native-reanimated folder in node_modules and open the PropsAllowlists.ts file, I do not see opacity in both UI and native props, it's only in Native.

Why do I continue to get this error message?

[ambikaKum]

have you got the answer, we got the similar error

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

[valeriavodianchuk]

Any updates?

[MatiPl01]

Hey!
Do you guys use Animated.addWhitelistedUIProps or Animated.addWhitelistedNativeProps anywhere in your project? Can you provide your package.json so that I can see which libraries you use that may cause the problem and which version of react-native-reanimated you have in your project?

[seanblonien]

this is the one I use that is giving me the error for "stroke" property
https://github.com/nithinpp69/react-native-circular-progress-indicator

[MatiPl01]

Can you tell me which version of reanimated do you use and provide a code snippet which causes this crash?

[seanblonien]

this is the exact props i am passing to the underling library component which uses react-native-reanimated

import {default as CircularProgress} from 'react-native-circular-progress-indicator';

const ProgressComponent: React.FC = () => {
  const value = 50;

  return (
    <CircularProgress
      activeStrokeWidth={12}
      duration={1000}
      progressFormatter={(value: number) => {
        'worklet';
        if (value === 100) return '100';
        
        return value.toFixed(1);
      }}
      progressValueColor='black'
      value={value}
      valueSuffix='%'
    />
  )
}

with these package version numbers

"react-native-circular-progress-indicator": "4.4.2",
"react-native-reanimated": "3.6.3"

[dereckquock]

we're running into the same issue with react-native-circular-progress-indicator

it might be an issue in circular-progress-indicator since that package hasn't been updated in 2 years... 😓

[JacktheGodzillaSlayer]

we're running into the same issue with react-native-circular-progress-indicator

it might be an issue in circular-progress-indicator since that package hasn't been updated in 2 years... 😓

That's true, we already experienced many issues regarding the old libraries which were out of maintainance conflicted with upgrade RN and SDK, the only way is to fix the library yourself and then use package-patch to do post npm actions

[dafrica1]

As a long-overdue follow up, the other component which is causing the conflict is this one: https://github.com/gorhom/react-native-bottom-sheet

It's a pretty well known one.

[dafrica1]

The HeaderSection.js file is what is what we want to work. I can't find where the conflicting opacity whitelist is however.

[MatiPl01]

The call stack shows line 15 of the HeaderSection.js file. Can you share code showing what is in this line?

[dafrica1]

That's the line where I whitelist the native prop opacity:

Animated.addWhitelistedNativeProps({ opacity: true });

The issue is that I can't find where else in the app opacity is whitelisted as a UI prop

[MatiPl01]

Thanks for clarification. Now I can understand what is going on.
It is caused by the fact that the opacity prop is whitelisted as a UI prop by default. Error is thrown in this function in the react-native-reanimated library, which this key in PropsAllowlists.UI_THREAD_PROPS_WHITELIST check.

function assertNoOverlapInLists() {
  for (const key in PropsAllowlists.NATIVE_THREAD_PROPS_WHITELIST) {
    if (key in PropsAllowlists.UI_THREAD_PROPS_WHITELIST) {
      throw new Error(
        `[Reanimated] Property \`${key}\` was whitelisted both as UI and native prop. Please remove it from one of the lists.`
      );
    }
  }
}

As you can see in this file, PropsAllowlists.UI_THREAD_PROPS_WHITELIST contains opacity, so it will it is automatically whitelisted as a UI prop and you shouldn't change that.

I understand that the error might be confusing because you whitelist this prop only as a native prop but, since reanimated whitelists it automatically as the UI prop, you cannot do this.

[MatiPl01]

I wonder why you want this property to be whitelisted as a native prop instead of the UI prop? Is there any specific use case or you added this just by mistake?