Animated: `useNativeDriver` was not specified issue of

ReactNativeBase Input
Asked 3 years, 10 months ago Modified 11 months ago Viewed 121k times

I created a new react-native project today (April 3rd, 2020) and added a native-base. Then
I tried to add input with the floating label. It gives a warning message:
Animated:

76 useNativeDriver was not specified. This is a required option and must be explicitly
set to true or false . If I removed the floating label attribute or changed it to
stackedLabel the warning disappeared. While this warning is appearing, onChangeText is
not being called.

Component File
import React from 'react';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
View,
} from 'react-native';

import {Input, Item, Label} from 'native-base';

import {Colors} from 'react-native/Libraries/NewAppScreen';

declare var global: {HermesInternal: null | {}};

const App = () => {

return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<View style={styles.body}>
<Item floatingLabel>
<Label>Test</Label>
<Input onChangeText={text => console.log(text)} />
</Item>
</View>
</ScrollView>
</SafeAreaView>
</>
);
};

package.json
 {
"name": "formtest",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"dependencies": {
"native-base": "^2.13.12",
"react": "16.11.0",
"react-native": "0.62.0"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/runtime": "^7.6.2",
"@react-native-community/eslint-config": "^1.0.0",
"@types/jest": "^24.0.24",
"@types/react-native": "^0.62.0",
"@types/react-test-renderer": "16.9.2",
"@typescript-eslint/eslint-plugin": "^2.25.0",
"@typescript-eslint/parser": "^2.25.0",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.58.0",
"react-test-renderer": "16.11.0",
"prettier": "^2.0.2",
"typescript": "^3.8.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
]
}
}

javascript reactjs react-native native-base

Share Improve this question edited Mar 2, 2023 at 14:50 asked Apr 3, 2020 at 14:57
Follow meaning-matters Supun Induwara
22.3k 10 84 145 1,632 3 15 23

13 Answers Sorted by: Highest score (default)

Just add useNativeDriver: true to the animation config.

129 const [animatePress, setAnimatePress] = useState(new Animated.Value(1))

const animateIn = () => {

Animated.timing(animatePress, {
toValue: 0.5,
duration: 500,
useNativeDriver: true // Add This line
}).start();
}

UPDATED
Solution:
As the warning says, we need to specify the option explicitly and set it to
useNativeDriver
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>

Share Improve this answer edited Aug 25, 2021 at 22:22 answered Apr 9, 2020 at 9:23
Follow Javascript Addicted
13.5k 7 70 79
Hi, may i know where to find and edit the Animated.timing? – kaizen Jul 3, 2020 at 9:37
you can not simply add another answer in your answer without specifying his/her name
– Nisharg Shah Nov 2, 2020 at 13:47
@Nisharg Shah - That's your right, but I read that in github.com :
github.com/GeekyAnts/NativeBase/issues/… I removed it from my answer, as I told I read that in
Github – Javascript Addicted Nov 2, 2020 at 15:23
No issues but you must specify the name if you update your answer after some person add the
same answer in your post, that's why I told you and these the regular behavior of SO
– Nisharg Shah Nov 2, 2020 at 16:46
github.com/GeekyAnts/NativeBase/issues/… – Javascript Addicted Nov 2, 2020 at 22:15

Facing the same issue for a long time and still no update from native-base developers yet
in 2021.
32 Meanwhile use a workaround to avoid irritating yellow warnings of .
useNativeDriver

UPDATE RN V0.63 ABOVE

