Nativebase: Components function warning every time

[yukwong1121]

Created a new react native project and install NativeBase, and call the components from native-base such Container, Text.

There are many warning message display in yellowbox, all related with "componentWillMount","componentWillUpdate","componentWillReceiveProps" in nativebase components. Warning message will alert in every time when I open those page relate with nativebase. Warning message as below:

_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: Container, DrawerLayout, DrawerView, Image, Text, TouchableOpacity, Transitioner, View, withCachedChildNavigation(DrawerScreen), withCachedChildNavigation(DrawerSidebar)

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

My react version info as below:

    "native-base": "^2.3.9",
    "react": "^16.3.0-alpha.1",
    "react-native": "0.54.0",
    "react-native-elements": "^1.0.0-beta2",
    "react-native-vector-icons": "^4.5.0",
    "react-navigation": "^1.4.0"

Thank You.

[RobertHeim]

NativeBase needs to update the used lifecycle methods, see RFC https://github.com/reactjs/rfcs/blob/master/text/0006-static-lifecycle-methods.md

[yukwong1121]

Thanks for reply.
I know NativeBase needs to update those method call and I try to renew all for them, however some component for example: Container, I can't find where is using componentWillMount under Container.
Or just need to wait for NativeBase official update?

[coffenbacher]

Hi @akhil-geekyants, heads up that I am still seeing the warnings when Container and Transitioner components are mounted even using your fork.

[havinhthai]

+1

[mnlbox]

+1

[SupriyaKalghatgi]

NativeBase 2.4.1 works fine with React 16.3.1 and React-Native 0.55.0

No fixes needed from NativeBase side. The reason because React 16.3.0-alpha.1 announced just the warning messages for deprecated lifecycle methods and not introduced its replacements.

React 16.3.1 introduced new aliases for these unsafe lifecycles namely, UNSAFE_componentWillMount, UNSAFE_componentWillReceiveProps and UNSAFE_componentWillUpdate.

https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

Very soon NativeBase will implement the new static lifecycle methods
Stay tuned!

[kamal0808]

@SupriyaKalghatgi Is there a way to hide the warnings? They cover the footer area, making it difficult to develop

[SupriyaKalghatgi]

@kamal0808 As i said earlier, you can upgrade versions of React and React Native to get a fix.

If you want to stick to these versions which gives you warnings, then may be you can do this console.disableYellowBox = true; anywhere in your application

[kamal0808]

@SupriyaKalghatgi I am using the latest versions of react and react native. However console.disableYellowBox = true; disabled them for now. Thanks!

[SupriyaKalghatgi]

If you are using latest of React and RN, then no need to have console.disableYellowBox = true;

[maartenvandillen]

@SupriyaKalghatgi current version is 16.4.1, warnings will be removed in version 17. See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html

[mnlbox]

@SupriyaKalghatgi Any news?

[SupriyaKalghatgi]

@mnlbox About?

[ppaul]

@SupriyaKalghatgi Any news?

discussed solutions worked for me; make sure you also removed from babel config