"Animated: useNativeDriver was not specified" warning since React Native 0.62

[RadomirKus]

Following warning keeps appearing whenever I click on any button or item:

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

react-native: 0.62

[blindibrasil]

I think the solution to the problem will be to implement the following change to the ActionButton.js file;

 //////////////////////
  // Animation Methods
  //////////////////////

  animateButton(animate = true) {
    if (this.state.active) return this.reset();

    if (animate) {
      Animated.spring(this.anim, { toValue: 1, useNativeDriver: false }).start();
    } else {
      this.anim.setValue(1);
    }

    this.setState({ active: true, resetToken: this.state.resetToken });
  }

  reset(animate = true) {
    if (this.props.onReset) this.props.onReset();

    if (animate) {
      Animated.spring(this.anim, { toValue: 0, useNativeDriver: false }).start();
    } else {
      this.anim.setValue(0);
    }

    setTimeout(() => {
      if (this.mounted) {
        this.setState({ active: false, resetToken: this.state.resetToken });
      }
    }, 250);
  }

[sunkakar]

I have the same issue!

[IgorThierry]

I have the same issue!

[ytr0]

I think the solution to the problem will be to implement the following change to the ActionButton.js file;

 //////////////////////
  // Animation Methods
  //////////////////////

  animateButton(animate = true) {
    if (this.state.active) return this.reset();

    if (animate) {
      Animated.spring(this.anim, { toValue: 1, useNativeDriver: false }).start();
    } else {
      this.anim.setValue(1);
    }

    this.setState({ active: true, resetToken: this.state.resetToken });
  }

  reset(animate = true) {
    if (this.props.onReset) this.props.onReset();

    if (animate) {
      Animated.spring(this.anim, { toValue: 0, useNativeDriver: false }).start();
    } else {
      this.anim.setValue(0);
    }

    setTimeout(() => {
      if (this.mounted) {
        this.setState({ active: false, resetToken: this.state.resetToken });
      }
    }, 250);
  }

This works.

[Sharvin26]

I think the solution to the problem will be to implement the following change to the ActionButton.js file;

 //////////////////////
  // Animation Methods
  //////////////////////

  animateButton(animate = true) {
    if (this.state.active) return this.reset();

    if (animate) {
      Animated.spring(this.anim, { toValue: 1, useNativeDriver: false }).start();
    } else {
      this.anim.setValue(1);
    }

    this.setState({ active: true, resetToken: this.state.resetToken });
  }

  reset(animate = true) {
    if (this.props.onReset) this.props.onReset();

    if (animate) {
      Animated.spring(this.anim, { toValue: 0, useNativeDriver: false }).start();
    } else {
      this.anim.setValue(0);
    }

    setTimeout(() => {
      if (this.mounted) {
        this.setState({ active: false, resetToken: this.state.resetToken });
      }
    }, 250);
  }

I am also facing the same issue. Manual change works but this warning will always occur every time when the application is rebuilt ( i.e. node_modules are installed again ). Same issue will occur when publishing the app.

Is there any way we can suppress the warning till the author fixes this issue?

[blindibrasil]

I forwarded a message to the author requesting the error correction merge so that this error no longer appears. Now it's time to wait, as they take too long to make changes.
I believe that you could fork and send your correction to your app because it would be easier and faster, then when you launch the official correction you change.

[W8jonas]

I think the solution to the problem will be to implement the following change to the ActionButton.js file;

 //////////////////////
  // Animation Methods
  //////////////////////

  animateButton(animate = true) {
    if (this.state.active) return this.reset();

    if (animate) {
      Animated.spring(this.anim, { toValue: 1, useNativeDriver: false }).start();
    } else {
      this.anim.setValue(1);
    }

    this.setState({ active: true, resetToken: this.state.resetToken });
  }

  reset(animate = true) {
    if (this.props.onReset) this.props.onReset();

    if (animate) {
      Animated.spring(this.anim, { toValue: 0, useNativeDriver: false }).start();
    } else {
      this.anim.setValue(0);
    }

    setTimeout(() => {
      if (this.mounted) {
        this.setState({ active: false, resetToken: this.state.resetToken });
      }
    }, 250);
  }

It's working fine !! But the author should consider implementing these changes in the new version.

[qiqo]

there's a pull request to fix this since April, I hope the author is all okay and could merge it for the fix.

[mannyhappenings]

Until the PRs get merged, monkey patching the class works,

Hope this helps to some people annoyed by that warning

import RNActionButton from 'react-native-action-button'
import { Animated } from 'react-native'

RNActionButton.prototype.animateButton = function(animate = true) {
    if (this.state.active) return this.reset();

    if (animate) {
      Animated.spring(this.anim, { toValue: 1, useNativeDriver: false }).start();
    } else {
      this.anim.setValue(1);
    }

    this.setState({ active: true, resetToken: this.state.resetToken });
}

RNActionButton.prototype.reset = function (animate = true) {
    if (this.props.onReset) this.props.onReset();

    if (animate) {
      Animated.spring(this.anim, { toValue: 0, useNativeDriver: false }).start();
    } else {
      this.anim.setValue(0);
    }

    setTimeout(() => {
      if (this.mounted) {
        this.setState({ active: false, resetToken: this.state.resetToken });
      }
    }, 250);
}

