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

[z-fashion]

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

Is the default value of useNativeDriver invalid?

Description

Animated.timing(this.spinValue, {
toValue: 1,
duration: 500,
easing: Easing.linear
}).start();

React Native version:0.62.1

[juzow13]

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

[github-actions[bot]]

:warning:	Missing Required Fields
:information_source:	It looks like your issue may be missing some necessary information. GitHub provides an example template whenever a new issue is created. Could you go back and make sure to fill out the template? You may edit this issue, or close it and open a new one.

[github-actions[bot]]

:warning:	Missing Environment Information
:information_source:	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[z-fashion]

@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

[mlisik]

@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.

[z-fashion]

@mlisik thanks

[jituumaria]

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

[ddyake]

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

[zaptrem]

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.

[bakkerjoeri]

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.

[hammerstrike331]

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

[Farhan-Haseeb]

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

which file?

When using Animated.spring or any other Animation specify useNativeDriver: true or useNativeDriver: false.
Example:

Animated.spring(this.position, {
    toValue: { x: 0, y: 0 },
    useNativeDriver: true,
}).start();

The Animated.spring is being called in onPanResponderRelease function.

[bashmentarium]

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

which file?

When using Animated.spring or any other Animation specify useNativeDriver: true or useNativeDriver: false.
Example:

Animated.spring(this.position, {
    toValue: { x: 0, y: 0 },
    useNativeDriver: true,
}).start();

The Animated.spring is being called in onPanResponderRelease function.

This happens after I do exactly what you suggested.

[shoopi12]

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

[ZeeshanAhmadKhalil]

I which file we can find Animated.timing ?

[hassanannajjar]

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`']);
}