Nativebase: react-native 0.62.0 - Animated: `useNativeDriver`

[kperreau]

I have gone through these following points

• [x] Check latest documentation: https://docs.nativebase.io/
• [x] Check for existing open/closed issues for a possible duplicate before creating a new issue: https://github.com/GeekyAnts/NativeBase/issues
• [x] Use the latest NativeBase release: https://github.com/GeekyAnts/NativeBase/releases
• [x] Check examples from NativeBase KitchenSink https://github.com/GeekyAnts/NativeBase-KitchenSink
• [] For discussion purpose make use of NativeBase Slack: http://slack.nativebase.io/
• [] For queries related to theme, check Theme Variables from Docs and live NativeBase Theme Editor http://nativebase.io/customizer/

Issue Description

node, npm, react-native, react and native-base version, expo version if used, xcode version

node: v12.14.1
npm: 6.14.4
react-native: 0.62.0
native-base: 2.13.12

Expected behaviour

Actual behaviour

Get some warning in react-native console since react-native 0.62.0.
WARN Animated: "useNativeDriver" was not specified. This is a required option and must be explicitly set to "true" or "false".

Steps to reproduce

Just run a react-native app and use some components with animation without specify useNativeDriver, like <Toast>.

Is the bug present in both iOS and Android or in any one of them?

Both iOS and Android.

Any other additional info which would help us debug the issue quicker.

[Texicitys]

Same here :)

[sauravsid]

Same here. Please fix this issue

[astrahov]

Same <Item> with floatingLabel

<Form>
    <Item floatingLabel>
        <Label>Username</Label>
        <Input />
    </Item>
    <Item floatingLabel last>
        <Label>Password</Label>
        <Input />
    </Item>
</Form>

[mogol23]

for toast replace ~\node_modules\native-base\dist\src\basic\ToastContainer.js by this code https://pastebin.com/mDfeg13E
or you can add useNativeDriver manually, just search _animated.timing_ on nativebase module

sory for my bad english

[levibuzolic]

This would make a great first contribution for somebody to create a Pull Request for. It will mostly be a matter of finding all instances of Animated.timing or Animated.spring and adding useNativeDriver: false to the config.

Ideally useNativeDriver: true should be used for performance, but to match the current implementation of this library and avoid any headaches with working out which values can/cannot be natively driven and any elements that might have both native and JS driven animations it'll be safest just to throw useNativeDriver: false on all instances.

[AdeilsonESilva]

Same error here!

[sgonzalez98]

I have same error.

[dansokol]

Created a PR for this per @levibuzolic comments above: https://github.com/GeekyAnts/NativeBase/pull/3136

Currently using my fork to avoid the yellow warnings until they merge or fix and it's working fine for me now:
"dependencies: {
...
"native-base": "https://github.com/dansokol/NativeBase.git",
...
}

[vladcast]

Created a PR for this per @levibuzolic comments above: #3136

Currently using my fork to avoid the yellow warnings until they merge or fix and it's working fine for me now:
"dependencies: {
...
"native-base": "https://github.com/dansokol/NativeBase.git",
...
}

Waiting for merge)

[zakaria-bali]

in *\node_modules\native-base\dist\src\basic\Item.js search on 'animated.timing' and add 'useNativeDriver: false' to every callback function, this gonna hide the warning, (if u add useNativeDriver: true, you gonna face an error tell you that nativeDriver do not support Top (bla bala)), sorry for my bad english.

[Dheyson]

I got the warning using any of the input float labeled from NativeBase. I saw that it was merged but still got the warning after the update. Does anyone know if it must make any configuration manually?

[dansokol]

I only updated the "src" directory.

Wasn't sure if I should be committing to the "dist" directory as well. Think it will be in the next update that compiles the src directory and updates the "dist" directory.

[DalerAsrorov]

Would be great to have the latest release soon

[asaadxheikh]

same yellow warning here :(

[AdrianoCahete]

Any update on this issue?

Edit: Found that is already fixed by GeekyAnts/NativeBase#3136 but not rolled to production yet, even that already merged!

[cecodor]

Waiting for this

[rickeletro]

@astrahov

Same <Item> with floatingLabel

<Form>
    <Item floatingLabel>
        <Label>Username</Label>
        <Input />
    </Item>
    <Item floatingLabel last>
        <Label>Password</Label>
        <Input />
    </Item>
</Form>

in *\node_modules\native-base\dist\src\basic\Item.js search on 'animated.timing' and add 'useNativeDriver: false' ex: _reactNative.Animated.timing(this.state.opacAnim,{toValue:0.7,duration:150, useNativeDriver: false}).start();}}

[n3rd253]

@levibuzolic it looks like there is a PR waiting for this to be rolled out. Can we please get this merged?

[shivarajnaidu]

Guys.. this is impacting everyone using latest ReactNative .. it would be helpful to all if admin can rollout the fix soon ...

[djimenezlegend]

Go Team .. It impacting everyone using latest ReactNative ... Can you help us by making the latest release available please

[satsuya0114]

