Warning componentwillmount is Deprecated and will be Removed in the Next Major Version in React Native Solved

Currently React Native life cycle methods is in updating process and lots of up-gradation has been made in react life cycle hook by react developer team. Some of legacy component lifecycles tend to encourage unsafe coding practices and The React team has decided to deprecate some of the lifecycle methods with React 17.

Legacy lifecycle methods have too many potential pitfalls to be safely used for async rendering.

The lifecycle methods below will soon be deprecated.

1. componentWillMount
2. componentWillRecieveProps
3. componentWillUpdate

NOTE: The above lifecycle methods are categorized as unsafe in the 16.3 release. Deprecation warnings will be added to the legacy methods in the release after that. Finally, the legacy methods will be deprecated completely in React 17.

The three old lifecycle methods are going to be renamed and two additional methods will be introduced as well in latest version. Which is as follow :

1. UNSAFE_componentWillMount
2. UNSAFE_componentWillRecieveProps
3. UNSAFE_componentWillUpdate
4. getDerivedStateFromProps
5. getSnapshotBeforeUpdate

Solved Warning componentwillmount is Deprecated in React Native :

This warning message is a temporary message and will be removed soon with the new react native version but its very irritating so we can easily remove this error by using YellowBox component in our react native project. This component will handle all the warning messages shows inside the yellow box.

Step-1 : Import YellowBox component in your project.

import React, { Component } from 'react'; 
import { YellowBox } from 'react-native';

Step-2 : Now Inside your class constructor() block call the ignoreWarnings() function of YellowBox .

constructor(props) { 
   super(props);
 
   YellowBox.ignoreWarnings([
    'Warning: componentWillMount is deprecated',
    'Warning: componentWillReceiveProps is deprecated',
  ]);
 
 }

OR

constructor(props) { 
   super(props); 
   console.disableYellowBox = true;
 }

Step-3 : Save your project and rebuild you react native application.

Hope this will resolve you issues.