`experimental_backgroundImage: linear-gradient` crash on update

[fr0staman]

Description

When you updating linear-gradient values - Android app crash with error:

minimal repro:

const timer = useSharedValue(0);

useEffect(() => {
  timer.value = withRepeat(withTiming(1, { duration: 1000 }), -1, true);
}, []);

const backgroundStyle = useAnimatedStyle(() => {
  const topColor = interpolateColor(timer.value, [0, 1], ['#000', '#FFF']);
  const bottomColor = interpolateColor(timer.value, [1, 0], ['#000', '#FFF']);

  return {
    experimental_backgroundImage: `linear-gradient(to bottom, ${topColor}, ${bottomColor})`,
  };
});

I see #7929 not done and not merged, maybe that need slight attention?

Steps to reproduce

1. Render Animated.View with experimental_backgroundImage: "linear-gradient" with updating

Snack or a link to a repository

TODO

Reanimated version

4.1.2

Worklets version

0.6.0

React Native version

0.81.4

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native CLI

Architecture

New Architecture (Fabric renderer)

Build type

Debug app & dev bundle

Device

Android emulator

Host machine

macOS

Device model

No response

Acknowledgements

Yes

[github-actions[bot]]

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?

[MatiPl01]

As far as I know, we haven't added support for this property yet, so it gets sent to the native side as an unparsed string. We should add support for this prop but it is quite complex so it might take some time to implement it right.

[Yurii-Lutsyk]

+1

[Yurii-Lutsyk]

@fr0staman Have u found any workarounds?

[sakura-he]

+1