mastermoo / react-native-action-button

customizable multi-action-button component for react-native
MIT License
2.52k stars 570 forks source link

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

Open RadomirKus opened 4 years ago

RadomirKus commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

I have the same issue!

IgorThierry commented 4 years ago

I have the same issue!

ytr0 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

How is this "monkey patch" used?

ChronSyn commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

The workaround: disable the warning:

useEffect(() => {
    LogBox.ignoreLogs(['Animated: `useNativeDriver`']);
}, [])
GustavoContreiras-Feegow commented 3 years ago
  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 commented 3 years ago

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

aglitoiu commented 2 years ago

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 commented 2 years ago

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'; /**

this work to me