Animated: `useNativeDriver` was not specified issue of ReactNativeBase Input

问题

I created a new react native project today (April 3rd, 2020) and added native-base. Then I tried to add an input with floating label. It gives warning message: Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false. If I removed floatingLabel attribute or changed it to stackedLabel the warning disappeared. While this warning is appearing, onChangeText is not being called.

The 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"
        ]
      }
    }

回答1:

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

回答2:

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

回答3:

It will mostly be a matter of finding all instances of Animated.timing or Animated.spring and adding useNativeDriver: true to the config.

回答4:

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>
        );
    }
}

回答5:

I just added this in my App.js and worked for me :)

import { YellowBox } from 'react-native';

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

回答6:

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

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

add below code in your file

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

回答7:

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.

回答8:

just search animated.timing on folder ~\node_modules\native-base\dist\src\basic\ and add manually useNativeDriver: true or false

来源：https://stackoverflow.com/questions/61014661/animated-usenativedriver-was-not-specified-issue-of-reactnativebase-input

标签

react-native

native-base