React-native: Style property 'backgroundColor' is not supported by native animated module

[mongris]

Description

I am trying to animate backgroundColor with scrollView, but got

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

But accoding to the blog post it has be supported.

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. Another one is with Animated.event, it will only work with direct events and not bubbling events. This means it does not work with PanResponder but does work with things like ScrollView#onScroll.

Please help me to figure out how to animate backgroundColor with useNativeDriver or is it still not support (the blog post is wrong)?

Reproduction Steps and Sample Code

Some code like:

const  _scrollPos = new Animated.Value(0);
const  _scrollSinkX = Animated.event(
    [{ nativeEvent: { contentOffset: { x: this._scrollPos } } }],
    { useNativeDriver: true });

<Animated.ScrollView
  onScrol={_scrollSinkX}
>
  {items}
</Animated.ScrollView>

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

<Animated.View
  style={animatedStyle}
>{children}</Animated.View>

Solution

None

I were trying to simple add 'backgroundColor: true' to
https://github.com/facebook/react-native/blob/dd5ac841d2d88d3d7c2270f835aa5d9f8bfac5c3/Libraries/Animated/src/NativeAnimatedHelper.js#L108
but not working.

Additional Information

• React Native version: 0.44
• Platform: iOS
• Development Operating System: macOS
• Dev tools: XCode

[julienvincent]

I just hit this problem myself while using it on a <View />. Cannot use native driver for backgroundColor.

[janicduplessis]

This is an error in the documentation, backgroundColor is not supported at the moment.

[chrisknepper]

@janicduplessis Is there a way to use the JS driver, i.e. by passing useNativeDrive: false? My calls to Animated.timing look like:

Animated.parallel([
    Animated.timing(sectionData.animatedBackgroundValue, {
        toValue: targetAnimationValue,
        duration: 500,
        useNativeDriver: false
    }),
    Animated.timing(sectionData.animatedValue, {
        toValue: targetAnimationValue,
        duration: 500,
        useNativeDriver: false
    })
]).start();

But I still get an error:

Attempting to run JS driven animation on animated node that has been moved to "native" earlier by starting an animation with `useNativeDriver: true`

This is with react-native 0.45.1

[janicduplessis]

@chrisknepper Native and non-native drivers are not compatible so you need to use either one per animated value. If you get this error it is probably because you use useNativeDriver on another animation for the same animated value.

[JanPeter]

Is there any roadmap when style properties like height or backgroundColor will be supported by native animations?

Especially for things like animating the navigation header when transitioning from one to another screen this would be awesome! 👍

[janicduplessis]

It's not on the roadmap at the moment, backgroundColor should not be that bad to implement but layout properties like height is a lot harder. You can usually get around those limitations by using opacity with multiple stacked views and LayoutAnimation.

[JanPeter]

Thanks for the quick reply! Actually never thought about using opacity for the backgroundColor, thanks! 👍
Can I use LayoutAnimation in combination with native animations? Not planning on using it at the moment, just curious if it will work since the Animated Value is no compatible with the native Animated Value.

[janicduplessis]

LayoutAnimation doesn't use animated values so it should not be an issue, LayoutAnimation is a lot less flexible but it makes some animations that are hard to do with Animated pretty easy.

[JanPeter]

Thanks, I'll have a look into that :)

[Palisand]

@janicduplessis Any news on this?

[pintocarlos]

Does LayoutAnimation use the ui thread like the animated driver? Also, which properties are supported by LayoutAnimation? Blog post says layout and position, but what about borderRadius, border, and margin?

[pintocarlos]

I was able to confirm that borderRadius and margin are also animated, but padding is not. Native driver is used yes.