Error when use useNativeDriver in React Native Animated

Question

When I use useNativeDriver in React Native Animated

state = {
    chevronUp: new Animated.Value(-50),
};

Animated.spring(this.state.chevronUp, {
    toValue: 50,
    friction: 5,
    useNativeDriver: true,  // <----- this line
}).start();

and render

<Animated.View style={{bottom: this.state.chevronUp,position: "absolute", right: 20, width: 50, height: 50}}>
     <Icon name="chevron-up" size={28} color="#666"/>
</Animated.View>

these errors give me

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

and

Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

Answer 1

you need to use "translateY" property instead of "bottom" which is supported by the native driver, so your initial value will look like this:

state = {
    chevronUp: new Animated.Value(50),
}

Animated.spring(this.state.chevronUp, {
    toValue: -50,
    friction: 5,
    useNativeDriver: true,  // <----- this line
}).start();

and in the render method:

<Animated.View style={{translateY: this.state.chevronUp,position: "absolute", right: 20, width: 50, height: 50}}>
     <Icon name="chevron-up" size={28} color="#666"/>
</Animated.View>