Does react native animated native driver support color/backgroundColor?

user_1842161 0
Viewed 10986

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?

react-native animation
4 Answers

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!

user_89813240

This error comes from validateTransform function inside React Native lib.You can check the TRANSFORM_WHITELIST in NativeAnimatedHelper for the property supported by native animated module.

Currently, there are these props supported

const TRANSFORM_WHITELIST = {
  translateX: true,
  translateY: true,
  scale: true,
  scaleX: true,
  scaleY: true,
  rotate: true,
  rotateX: true,
  rotateY: true,
  rotateZ: true,
  perspective: true,
};

Currently, color is not in the TRANSFORM_WHITELIST config. You can't use native animated driver to support color/backgroundColor.

user_40269020
user_116577030
Related