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?

[lucajz]

Here's my solution to this:

import { cn } from '@/lib/utils';
import { LinearGradient, LinearGradientProps } from 'expo-linear-gradient';
import React, { useEffect, useRef, useState } from 'react';
import { ColorValue, StyleProp, View, ViewStyle } from 'react-native';
import {
  useSharedValue,
  withTiming,
  interpolateColor,
  useDerivedValue,
  useAnimatedReaction,
  runOnJS,
} from 'react-native-reanimated';

const GradientView = ({
  children,
  style,
  className,
  colors,
}: {
  children: React.ReactNode;
  style?: StyleProp<LinearGradientProps>;
  className?: string;
  colors?: readonly [ColorValue, ColorValue, ...ColorValue[]];
}) => {
  const defaultColors: [ColorValue, ColorValue] = [
    'hsla(204, 8%, 24%, 1)',
    'hsla(204, 6%, 43%, 1)',
  ];
  const currentColors = colors ?? defaultColors;
  const colorProgress = useSharedValue(1);
  const fromColorsRef = useRef<readonly ColorValue[]>(currentColors);
  const previousColorsRef = useRef<readonly ColorValue[]>(currentColors);

  useEffect(() => {
    if (JSON.stringify(previousColorsRef.current) !== JSON.stringify(currentColors)) {
      fromColorsRef.current = previousColorsRef.current;
      previousColorsRef.current = currentColors;
      colorProgress.value = 0;
      colorProgress.value = withTiming(1, { duration: 500 });
    }
  }, [currentColors, colorProgress]);

  const [displayColors, setDisplayColors] =
    useState<readonly [ColorValue, ColorValue, ...ColorValue[]]>(currentColors);

  const animatedColors = useDerivedValue(() => {
    const fromColors = fromColorsRef.current.length > 0 ? fromColorsRef.current : defaultColors;
    const toColors = currentColors;

    const interpolatedColors = toColors.map((toColor, index) => {
      const fromColor = fromColors[index] ?? fromColors[0] ?? defaultColors[0];
      return interpolateColor(
        colorProgress.value,
        [0, 1],
        [fromColor as string, toColor as string]
      );
    });

    return [
      interpolatedColors[0] ?? defaultColors[0],
      interpolatedColors[1] ?? defaultColors[1],
      ...interpolatedColors.slice(2),
    ] as [ColorValue, ColorValue, ...ColorValue[]];
  });

  useAnimatedReaction(
    () => animatedColors.value,
    (colors) => {
      const mutableColors: [ColorValue, ColorValue, ...ColorValue[]] = [
        colors[0],
        colors[1],
        ...colors.slice(2),
      ];
      runOnJS(setDisplayColors)(mutableColors);
    }
  );

  return (
    <View className={cn('border border-border', className)}>
      <LinearGradient colors={displayColors} style={style as StyleProp<ViewStyle>}>
        {children}
      </LinearGradient>
    </View>
  );
};

export default GradientView;