react-native: Animated: `useNativeDriver` was not specified. This is a required 'option and must be explicitly set to `true` or `false`

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

react native 0.62 Animated.timing(this.state.animatedValue, { toValue: 1, duration: 500, useNativeDriver: true, // <-- Add this }).start();

Is there some way to track which of the million components and dependencies in my project is causing this error? It’s so spammy logging is basically unusable, but I’m given no information about which function/component/package contains the issue.

Yet no one mentions what is useNativeDriver and whether changing it to true or false is preferred.

I’m surprised that the documentation for Animated in all cases states useNativeDriver defaults to some value, but in actuality you’re required to set it.

Explicitly setting the option will make the warning disappear. https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated#how-do-i-use-this-in-my-app

Facing the same issue for a long time and still no update from native-based developers yet in 2020.

Meanwhile use a workaround to avoid irritating yellow warnings of useNativeDriver.

UPDATE RN V0.63 ABOVE YellowBox is now changed and replace with LogBox.

FUNCTIONAL

import React, { useEffect } from 'react';
import { LogBox } from 'react-native';

useEffect(() => {
    LogBox.ignoreLogs(['Animated: `useNativeDriver`']);
}, [])

CLASS BASED

import React from 'react';
import { LogBox } from 'react-native';

componentDidMount() {
    LogBox.ignoreLogs(['Animated: `useNativeDriver`']);
}

UPDATE RN V0.63 BELOW FUNCTIONAL

import React, { useEffect } from 'react';
import { YellowBox } from 'react-native';

useEffect(() => {
    YellowBox.ignoreWarnings(['Animated: `useNativeDriver`']);
}, [])

CLASS BASED

import React from 'react';
import { YellowBox } from 'react-native';

componentDidMount() {
    YellowBox.ignoreWarnings(['Animated: `useNativeDriver`']);
}

I which file we can find Animated.timing ?

@zhanfashion note that this is an intentional change in 0.62 (changelog#deprecated) – see a bit of an explanation in the description of the commit here. You can silence this specific warning using YellowBox, but bear in mind that at some point in the future the default value for useNativeDriver will change, possibly causing your current code to error.

react native 0.62 Animated.timing(this.state.animatedValue, { toValue: 1, duration: 500, useNativeDriver: true, // <-- Add this }).start();

which file?

https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated#how-do-i-use-this-in-my-app ref this url

@safaiyeh

There are too many Animated in the old project, it is too difficult to fix the warning. If you do n’t specify useNativeDriver: true or false, it will cause a warning

demo

https://github.com/zhanfashion/animatedDemo

info

System:
    OS: Windows 10 10.0.18363
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 3.13 GB / 15.87 GB
  Binaries:
    Node: 12.16.1 - D:\Services\Nodejs\node.EXE
    Yarn: 1.19.1 - D:\Services\Nodejs\global_modules\yarn.CMD
    npm: 6.13.4 - D:\Services\Nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 12.0.2
    Python: 3.7.4
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found