Warning: componentWillReceiveProps has been renamed

[marlon07021]

Using CreditCardInput imported as follow

import { CreditCardInput } from "react-native-credit-card-input";

is giving me this:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state
• Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: CCInput, CreditCardInput

[dee-one]

CCInput.js

 componentDidUpdate(prevProps) {
  const { status, value, onBecomeEmpty, onBecomeValid, field } = this.props;

  if (prevProps.value !== "" && value === "") onBecomeEmpty(field);
  if (prevProps.status !== "valid" && status === "valid") onBecomeValid(field);
}

CreditCardInput.js

componentDidUpdate(prevProps) {
    if (prevProps.focused !== this.props.focused) {
      this._focus(this.props.focused);
    }
  }