How do we interpolate colors of LinearGradient?

[Bayramito]

@william-candillon is there any breaking changes on LinearGradient component ?

I have a background component in one of my screens., that changes it's background colors depends on a tab index.

it was working on 0.1.172 with Reanimated 2 but, now with 0.1.178 and Reanimated 3 it's not working.

Previously it was working fine, but since i upgraded to v3 on reanimated and skia 178, i had to change useSharedValueEffect to useEffect and now colors not shifting smoothly.

My component looks like below

import {
  Canvas,
  Fill,
  LinearGradient,
  Rect,
  useComputedValue,
  useSharedValueEffect,
  useValue,
  vec,
} from "@shopify/react-native-skia";
import _ from "lodash";
import React, {useEffect} from "react";
import {Dimensions, View} from "react-native";
import {interpolateColor} from "react-native-reanimated";
import {CheckoutConstants} from "./CheckoutConstants";
const {width, height} = Dimensions.get("window");
const gradientWidth = width * 0.3;
const CheckoutBackground = ({tabIndex, ...props}) => {
  const tabIndexValue = Math.round(tabIndex.value);
  const skiaDarkColor = useValue(CheckoutConstants.tabs[tabIndexValue].colors.dark);
  const skiaLightColor = useValue(CheckoutConstants.tabs[tabIndexValue].colors.background);
  const skiaTransparentColor = useValue(CheckoutConstants.tabs[tabIndexValue].colors.background + "00");
  useEffect(() => {
    const inputRange = _.range(0, CheckoutConstants.tabs.length);
    skiaDarkColor.current = interpolateColor(
      tabIndex.value,
      inputRange,
      CheckoutConstants.tabs.map(x => x.colors.dark),
    );
    skiaLightColor.current = interpolateColor(
      tabIndex.value,
      inputRange,
      CheckoutConstants.tabs.map(x => x.colors.background),
    );
    skiaTransparentColor.current = interpolateColor(
      tabIndex.value,
      inputRange,
      CheckoutConstants.tabs.map(x => x.colors.background + "00"),
    );
  }, [tabIndex]);

  const colors = useComputedValue(() => {
    return [skiaDarkColor.current, skiaTransparentColor.current];
  }, [skiaDarkColor, skiaTransparentColor]);
  const backgroundColor = useComputedValue(() => {
    return skiaLightColor.current;
  }, [skiaLightColor]);
  const darkColor = useComputedValue(() => {
    return skiaDarkColor.current;
  }, [skiaDarkColor]);
  return (
    <View {...props}>
      <Canvas style={{height: height, width: width}}>
        <Fill color={backgroundColor} />
        {/* Top */}
        <Rect x={0} y={0} width={width} height={gradientWidth}>
          <LinearGradient colors={colors} start={vec(0, 0)} end={vec(0, gradientWidth)} direction="vertical" />
        </Rect>
        {/* Bottom */}
        <Rect x={0} y={height - gradientWidth} width={width} height={gradientWidth}>
          <LinearGradient
            colors={colors}
            start={vec(0, height)}
            end={vec(0, height - gradientWidth)}
            direction="vertical"
          />
        </Rect>
        {/* Left */}
        <Rect x={0} y={0} width={gradientWidth} height={height}>
          <LinearGradient colors={colors} start={vec(0, 0)} end={vec(gradientWidth, 0)} />
        </Rect>
        {/* Right */}
        <Rect x={width - gradientWidth} y={0} width={gradientWidth} height={height}>
          <LinearGradient colors={colors} start={vec(width, 0)} end={vec(width - gradientWidth, 0)} />
        </Rect>
      </Canvas>
    </View>
  );
};

after that i followed your Wallet example

https://github.com/Shopify/react-native-skia/blob/main/example/src/Examples/Wallet/components/Cursor.tsx

