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

Question

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

Abolfazl Roshanzamir · Accepted Answer · 2021-08-25T22:22:37.607

125

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>

edited Aug 25 '21 at 22:22

answered Apr 09 '20 at 09:23

Abolfazl Roshanzamir

12,730
5
63
79

Hi, may i know where to find and edit the Animated.timing? – kaizen Jul 03 '20 at 09:37
you can not simply add another answer in your answer without specifying his/her name – Nisharg Shah Nov 02 '20 at 13:47
@Nisharg Shah - That's your right, but I read that in github.com : https://github.com/GeekyAnts/NativeBase/issues/3109#issuecomment-698318985 I removed it from my answer, as I told I read that in Github – Abolfazl Roshanzamir Nov 02 '20 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 02 '20 at 16:46
https://github.com/GeekyAnts/NativeBase/issues/3109#issuecomment-698318985 – Abolfazl Roshanzamir Nov 02 '20 at 22:15

Nisharg Shah · Answer 2 · 2021-06-27T17:06:08.040

32

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

edited Jun 27 '21 at 17:06

answered Aug 21 '20 at 09:09

Nisharg Shah

16,638
10
62
73

1

That helped me out – Zeeshan Ahmad Khalil Oct 22 '20 at 07:03
1

what does functional mean? where should I add this? would that work for all the apperances of the message? – Diego Rivera Nov 03 '20 at 02: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 03 '20 at 02: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 '21 at 17:58
Didn't work! Tried adding it to the UI file as well as test file. – cmcodes Mar 09 '22 at 12:35

score 12 · Answer 3 · answered Apr 03 '20 at 15:22

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

score 4 · Answer 4 · answered Sep 27 '20 at 11:33

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

score 2 · Answer 5 · answered Aug 23 '20 at 12:51

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.

score 2 · Answer 6 · answered Sep 24 '20 at 22:36

2

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

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

answered Sep 24 '20 at 22:36

ziishaned

4,944
3
25
32

score 1 · Answer 7 · answered Feb 22 '21 at 12:10

1

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

answered Feb 22 '21 at 12:10

Freewalker

6,329
4
51
70

score 0 · Answer 8 · answered May 02 '20 at 18:56

0

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

answered May 02 '20 at 18:56

Nitin Singh

1
1

score 0 · Answer 9 · answered Jul 25 '20 at 10:04

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

score 0 · Answer 10 · answered Jul 29 '20 at 22:55

0

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

import { YellowBox } from 'react-native';

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

answered Jul 29 '20 at 22:55

Erick

27
2

score 0 · Answer 11 · answered Feb 06 '23 at 08:33

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

score -1 · Answer 12 · answered Sep 12 '22 at 07:14

-1

if you using useeffect put inside useeffect

working for me

LogBox.ignoreLogs(['Animated: `useNativeDriver`']);

answered Sep 12 '22 at 07:14

ND verma

171
1
9

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 '23 at 13:36

score -3 · Answer 13 · answered Apr 07 '20 at 05:06

-3

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

answered Apr 07 '20 at 05:06

Ahmad Habib

11
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 '20 at 23:18

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

13 Answers13

UPDATED

UPDATE RN V0.63 ABOVE

UPDATE RN V0.63 BELOW

Linked