Question

Upgrade the React Native project to 0.62. There are some warnings about the Animated method.

WARN Animated: "useNativeDriver" was not specified. This is a required option and must be explicitly set to "true" or "false"

Solution

As the tip says, we need to specify the  useNativeDriver option explicitly and set it to  true  or  false .

1. Animation methods

Refer to  Animated doc , with animation types or composition functions, for example, Animated.decay(), Animated.timing(), Animated.spring(), Animated.parallel(), Animated.sequence(), specify  useNativeDriver .

Animated.timing(this.state.animatedValue, {
  toValue: 1,
  duration: 500,
  useNativeDriver: true, // Add this line
}).start();

2. Animatable components

Animated exports the following animatable components using the above wrapper:

• Animated.Image
• Animated.ScrollView
• Animated.Text
• Animated.View
• Animated.FlatList
• Animated.SectionList

When working with Animated.event() , add useNativeDriver: false/true to the animation config.

<Animated.ScrollView
  scrollEventThrottle={1}
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this.state.animatedValue } } }],
    { useNativeDriver: true } // Add this line
  )}
>
  {content}
</Animated.ScrollView>