React-native Animation.event style property is not supported

Question

I have a problem with Animated.event with interpolate on scroll event. When I use Animated.event with

useNativeDriver: true

I receive next error:

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

If I use opacity property - it works fine.

My code:

render() {         this.yOffset = new Animated.Value(0);          let event = Animated.event([             {                 nativeEvent: {                     contentOffset: {                         y: this.yOffset                     }                 }             }         ], {useNativeDriver: true});          let opacity = this.yOffset.interpolate({             inputRange: [0, 120],             outputRange: [1, 0],         });          let height = this.yOffset.interpolate({             inputRange: [0, 180],             outputRange: [200, 100],         });          return (             <View>                 <Header                     style={{                         opacity,                         height                     }}                 />                   <ScrollView                     style={[                         {                             flexDirection: "column"                         }                     ]}                     scrollEventThrottle={1}                     onScroll={event}                 >                      // some content                  </ScrollView>             </View>         );     } 

opacity - works.

height - didn't works.

Without useNativeDriver: true - all works fine.

Android Accelerated_x86 API 23

RN 0.43.0-rc.4

React 16.0.0-alpha.3

Problem exists also in RN 0.42.

Answer 1

As the React Native documentation says, you can only animate non-layout properties. Transform property is supported so you can use transform.scaleY instead of changing the height.

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.

Using Native Driver for Animated

Answer 2

This error comes from validateTransform function inside React Native lib.You can check the TRANSFORM_WHITELIST in NativeAnimatedHelper for the property supported by 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, }; 

'height' is not in TRANSFORM_WHITELIST; scaleY is.