interpolateColor crash on useAnimatedProps stroke Path

[page403]

Description

Even when it just only

const pathAnimatedProps = useAnimatedProps(() => ({ stroke: interpolateColor(progress.value, [0, 1], ['#2d235e', '#d058b0']), }));

saving it just crashing.
but the color of the first value of inputRange is visible.

Steps to reproduce

Trying to make <Path props changing the color using useAnimatedProps.
the d prop of my path just work.
but the color make the app crash.

Full Code Here

Snack or a link to a repository

https://snack.expo.dev/-3Auk0tH0

Reanimated version

2.12.0

React Native version

0.70.4

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

No response

Build type

Debug mode

Device

Real device

Device model

LeEco x52x

Acknowledgements

Yes

[tomekzaw]

Hey @page403, thanks for submitting the issue.

First of all, what version of Android NDK are you using? The crash may be related to C++ exceptions not being passed properly between shared library boundaries, see #3558 for details. On my setup, I get the following error:

The good news is that this error can be easily resolved using createAnimatedPropAdapter (see docs). Based on this example from react-native-svg repo I was able to get it up and running:

const adapter = createAnimatedPropAdapter(
  (props) => {
    if (Object.keys(props).includes('stroke')) {
      props.stroke = {
        type: 0,
        payload: processColor(props.stroke as string),
      };
    }
  },
  ['stroke']
);

const App = () => {
  // ... 
  const pathAnimatedProps = useAnimatedProps(
    () => ({
      d: interpolatePath(
        progress.value,
        [0, 0.8, 0.93, 1],
        [pathTarget, pathBounce, pathBounce2, pathFrom]
      ),
      stroke: interpolateColor(progress.value, [0, 1], ['#2d235e', '#d058b0']),
    }),
    [],
    adapter
  );
  // ...
};

Here's a video that demonstrates the final result:

Nagranie.z.ekranu.2022-11-16.o.16.21.37.mov

[Aryk]

Getting the same issue as well (Android-only). App crashes when using interpolateColor on a path in SVG. ios works perfect.

Fix above fixes it for me. Thanks!

[ajacquierbret]

@tomekzaw Commenting as I got the exact same issue but really struggled a lot to figure out what was the cause as I didn't have any human readable error message to start with.
FWIW, the error was caused by the fill prop of AnimatedRect:

const AnimatedRect = Animated.createAnimatedComponent(Rect);

...

const animatedProps = useAnimatedProps<RectProps>(
    () => ({
      fill: interpolateColor(
        gaugeFillPercentage.value,
        [0, 50, 100],
        [AppColor.orange, AppColor.primaryYellow, AppColor.green],
      ),
    }),
  );
  
...

<AnimatedRect animatedProps={animatedProps} />

I guess it will soon be resolved by #3846, but for now the only input I had is this stacktrace:

OS Version: Android 11 (RQ2A.210505.002)
Report Version: 104

Exception Type: Unknown (SIGABRT)

Application Specific Information:
Abort

