React-native-reanimated: Warning: componentWillMount is deprecated

[vikrantnegi]

Issue

I'm receiving a warning about componentWillMount is deprecated.

Warning: componentWillMount is deprecated and will be removed in the next major version. Use componentDidMount instead. As a temporary workaround, you can rename to UNSAFE_componentWillMount.

Please update the following components: AnimatedComponent

Learn more about this warning here:
https://fb.me/react-async-component-lifecycle-hooks

Versions:

"react": "16.8.6",
"react-native": "0.60.4",
"react-native-reanimated": "^1.1.0",

[jhainaua]

As a workaround you can go into 'react-native-reanimated/src/core/createAnimatedComponent.js and change componentWillMount() to UNSAFE_componentWillMount()

I also haven't had any problems with my animations after moving this._attachProps(this.props); into the componentDidMount() lifecycle method.

I believe deleting componentWillMount and using the following is another workaround that can solve the problem:
```
class AnimatedComponent extends React.Component {
constructor(props) {
super(props);

  this._attachProps(this.props);
  _invokeAnimatedPropsCallbackOnMount = false;
}

[jbrodriguez]

@jhainaua, that is not a workable solution, you'd need to change the upstream code every time you reinstall or in CI environments and such.

[jhainaua]

@jbrodriguez, I apologize for the confusion; I believed that starting the comment with "workaround" would have carried the implications through for the rest of the comment. I've since updated the phrase "workable solution," to "workaround that can solve the problem," as "workaround" implies a temporary fix. Hopefully that language is clearer.

In addition; I haven't had the problem you suggested when using my own fork of a repo. It's true that it can cause some extra work when future updates come out (which can be a pain), but it's the best I've come up with when I want to remove an error and don't own the repo. I recognize that my method may be inefficient. Would you be comfortable sharing if you have a better solution or idea?

Finally, after checking some of the pull requests, it looks like a solution is also being discussed in pull request #342 .

[iwikal]

@jbrodriguez Until resolved in upstream, this tool can be used to apply the workaround directly in the node_modules directory without having to create a fork: https://github.com/ds300/patch-package

[cargallo]

I think that the best workarround, if you know that you are not using ComponentWillMount in your own code, and it's just a library deprecation, is to add an ignore warning at index.js in root directory

import { YellowBox } from 'react-native';

//TODO:CHECK NOT USING THIS LIFECYCLE METHODS. Ignoring change of lifecycle react-native
YellowBox.ignoreWarnings([
'Warning: componentWillMount is deprecated',
'Warning: componentWillReceiveProps is deprecated',
'Warning: componentWillUpdate is deprecated',
]);

[paschaldev]

@cargallo That's not a workaround. It just hides the warning which is not a good thing to do

[cargallo]

@cargallo That's not a workaround. It just hides the warning which is not a good thing to do

Yes It's. The Warning just says that the componentWillMount is deprecated and will be removed in the next major version. Until you change the version of your project you will not have any problem and at that time probably the library will be corrected. That's why I talked about workarround and not solution.

[nucle4r]

@jbrodriguez Until resolved in upstream, this tool can be used to apply the workaround directly in the node_modules directory without having to create a fork: https://github.com/ds300/patch-package

Unfortunately this is not helping me! I followed the directions but every time I install a dependency it reverts back.

[mattmogford]

The fix has been pushed to master, but isn't on npm yet. I would rather not blanket ignore cpm deprecation warnings, in-case any others come along that could be missed.

[pistou]

The fix seems to be merged in master branch but not on NPM.
As a workaround, you can install the current master branch - but you'd lose the version number

yarn add https://github.com/kmagiera/react-native-reanimated.git\#master
// OR npm install https://github.com/kmagiera/react-native-reanimated.git\#master

[avasuro]

@pistou

You can use commit hash instead of branch to achieve some sort of locking version:

yarn add https://github.com/kmagiera/react-native-reanimated.git#cd5a319eb6afd6efe5fb6750f7cef332fd17bdbd
// OR npm install https://github.com/kmagiera/react-native-reanimated.git#cd5a319eb6afd6efe5fb6750f7cef332fd17bdbd

[IntelliJAbhishek]

Changes has been merged in 1.3.0. You can close this issue.

[chrisparton1991]

Thanks for this! I was still getting the warning after upgrading, but clearing the transform cache fixed that:

npm start -- --reset-cache

[olamigokayphils]

Upgrading react-native-reanimated should resolve warnings