and made some changes to test it out,

   const tabIndex = useValue(0);

   useEffect(() => {
     tabIndex.current = purchase.activeIndex;
   }, [purchase.activeIndex]);
   const COLORS = ["#F69D69", "#FFC37D", "#61E0A1", "#31CBD1"].map(Skia.Color);
   const color = useComputedValue(
     () =>
       interpolateColors(
         tabIndex.current,
         COLORS.map((_, i) => i / COLORS.length),
         COLORS,
       ),
     [tabIndex],
   );
   console.log("COLORS", color.current);

   return (
     <View {...props}>
       <Canvas style={{height: height, width: width}}>
         {/*<Fill color={backgroundColor} />*/}
         {/* Top */}
         <Rect x={0} y={0} width={width} height={gradientWidth}>
           <LinearGradient colors={color} start={vec(0, 0)} end={vec(0, gradientWidth)} direction="vertical" />
         </Rect>
       </Canvas>
     </View>
   );
 }),
);

but this time LinearGradient component throws me this error

I dont know did i missed something on documentation

[wcandillon]

If you are using reanimated 3, you shouldn't use useValue from Skia but reanimated shared values directly: https://shopify.github.io/react-native-skia/docs/animations/reanimated

Or you can remove the dependency from Reanimated you seem to be using for color interpolation only? Maybe if you can isolate the issue into a smaller code snippet we could look into it.

[Bayramito]

changed my code to that,

const CheckoutBackground = ({tabIndex, ...props}) => {
  const progress = useSharedValue(tabIndex || 0);
  const skiaProgress = useValue(tabIndex || 0);

  useEffect(() => {
    progress.value = withTiming(tabIndex, {duration: 300});
    runTiming(skiaProgress, tabIndex, {duration: 300});
  }, [tabIndex]);

  const inputRange = _.range(0, CheckoutConstants.tabs.length);
  const skiaDarkColor = useComputedValue(() => {
    return interpolateColor(
      progress.value,
      inputRange,
      CheckoutConstants.tabs.map(x => x.colors.dark),
    );
  }, [skiaProgress]);
  const skiaLightColor = useComputedValue(() => {
    return interpolateColor(
      progress.value,
      inputRange,
      CheckoutConstants.tabs.map(x => x.colors.background),
    );
  }, [skiaProgress]);

  const skiaTransparentColor = useComputedValue(() => {
    return interpolateColor(
      progress.value,
      inputRange,
      CheckoutConstants.tabs.map(x => x.colors.background + "00"),
    );
  }, [skiaProgress]);

  const colors = useComputedValue(() => {
    return [skiaDarkColor.current, skiaTransparentColor.current];
  }, [skiaDarkColor, skiaTransparentColor]);

  const backgroundColor = useComputedValue(() => {
    return skiaLightColor.current;
  }, [skiaLightColor]);
  const darkColor = useComputedValue(() => {
    return skiaDarkColor.current;
  }, [skiaDarkColor]);

  return (
    <View {...props}>
      <Canvas style={{height: height, width: width}}>
        <Fill color={backgroundColor} />
        {/* Top */}
        <Rect x={0} y={0} width={width} height={gradientWidth}>
          <LinearGradient colors={colors} start={vec(0, 0)} end={vec(0, gradientWidth)} direction="vertical" />
        </Rect>
        {/* Bottom */}
        <Rect x={0} y={height - gradientWidth} width={width} height={gradientWidth}>
          <LinearGradient
            colors={colors}
            start={vec(0, height)}
            end={vec(0, height - gradientWidth)}
            direction="vertical"
          />
        </Rect>
        {/* Left */}
        <Rect x={0} y={0} width={gradientWidth} height={height}>
          <LinearGradient colors={colors} start={vec(0, 0)} end={vec(gradientWidth, 0)} />
        </Rect>
        {/* Right */}
        <Rect x={width - gradientWidth} y={0} width={gradientWidth} height={height}>
          <LinearGradient colors={colors} start={vec(width, 0)} end={vec(width - gradientWidth, 0)} />
        </Rect>
      </Canvas>
    </View>
  );
};

result

Simulator.Screen.Recording.-.iPhone.14.-.2023-04-04.at.01.42.30.mp4

it looks like now working as expected but idk if this is the right solution.

of course i can make a small example for you if you want