Thread 0 Crashed:
0   libc.so                         0x722ca2b2cc        abort
1   libc++_shared.so                0x6f295777e4        <unknown> + 477434968036
2   libc++_shared.so                0x6f29576dc8        <unknown> + 477434965448
3   libc++_shared.so                0x6f29576bf8        __gxx_personality_v0
4   libreanimated.so                0x6cb9aded4c        <unknown> + 466971651404
5   libreanimated.so                0x6cb9adee08        <unknown> + 466971651592
6   libreanimated.so                0x6cb9aafa3c        reanimated::NativeProxy::updateProps
7   libreanimated.so                0x6cb9ab7d44        <unknown> + 466971491652
8   libreanimated.so                0x6cb9ab7cec        <unknown> + 466971491564
9   libreanimated.so                0x6cb9ab7c48        <unknown> + 466971491400
10  libreanimated.so                0x6cb9ab7bcc        <unknown> + 466971491276
11  libreanimated.so                0x6cb9ab6be4        <unknown> + 466971487204
12  libreanimated.so                0x6cb9a80474        <unknown> + 466971264116
13  libreanimated.so                0x6cb9a80328        std::__ndk1::function<T>::operator()
14  libreanimated.so                0x6cb9a87c5c        <unknown> + 466971294812
15  libreanimated.so                0x6cb9a87bc0        <unknown> + 466971294656
16  libreanimated.so                0x6cb9a87b0c        <unknown> + 466971294476
17  libreanimated.so                0x6cb9a87a84        <unknown> + 466971294340
18  libreanimated.so                0x6cb9a86b54        <unknown> + 466971290452
19  libhermes.so                    0x6f8b384c2c        <unknown> + 479077092396
20  libhermes.so                    0x6f8b38d394        <unknown> + 479077127060
21  libhermes.so                    0x6f8b3ab3f8        <unknown> + 479077250040
22  libhermes.so                    0x6f8b3acfa0        <unknown> + 479077257120
23  libhermes.so                    0x6f8b3ac798        <unknown> + 479077255064
24  libhermes.so                    0x6f8b38d6b0        <unknown> + 479077127856
25  libhermes.so                    0x6f8b38b8d0        <unknown> + 479077120208
26  libhermes.so                    0x6f8b40bffc        <unknown> + 479077646332
27  libhermes.so                    0x6f8b38d394        <unknown> + 479077127060
28  libhermes.so                    0x6f8b3ab3f8        <unknown> + 479077250040
29  libhermes.so                    0x6f8b3acfa0        <unknown> + 479077257120
30  libhermes.so                    0x6f8b3ac798        <unknown> + 479077255064
31  libhermes.so                    0x6f8b38d6b0        <unknown> + 479077127856
32  libhermes.so                    0x6f8b37cbe0        <unknown> + 479077059552
33  libreanimated.so                0x6cb9a34bd4        facebook::jsi::Function::call
34  libreanimated.so                0x6cb9a66884        <unknown> + 466971158660
35  libreanimated.so                0x6cb9a666b4        <unknown> + 466971158196
36  libreanimated.so                0x6cb9a66600        <unknown> + 466971158016
37  libreanimated.so                0x6cb9a66578        <unknown> + 466971157880
38  libreanimated.so                0x6cb9a6561c        <unknown> + 466971153948
39  libhermes.so                    0x6f8b384c2c        <unknown> + 479077092396
40  libhermes.so                    0x6f8b38d394        <unknown> + 479077127060
41  libhermes.so                    0x6f8b3ab3f8        <unknown> + 479077250040
42  libhermes.so                    0x6f8b3acfa0        <unknown> + 479077257120
43  libhermes.so                    0x6f8b3ac798        <unknown> + 479077255064
44  libhermes.so                    0x6f8b38d6b0        <unknown> + 479077127856
45  libhermes.so                    0x6f8b37cbe0        <unknown> + 479077059552
46  libreanimated.so                0x6cb9a34bd4        facebook::jsi::Function::call
47  libreanimated.so                0x6cb9a66884        <unknown> + 466971158660
48  libreanimated.so                0x6cb9a666b4        <unknown> + 466971158196
49  libreanimated.so                0x6cb9a66600        <unknown> + 466971158016
50  libreanimated.so                0x6cb9a66578        <unknown> + 466971157880
51  libreanimated.so                0x6cb9a6561c        <unknown> + 466971153948
52  libhermes.so                    0x6f8b384c2c        <unknown> + 479077092396
53  libhermes.so                    0x6f8b38d394        <unknown> + 479077127060
54  libhermes.so                    0x6f8b3ab3f8        <unknown> + 479077250040
55  libhermes.so                    0x6f8b3acfa0        <unknown> + 479077257120
56  libhermes.so                    0x6f8b3ac798        <unknown> + 479077255064
57  libhermes.so                    0x6f8b38d6b0        <unknown> + 479077127856
58  libhermes.so                    0x6f8b37cbe0        <unknown> + 479077059552
59  libreanimated.so                0x6cb9a59d54        facebook::jsi::Function::callWithThis
60  libreanimated.so                0x6cb9a667d4        <unknown> + 466971158484
61  libreanimated.so                0x6cb9a666b4        <unknown> + 466971158196
62  libreanimated.so                0x6cb9a66600        <unknown> + 466971158016
63  libreanimated.so                0x6cb9a66578        <unknown> + 466971157880
64  libreanimated.so                0x6cb9a6561c        <unknown> + 466971153948
65  libhermes.so                    0x6f8b384c2c        <unknown> + 479077092396
66  libhermes.so                    0x6f8b38d394        <unknown> + 479077127060
67  libhermes.so                    0x6f8b37cbe0        <unknown> + 479077059552
68  libreanimated.so                0x6cb9a59d54        facebook::jsi::Function::callWithThis
69  libreanimated.so                0x6cb9a59c9c        facebook::jsi::Function::callWithThis
70  libreanimated.so                0x6cb9a80184        facebook::jsi::Function::callWithThis<T>
71  libreanimated.so                0x6cb9a7e61c        reanimated::Mapper::execute
72  libreanimated.so                0x6cb9a40b4c        reanimated::MapperRegistry::execute
73  libreanimated.so                0x6cb9a14228        reanimated::NativeReanimatedModule::onRender
74  libreanimated.so                0x6cb9a171e0        <unknown> + 466970833376
75  libreanimated.so                0x6cb9a17198        <unknown> + 466970833304
76  libreanimated.so                0x6cb9a17130        <unknown> + 466970833200
77  libreanimated.so                0x6cb9a170f0        <unknown> + 466970833136
78  libreanimated.so                0x6cb9a16144        <unknown> + 466970829124
79  libreanimated.so                0x6cb9a3531c        <unknown> + 466970956572
80  libreanimated.so                0x6cb9a23600        std::__ndk1::function<T>::operator()
81  libreanimated.so                0x6cb9ab64d0        <unknown> + 466971485392
82  libreanimated.so                0x6cb9ab642c        <unknown> + 466971485228
83  libreanimated.so                0x6cb9ab63c4        <unknown> + 466971485124
84  libreanimated.so                0x6cb9ab6384        <unknown> + 466971485060
85  libreanimated.so                0x6cb9ab5484        <unknown> + 466971481220
86  libreanimated.so                0x6cb9a3531c        <unknown> + 466970956572
87  libreanimated.so                0x6cb9a23600        std::__ndk1::function<T>::operator()
88  libreanimated.so                0x6cb9adb0e8        reanimated::AnimationFrameCallback::onAnimationFrame
89  libreanimated.so                0x6cb9adaeb0        facebook::jni::detail::MethodWrapper<T>::dispatch
90  libreanimated.so                0x6cb9adaf30        facebook::jni::detail::CallWithJniConversions<T>::call
91  libreanimated.so                0x6cb9adad5c        facebook::jni::detail::FunctionWrapper<T>::call
92  libreanimated.so                0x6cb9adad18        facebook::jni::detail::MethodWrapper<T>::call
93  libart.so                       0x6f9aa0ced4        <unknown> + 479335599828
94  <unknown>                       0x9cd96efc          <unknown>

[kamilafsar]

Thanks @tomekzaw that works.

In my case though, I was animating fill, here's an adapter for fill:

const adapter = createAnimatedPropAdapter(
  (props) => {
    if (Object.keys(props).includes("fill")) {
      props.fill = {
        type: 0,
        payload: processColor(props.fill as string),
      }
    }
  },
  ["fill"],
)

Make sure you're not providing other values than colors, like none.
Putting it here in case anybody else ends up here.