Animated: `useNativeDriver` was not specified issue of ReactNativeBase Input
JavascriptReactjsReact NativeNative BaseJavascript Problem Overview
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: 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 Solutions
Solution 1 - Javascript
Just add useNativeDriver: true
to the animation config.
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 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>
Solution 2 - Javascript
Facing the same issue for a long time and still no update from native-base developers yet in 2021.
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`']);
}
Solution 3 - Javascript
Seem to be a known bug of current nativebase.io Release: https://github.com/GeekyAnts/NativeBase/issues/3109
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
Solution 4 - Javascript
When using Animated.spring
or any other Animation specify useNativeDriver: true
of useNativeDriver: false
.
Example:
Animated.spring(this.position, {
toValue: { x: 0, y: 0 },
useNativeDriver: true,
}).start();
The Animated.spring
is being called in onPanResponderRelease
function.
Solution 5 - Javascript
use the following code to avoid the warning message of usenativedriver
Animated.timing(new Animated.Value(0),
{
toValue: 1,
duration: 500,
easing: Easing.linear,
useNativeDriver: false //make it as false
}).start();
Solution 6 - Javascript
native-base fixed this as of January. Get at least v2.15.2
yarn add native-base@^2.15.2
Release notes: https://github.com/GeekyAnts/NativeBase/releases/tag/v2.15.2
Solution 7 - Javascript
It will mostly be a matter of finding all instances of Animated.timing or Animated.spring and adding useNativeDriver: true to the config.
Solution 8 - Javascript
Using class Component just add the Animated.timing
inside componentDidMount()
and define useNativeDriver
as true or false
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>
);
}
}
Solution 9 - Javascript
I just added this in my App.js
and worked for me :)
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings([
'Animated: `useNativeDriver` was not specified.',
]);
Solution 10 - Javascript
In react native SDK 39 you have to write following code:
LogBox.ignoreLogs(['Animated: `useNativeDriver` was not specified.']);
Solution 11 - Javascript
just search animated.timing on folder ~\node_modules\native-base\dist\src\basic\ and add manually useNativeDriver: true or false