[Mazinkam]

How is this "monkey patch" used?

[ChronSyn]

How is this "monkey patch" used?

You paste the code at the top of the file for the component where you're using the action button

[manishsharma004]

How is this "monkey patch" used?

As @ChronSyn mentioned, you just paste the patch in any file. But since, it sets the prototype for a class, it's better to put it in an separate file as module an load it in some top level component like App so that it gets loaded only once(not that it makes much difference, but it feels better this way to load it). You don't need to put this patch in every file. Also do add a TODO comment to remove this patch once the PRs are merged and you update to the fixed version.

[ConstantTime]

I am trying to use this in Typescript but the monkey patch doesn't seem to be working. Any fix that can help in typescript? @mannyhappenings @manishsharma004 @ChronSyn

Errors being:

1. Property 'animateButton' does not exist on type 'ActionButton'.
2. Property 'reset' does not exist on type 'ActionButton'
3. Property 'mounted' does not exist on type 'ActionButton', etc.

[dcjones1]

@ConstantTime Here are some quick and dirty typings:

interface ExtendedButton extends ActionButton {
  anim: Animated.Value;
  animateButton: Function;
  state: {
    active: boolean;
    resetToken: any;
  };
  reset: Function;
  mounted: boolean;
  props: ActionButtonProperties & {onReset: Function};
}
(RNActionButton.prototype as ExtendedButton).animateButton = function (animate = true) {
  if (this.state.active) return this.reset();
  if (animate) {
    Animated.spring(this.anim, {toValue: 1, useNativeDriver: false}).start();
  } else {
    this.anim.setValue(1);
  }
  this.setState({active: true, resetToken: this.state.resetToken});
};
(RNActionButton.prototype as ExtendedButton).reset = function (animate = true) {
  if (this.props.onReset) this.props.onReset();
  if (animate) {
    Animated.spring(this.anim, {toValue: 0, useNativeDriver: false}).start();
  } else {
    this.anim.setValue(0);
  }
  setTimeout(() => {
    if (this.mounted) {
      this.setState({active: false, resetToken: this.state.resetToken});
    }
  }, 250);
};

[phatmann]

The workaround: disable the warning:

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

[GustavoContreiras-Feegow]

1. Run yarn add -D replace-in-files-cli
2. On package.json, add replacement scripts and postinstall script:

{
  ...
  "scripts": {
    "replace:actionbutton": "yarn replace:actionbutton:stepone && yarn replace:actionbutton:steptwo && yarn replace:actionbutton:stepone && yarn replace:actionbutton:steptwo",
    "replace:actionbutton:stepone": "yarn replace-in-files --string='Animated.spring(this.anim, { toValue: 1 }' --replacement='Animated.spring(this.anim, { toValue: 1, useNativeDriver: false }' node_modules/react-native-action-button/ActionButton.js",
    "replace:actionbutton:steptwo": "yarn replace-in-files --string='Animated.spring(this.anim, { toValue: 0 }' --replacement='Animated.spring(this.anim, { toValue: 0, useNativeDriver: false }' node_modules/react-native-action-button/ActionButton.js",
    "postinstall": "yarn replace:actionbutton"
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    "replace-in-files-cli": "^1.0.0"
  }
}

Tip: Do this for any fix in any package you need to fix inside node_modules folder

[phatmann]

@GustavoContreiras-Feegow Thanks for the info. Any reason you are not using patch-package?

[aglitoiu]

https://www.npmjs.com/package/react-native-action-button-warnings-fixed

Feel free to try it and create issues there, maybe we will be able to keep it maintained by community, in absence of creator

[DxrkMxn]

I think the solution to the problem will be to implement the following change to the ActionButton.js file;

 //////////////////////
  // Animation Methods
  //////////////////////

  animateButton(animate = true) {
    if (this.state.active) return this.reset();

    if (animate) {
      Animated.spring(this.anim, { toValue: 1, useNativeDriver: false }).start();
    } else {
      this.anim.setValue(1);
    }

    this.setState({ active: true, resetToken: this.state.resetToken });
  }

  reset(animate = true) {
    if (this.props.onReset) this.props.onReset();

    if (animate) {
      Animated.spring(this.anim, { toValue: 0, useNativeDriver: false }).start();
    } else {
      this.anim.setValue(0);
    }

    setTimeout(() => {
      if (this.mounted) {
        this.setState({ active: false, resetToken: this.state.resetToken });
      }
    }, 250);
  }

I create a new component:

import ActionButton from 'react-native-circular-action-menu';
import { Animated } from 'react-native';
/**

• CustomActionButton implementa el uso del componente ActionButton inyectando funciones de correción de errores
  */
  export default class CustomActionButton extends ActionButton {
  animateButton() {
  if (this.state.active) {
  this.reset();
  return;
  }

  Animated.spring(this.state.anim, {
  toValue: 1,
  useNativeDriver: false,
  duration: 250,
  }).start();

  this.setState({ active: true });
  }

reset() {
Animated.spring(this.state.anim, {
toValue: 0,
useNativeDriver: false,
duration: 250,
}).start();

setTimeout(() => {
  this.setState({ active: false });
}, 250);

}
}

this work to me