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 founded in RN 0.42 too.