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"
]
}
}
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();
}
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>