is now changed and replace with
YellowBox 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`']);
}

Share Improve this answer edited Jun 27, 2021 at 17:06 answered Aug 21, 2020 at 9:09
Follow Nisharg Shah
17.9k 11 63 74
1 That helped me out – Zeeshan Ahmad Khalil Oct 22, 2020 at 7:03
1 what does functional mean? where should I add this? would that work for all the apperances of
the message? – Diego Rivera Nov 3, 2020 at 2:28
React is written in two styles, Functional based and class based, you must to add that code in
those, where you want to ignore those warning – Nisharg Shah Nov 3, 2020 at 2:44
5 Idk I'm just saying it's a warning and hiding the warning is not the same as fixing the warning
yeah? But I am also going to hide the warning for now since it's not fixed yet.
– Charitha Goonewardena Jan 25, 2021 at 17:58
Didn't work! Tried adding it to the UI file as well as test file. – cmcodes Mar 9, 2022 at 12:35

Seem to be a known bug of current nativebase.io Release:

https://github.com/GeekyAnts/NativeBase/issues/3109
12 Additional Info, what exactly the issue is about:
https://reactnative.dev/blog/2017/02/14/using-native-driver-for-animated#how-do-i-use-
this-in-my-app
Share Improve this answer Follow answered Apr 3, 2020 at 15:22
suther
13k 4 65 101

use the following code to avoid the warning message of usenativedriver

4 Animated.timing(new Animated.Value(0),
{
 toValue: 1,
duration: 500,
easing: Easing.linear,
useNativeDriver: false //make it as false
}).start();

Share Improve this answer Follow answered Sep 27, 2020 at 11:33
Karthikeyan Ganesan
1,919 20 24

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

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

The Animated.spring is being called in onPanResponderRelease function.

Share Improve this answer Follow answered Aug 23, 2020 at 12:51
Farhan
1,465 1 16 24

In react native SDK 39 you have to write following code:

2 LogBox.ignoreLogs(['Animated: `useNativeDriver` was not specified.']);

Share Improve this answer Follow answered Sep 24, 2020 at 22:36
ziishaned
5,174 3 27 32

native-base fixed this as of January. Get at least v2.15.2

1 yarn add native-base@^2.15.2

Release notes: https://github.com/GeekyAnts/NativeBase/releases/tag/v2.15.2

Share Improve this answer Follow answered Feb 22, 2021 at 12:10
Freewalker
6,657 5 51 71
 It will mostly be a matter of finding all instances of Animated.timing or Animated.spring and
adding useNativeDriver: true to the config.
0 Share Improve this answer Follow answered May 2, 2020 at 18:56
Nitin Singh
1 1

Using class Component just add the Animated.timing inside componentDidMount() and
define useNativeDriveras true or false
0 class App extends Component {

animatedValue = new Animated.Value(0);

componentDidMount() {
Animated.timing(this.animatedValue,
{
toValue: 1,
duration: 1000,
useNativeDriver: true
}).start();
}

render() {
return (
<View style={styles.container}>
<View style={styles.squareBG}/>
<Animated.View style={[styles.square, {opacity:
this.animatedValue}]}/>
</View>
);
}
}

Share Improve this answer Follow answered Jul 25, 2020 at 10:04
anehme
536 1 6 18
 I just added this in my App.js and worked for me :)
0 import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings([
'Animated: `useNativeDriver` was not specified.',
]);

Share Improve this answer Follow answered Jul 29, 2020 at 22:55
Erick
27 2

So this is the solution if you are getting this type of warning in your terminal. Warning:
dynamic: useNativeDriver was not defined. This is a required option and must be explicitly
0 set to 'true' or 'false'.
I tried to remove this warning with YellowBox.ignoreWarnings(['Animated:
useNativeDriver ']) and then got this warning.
Warn:YellowBox has been replaced by LogBox. Please call LogBox.ignoreLogs() instead.
So I found this and it is working fine in my project. LogBox.ignoreLogs(['Driver:
`useNativeDriver'']) add this line in index.js folder.
Share Improve this answer Follow answered Feb 6, 2023 at 8:33
zikran shakeel
1 1

if you using useeffect put inside useeffect

-1 working for me
LogBox.ignoreLogs(['Animated: `useNativeDriver`']);

Share Improve this answer Follow answered Sep 12, 2022 at 7:14
ND verma
201 3 10
This is not a solution to the issue flagged but instead a way to hide the warning and pretend it
doesn't exist. – Patrick Lafferty May 22, 2023 at 13:36

just search animated.timing on folder ~\node_modules\native-base\dist\src\basic\ and add

manually useNativeDriver: true or false
-4 Share Improve this answer Follow answered Apr 7, 2020 at 5:06
Ahmad Habib
9 1

7 If you make changes like this you will most likely want to use the 'patch-package' module in order
to generate a patch of the changes you made and automatically apply them if/when
node_modules is reinstalled – Mike Hardy Apr 18, 2020 at 23:18