interpolateColor on <Animated.Text /> causes warning

Description

When interpolating the color of an <Animated.Text> the following warning is displayed:

Warning: You are setting the style { color: ... } as a prop. You should nest it in a style object. E.g. { style: { color: ... } }

The animation works fine, however, the warning is annoying and I don’t want to ignore it as it may be an underlying issue of some sort.

Screenshots

Steps To Reproduce

const colorMap = useSharedValue(0);

const animatedPlaceholderStyles = useAnimatedStyle(() => ({
      color: interpolateColor(
        colorMap.value,
        [0, 1, 2],
        [inactiveColor, activeColor, errorColor]
      ),
    }));

return (
      <Animated.View style={[styles.container, animatedContainerStyle]}>
        <Animated.Text
          style={[styles.placeholder, animatedPlaceholderStyles]}
          onLayout={handlePlaceholderLayout}
        >
          {placeholder}
        </Animated.Text>
      </Animated.View>
    );

Expected behavior

No warning with expected animation.

Actual behavior

Warning with expected animation.

Snack or minimal code example

See above.

Package versions

• React: 16.13.1
• React Native: 0.63.4
• React Native Reanimated: 2.0.0-rc.0
• NodeJS: 12.18.3

[swansontec]

After many, many hours of debugging, I finally have some insight into what causes this!

The native Objective C / Java node manager uses a whitelist to determine which props it can set natively. There is a Javascript function called configureProps that is responsible for building this whitelist and sending it down to the native code. This needs to happen before any rendering takes place, or the native Objective C / Javascript code will treat everything as a JS prop, which causes this warning.

The tricky thing is that recent React Native versions load modules lazily by default. This means configureProps won’t have a chance to run until some poor animated component decides to render for the first time. By then, it’s too late. The native configureProps call will get batched up on the bridge, and won’t execute until after the render completes with an empty whitelist.

One super-hacky way to defeat the lazy module loading is to add code like this to the app’s index.js:

import Animated from 'react-native-reanimated'

Animated.addWhitelistedNativeProps({})

This forces react-native-reanimated to download the whitelist before the app has a chance to render anything.

[tomekzaw]

@swushi Thank you for the detailed description. I have reproduced the issue on the example app from your repository (using Reanimated 2.0.0-rc.0) by commenting out the LogBox.ignore calls.

After bumping Reanimated to 2.0.0 to check if the problem persists on the latest release, I get the following error:

However, when I add your library as a dependency to our Reanimated 2 Example app, remove the LogBox.ignore calls from source code located in node_modules and then replace any existing screen with one of the showcase examples, there are no warnings or errors at all (in particular, color interpolation works great). This suggests that there might be either a problem with using Reanimated 2 on Expo or some issue specific to your example app.