Nativebase: componentWillReceiveProps is deprecated

[sajaddp]

Hi,

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

Please update the following components: DrawerLayout, IconNB

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

Version:

react: 16.8.6
react-native: 0.60.3
native-base: 2.12.1

[IntelliJAbhishek]

+1

lots of warning in latest RN 60.x

[knap1930]

there is also

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.

Warning: componentWillReceiveProps is deprecated and will be removed in the next major version. Use static getDerivedStateFromProps instead.

[kukokp]

How to use in RN 0.60.3 ?
Any one please guide!!!

Without autolink!
however to add .
I need some guidance to implement .

[knap1930]

temporary solution is to add this to your index.js until they have a chance to update

import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings([
    'Warning: componentWillMount is deprecated',
    'Warning: componentWillUpdate is deprecated',
    'Warning: componentWillReceiveProps is deprecated',
]);

[IntelliJAbhishek]

How to use in RN 0.60.3 ?
Any one please guide!!!

Without autolink!
however to add .
I need some guidance to implement .

@kukokp we are getting lots of warning.

temporary solution is to add this to your index.js until they have a chance to update

import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings([
    'Warning: componentWillMount is deprecated',
    'Warning: componentWillUpdate is deprecated',
    'Warning: componentWillReceiveProps is deprecated',
]);

@knap1930 Its a bad idea

[kukokp]

@IN

How to use in RN 0.60.3 ?
Any one please guide!!!
Without autolink!
however to add .
I need some guidance to implement .

@kukokp we are getting lots of warning.

temporary solution is to add this to your index.js until they have a chance to update

import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings([
    'Warning: componentWillMount is deprecated',
    'Warning: componentWillUpdate is deprecated',
    'Warning: componentWillReceiveProps is deprecated',
]);

@knap1930 Its a bad idea

@IntelliJAbhishek Are you checked this.
I resolved migration issue.
But still facing some issue like GeoLocation.

[IntelliJAbhishek]

@kukokp geolocation replaced by https://github.com/react-native-community/react-native-geolocation

[radenaryayusuf]

anyone have fixed for this issue? also it's getting more Lag after i use RN 0.60.3 x NativeBase

[landorid]

I have this issue on the following stack:

"native-base": "^2.12.2",
"react": "16.8.6",
"react-native": "0.60.4",

Its really annoying, even i can hide from yellowbox, but the console is full of with these errors. @radenaryayusuf u think its cause performance issue?

[sankhadeeproy007]

Fixed in 2.13.0

[redcomethk]

I still have this issue on the following stack:

"native-base": "2.13.0",
"react": "16.8.6",
"react-native": "0.60.4",

I place the Icon in the Item and still see the componentWillUpdate is deprecated yellow warning.

[IntelliJAbhishek]

@sankhadeeproy007 looks like more items need to refactor. I m getting lots of warning, Please reopne this issue

Warning: componentWillReceiveProps is deprecated and will be removed in the next major version. Use static getDerivedStateFromProps instead.

Please update the following components: HTML, Styled(Body), Styled(Button), Styled(Header), Styled(Icon), Styled(IconNB), Styled(Left), Styled(ListItem), Styled(Right), Styled(Title), withAnimatable(View), Styled(Card), Styled(CardItem)

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

Please update the following components: IconNB,

[sajaddp]

@sankhadeeproy007 I still have this issue!

[sankhadeeproy007]

Please post a snippet which I can use to reproduce.

[IntelliJAbhishek]

@sankhadeeproy007 check my comment here. you will understand https://github.com/GeekyAnts/theme/commit/51fcc2334ca225bdcc7a4cb2efcacc7bcbf3e2ef

[sankhadeeproy007]

Yes, I see it now. Thanks, will get a fix ready soon 👍

[gitowiec]

I still get these issue
Thanks @knap1930 for the ignore trick
This is what I use from NativeBase:

import { Body, Container, Content, Footer, Header, Right, Root, Title } from 'native-base';
import { Icon } from 'native-base';
    import { Button, Text } from 'native-base';
import { Card, CardItem, Icon, Text, View } from 'native-base';

Info

System:
    OS: Linux 5.1 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-3610QM CPU @ 2.30GHz
    Memory: 436.35 MB / 15.52 GB
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.17.3 - /usr/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    Android SDK:
      API Levels: 23, 25, 26, 27, 28
      Build Tools: 23.0.1, 25.0.0, 26.0.2, 26.0.3, 27.0.3, 28.0.3
      System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-28 | Intel x86 Atom_64
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.4 => 0.60.4 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Deps

  "dependencies": {
    "mobx": "^5.13.0",
    "mobx-react": "^6.1.1",
    "native-base": "^2.13.4",
    "polished": "^3.4.1",
    "react": "16.8.6",
    "react-native": "0.60.4",
    "react-native-app-intro-slider": "^3.0.0",
    "react-native-home-pressed": "^1.1.4",
    "react-native-svg": "^9.5.3"
  },

[gitowiec]

This issue should be reopened

[vkts]

This issue should be reopened

This issue has been resurfacing for a year and I wasted hours of my life before I found and read this.

[IDS-Danhnc]

How to use in RN 0.60.3 ?
Any one please guide!!!
Without autolink!
however to add .
I need some guidance to implement .

@kukokp we are getting lots of warning.

temporary solution is to add this to your index.js until they have a chance to update

import { YellowBox } from 'react-native';

YellowBox.ignoreWarnings([
    'Warning: componentWillMount is deprecated',
    'Warning: componentWillUpdate is deprecated',
    'Warning: componentWillReceiveProps is deprecated',
]);

@knap1930 Its a bad idea

You can use as follow:
UNSAFE_componentWillReceiveProps(props) {...}

[NafisAbdullahKhan]

npx react-codemod rename-unsafe-lifecycles

[Muhammad-Wasi]

npx react-codemod rename-unsafe-lifecycles

still not working

[Makgora]

The question is not how to fix it localy but, will they fix that someday ?