Does react native animated native driver support color/backgroundColor?

Question

i'm trying to animate color of Text, something like this:

const animateTest = scrollY.interpolate({
                                    inputRange: [0, 100],
                                    outputRange: ['rgba(255,0,0,1)', 'rgba(0,255,0,1)']                                    
                                });



      return (<View>      
    <Animated.Text style={{ position:'absolute',                                          
                              color: animateTest
                          }} >blah blah blah</Animated.Text>
    <Animated.ScrollView
              scrollEventThrottle={16}                
              onScroll={Animated.event(
                [
                    {
                        nativeEvent: {contentOffset: {y: scrollY}},
                    },
                ],
                {
                    useNativeDriver: true,
                }
            )}      
          >       

but i'm getting this error:

Style property 'color' is not supported by native animated module

using ReactNative 0.44.0

according to this blog post it's supposed to work because they say:

Not everything you can do with Animated is currently supported in Native Animated. The main limitation is that you can only animate non-layout properties, things like transform, opacity and backgroundColor will work but flexbox and position properties won't.

but i see there is a whitelist for styles in the code that are supported: link to relevant code there is a very limited whitelist:

const STYLES_WHITELIST = {
  opacity: true,
  transform: true,
  /* legacy android transform properties */
  scaleX: true,
  scaleY: true,
  translateX: true,
  translateY: true,
};

which does not include color/backgroundColor

can anybody help me out here - is it supposed to be supported or not?

Answer 1

The error is from trying to change color while using the native driver (i.e. useNativeDriver: true).

color and backgroundColor aren't supported by the native driver at the moment (https://github.com/facebook/react-native/issues/14178).

If you want to keep using the native driver, you could try using opacity as a work around to change the color of the text e.g. by placing two text elements with different colors and different starting opacities on top of each other. Then use the onScroll event to change the opacity of each element so that the element that's visible at the start isn't visible at the end (and vice versa):

    const redTextOpacity = scrollY.interpolate({
      inputRange: [0, 100],
      outputRange: [1, 0],
      extrapolate: 'clamp',
    });
    const greenTextOpacity = scrollY.interpolate({
      inputRange: [0, 100],
      outputRange: [0, 1],
      extrapolate: 'clamp',
    });

    return (
      <View>
          <Animated.Text style={{
            position: 'absolute',
            opacity: redTextOpacity,
            color: 'rgba(255,0,0,1)',
          }} >blah blah blah</Animated.Text>
          <Animated.Text style={{
            position: 'absolute',
            opacity: greenTextOpacity,
            color: 'rgba(0,255,0,1)',
          }} >blah blah blah</Animated.Text>

  ...

I had the same problem today and didn't want to set useNativeDriver: false for performance reasons. But using opacity was an ok work-around for me. Hope this helps!

Answer 2

Make useNativeDriver:false then the color property will work as expected.

I dont find any difference in 2D animation using or not using native driver.