How to use animatedProps with expo-linear-gradient?

[RRaideRR]

I want to animate the colors of expo-linear-gradient but it doesn't work. In fact: nothing changes.

Minimal reproducible example (Snack):

import * as React from 'react';
import { View, Button } from 'react-native';
import Animated, {
  interpolateColor,
  useAnimatedProps,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

import { LinearGradient } from 'expo-linear-gradient';

const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);

export default function App() {
  const colorsValue = useSharedValue(1); 

  const animatedProps = useAnimatedProps(() => {
    return {
      colors: [
        interpolateColor(colorsValue.value, [0, 1], ['#FFFFFF', '#000000']),
        interpolateColor(colorsValue.value, [0, 1], ['#FFFFFF', '#00ff00']),
      ],
    };
  });

  return (
    <View>
      <AnimatedLinearGradient
        animatedProps={animatedProps}
        style={{ height: 400, width: '100%' }}
      />
      <Button
        title="Change colors"
        onPress={() => (colorsValue.value = withTiming(0, { duration: 2000 }))}
      />
    </View>
  );
}

What am I doing wrong here? Any help would be highly appreciated.

[tomekzaw]

Hey, you may need to whitelist colors property using one of these functions:

react-native-reanimated/src/ConfigHelper.ts

Lines 115 to 134 in 1a292f7

	export function addWhitelistedNativeProps(
	props: Record<string, boolean>
	): void {
	const oldSize = Object.keys(NATIVE_THREAD_PROPS_WHITELIST).length;
	NATIVE_THREAD_PROPS_WHITELIST = {
	...NATIVE_THREAD_PROPS_WHITELIST,
	...props,
	};
	if (oldSize !== Object.keys(NATIVE_THREAD_PROPS_WHITELIST).length) {
	configureProps();
	}
	}
	export function addWhitelistedUIProps(props: Record<string, boolean>): void {
	const oldSize = Object.keys(UI_THREAD_PROPS_WHITELIST).length;
	UI_THREAD_PROPS_WHITELIST = { ...UI_THREAD_PROPS_WHITELIST, ...props };
	if (oldSize !== Object.keys(UI_THREAD_PROPS_WHITELIST).length) {
	configureProps();
	}
	}

Also, there may be some probiem with processing colors, can you check if if works when you pass the color as integer?

[RRaideRR]

Hey @tomekzaw and thanks for your answer.

I updated the snack to reflect passing the color as integer (rgba you meant, right?), but it makes no difference.

I added addWhitelistedNativeProps there as well but it does not work :-(.

https://snack.expo.dev/@raider/reanimated-x-linear-gradient

[phantom-factotum]

Did you ever find a solution?