[iOS] interpolateColor - Attempt to assign to readonly property

[yaroslavnikiforov]

Description

When you try to render a component with some color interpolation using interpolateColor after another component with color interpolation is already rendered you get an error - Attempt to assign to readonly property.

This only happens on iOS.

Expected behavior

You shouldn't get this error on iOS.

Actual behavior & steps to reproduce

Render some component that uses interpolateColor and then render another component that also uses interpolateColor in a few seconds, for example. This also works for different screens in the navigation stack.

Snack or minimal code example

Here is a reproducible demo:
https://github.com/yaroslavnikiforov/InterpolateColor/tree/main/android

Code example:

import React, {useState, useEffect} from 'react';
import {StyleSheet} from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  interpolateColor,
} from 'react-native-reanimated';

const styles = StyleSheet.create({
  container: {flex: 1},
});

export default function App() {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    setTimeout(() => setIsVisible(true), 3000);
  }, []);

  return (
    <>
      <BlockOne />

      {isVisible ? <BlockTwo /> : null}
    </>
  );
}

function BlockOne() {
  const animatedValue = useSharedValue(300);
  const animatedStyles = useAnimatedStyle(() => {
    const backgroundColor = interpolateColor(
      animatedValue.value,
      [0, 234, 468],
      ['red', 'orange', 'yellow'],
    );

    return {backgroundColor};
  }, [animatedValue]);

  return <Animated.View style={[styles.container, animatedStyles]} />;
}

function BlockTwo() {
  const animatedValue = useSharedValue(0.3);
  const animatedStyles = useAnimatedStyle(() => {
    const backgroundColor = interpolateColor(
      animatedValue.value,
      [0, 1],
      ['green', 'cyan'],
    );

    return {backgroundColor};
  }, [animatedValue]);

  return <Animated.View style={[styles.container, animatedStyles]} />;
}

Package versions

• React Native: 0.66.4 (the same with 0.63.4)
• React Native Reanimated: ^2.3.0
• NodeJS: 14.15.0
• Xcode: 13.1
• Java & Gradle: 15.0.2 & 6.7.1

Affected platforms

• iOS

[github-actions]

Issue validator

The issue is valid!

[github984527]

how to fix?

[samjusaitis]

I am also experiencing this after upgrading to Reanimated 2.3

[MingaudasVagonis]

Same as #2329.
It seems like enabling hermes fixes that (#2329 (comment)), if that's not an option for you, you can apply a patch (orig - #2329 (comment)) until the issue is resolved, didn't notice any issues in production.

diff --git a/node_modules/react-native-reanimated/src/reanimated2/Colors.ts b/node_modules/react-native-reanimated/src/reanimated2/Colors.ts
index 66e5c13..fc1d52d 100644
--- a/node_modules/react-native-reanimated/src/reanimated2/Colors.ts
+++ b/node_modules/react-native-reanimated/src/reanimated2/Colors.ts
@@ -694,11 +694,6 @@ const getInterpolateCacheRGBA = (
   colors: readonly (string | number)[]
 ): InterpolateCacheRGBA => {
   'worklet';
-  const hash = colors.join('');
-  const cache = interpolateCacheRGBA[hash];
-  if (cache !== undefined) {
-    return cache;
-  }
 
   const r = [];
   const g = [];
@@ -715,15 +710,7 @@ const getInterpolateCacheRGBA = (
       a.push(opacity(proocessedColor));
     }
   }
-  const newCache = { r, g, b, a };
-  const overrideHash = hashOrderRGBA[curentHashIndexRGBA];
-  if (overrideHash) {
-    delete interpolateCacheRGBA[overrideHash];
-  }
-  interpolateCacheRGBA[hash] = newCache;
-  hashOrderRGBA[curentHashIndexRGBA] = hash;
-  curentHashIndexRGBA = (curentHashIndexRGBA + 1) % BUFFER_SIZE;
-  return newCache;
+  return { r, g, b, a };
 };
 
 interface InterpolateCacheHSV {

[yaroslavnikiforov]

@MingaudasVagonis thanks! This patch works.

[piaskowyk]

Duplicate of: #2329 I will try to fix it soon. Please be patient 🙏