same warning... :(
don't want to downgrade rn version
plz fix it asap

[damasofc]

is there any quick solution for this?

[n3rd253]

@damasofc downgrade RN below 0.62

Or the admins could merge the PR and deploy @levibuzolic

[Alaa-Ben]

Hi ! any news on this ?

[Nemferno]

I've been using patch-package to keep the changes until the PR merges. I highly recommend it as the tool keeps the changes whenever a new version is released and an issue was never reconciled in the new version. Nice band-aid until admins merge the PR.

[aravi365]

Any news on this?????????????

[aymenamaraa]

Same here, any news?

[mtsprojects]

Any update

[sktan810]

same here, any updates for this fix ?

[asim47]

for now on

Created a PR for this per @levibuzolic comments above: #3136
Currently using my fork to avoid the yellow warnings until they merge or fix and it's working fine for me now:
"dependencies: {
...
"native-base": "https://github.com/dansokol/NativeBase.git",
...
}

Waiting for merge)

Currently using this PR until the update rolls out.

[vuskhoza]

https://github.com/dansokol/NativeBase.git PR working for me as well

[adavecohen95]

Any luck on this? Any chance of getting a new npm version rolled out by this week?

[Nauglamir-dev]

I'm also waiting for a fix, any news ?

[dungpasoftware]

same warning -_- , I'm waiting updates for fix this

[vipulchasta]

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

We will have to wait till they officially fix it, or they do merge the existing PR for the fix.
Meanwhile use workaround to avoid irritating yellow warnings of useNativeDriver.

Do addition of following lines in your App.js file.

import {YellowBox} from 'react-native';

componentDidMount() {
    YellowBox.ignoreWarnings(['Animated: `useNativeDriver`']);
}

[gutapuct]

When are they going to merge it into the release?

[kimkong88]

merge it please...

[Remigius2011]

Hi all,

Even if the urge to do so is very high, please refrain from posting "me too" comments.

The PR is available and merged (see message above from 8 May by @AdrianoCahete ), so it will eventually be released according to the release schedule. Until then, there is only a very slight annoyance, namely a yellow spot in development mode (it will not appear in production), but other than that everything works as designed. Further more, for those who absolutely need to remove this yellow spot from their development experience, there are various fixes posted in this Fred.

Cheers and have fun, Remi.

[DalerAsrorov]

@Remigius2011 it's been 3 months since this PR was merged and there has been no new releases for quite a while. If you are bothered by the "me too" comments maybe ask someone you know to release a new version that contains this fix.

[codler]

It is still an issue in React native 0.63.0

[YahiaBadr]

@Remigius2011 what is the expected time for the new release?

[codler]

I have forked the repo to fix this issue.

npm i @codler/native-base

[darrylyoung]

Version 2.13.13 was just released and contains the fix for this issue.

[tonyea]

@darrylyoung thanks!! Tested and working.

[AdeilsonESilva]

Tks God, tks team!!! You are amazing!

[ppulwey]

Most of the warnings are gone. But receiving an issue with Toast?

- node_modules/react-native/Libraries/Animated/src/AnimatedImplementation.js:365:6 in result.start
- node_modules/native-base/dist/src/basic/ToastContainer.js:1:3656 in onPanResponderRelease

[ImagineITSolutions]

Also have the issue with Toast. Same as above

[lvegh]

Recieving the following when closing manually toast:

Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false

react-native: 0.62.2
react-base: 2.13.13

[nicolak]

Recieving the following when closing manually toast:

Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false

react-native: 0.62.2
react-base: 2.13.13

I'm getting the same warning.

react-native: 0.62.2
native-base: 2.13.13

[RikusWiehahn]

Also have the issue with Toast. Same as above

"native-base": "^2.13.13",
"react-native": "0.62.2",

[Farhan-Haseeb]

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

[ilies-space]

  useEffect(() => {
    LogBox.ignoreLogs(['Animated: `useNativeDriver` was not specified.']);
    return () => {};
  }, []);

[cecodor]

Just getting this warning sometimes when tapping buttons making them unusable (version 2.13.13), restarting the app solves the issue

[Aung-Myint-Thein]

I found a very strange bug in Toast. When the toast is shown, the yellow warning also comes up for "useNativeDriver" although I am already on 2.13.13. After the toast is closed, I cannot click the buttons shown or covered by the toast area. Now, I replaced the Toast with RN Alert .. ugly but working now.

[djimenezlegend]

I have the same problem and resolved temporary with https://github.com/GeekyAnts/NativeBase/pull/3200, however in the last version 2.13.14 it was already fixed!

[marquina-abreu]

Upgrade to "native-base": "^2.13.14", this solved the problem

[lewisjones28]

Upgrade to "native-base": "^2.13.14", this solved the problem

Not for me it didn't...

[viniciuspsilvas]

Upgrade to "native-base": "^2.13.14", this solved the problem

Not for me as well...

[Luan3642]

Add to your project the following import

import { YellowBox } from 'react-native';

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

[BertoGz]

Hello Im also still facing issue with nativeDriver for the deck swiper.

[copleykj]

Just added PR #3278 to fix this issue in the DeckSwiper, Fab, and ToastContainer components.

[thumbsappscr]

Is it already published on npm ? Im using 2.13.14 and im having that issue with FAB.