Amplify-js: Amplify "add auth" throws warning regarding componentWillReceiveProps functions and ConfirmSignUp component

[SeanRenet]

Describe the bug

Code generated by "amplify add auth" + "amplify push" throws warning about legacy react-native code in amplify

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks 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://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.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: ConfirmSignUp
- node_modules/expo/build/environment/muteWarnings.fx.js:18:23 in warn
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5864:19 in printWarning
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5892:25 in lowPriorityWarning
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:6135:8 in ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:20377:6 in flushRenderPhaseStrictModeWarningsInDEV
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19606:41 in commitRootImpl
* [native code]:null in commitRootImpl
- node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:19590:4 in commitRoot
* [native code]:null in commitRoot
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18709:28 in runRootCallback
* [native code]:null in runRootCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5642:32 in runWithPriority$argument_1
- node_modules/scheduler/cjs/scheduler.development.js:643:23 in unstable_runWithPriority
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5638:22 in flushSyncCallbackQueueImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:5627:28 in flushSyncCallbackQueue
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:18556:30 in scheduleUpdateOnFiber
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:21822:15 in scheduleRootUpdate
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:23042:20 in ReactNativeRenderer.render
- node_modules/react-native/Libraries/ReactNative/renderApplication.js:52:52 in renderApplication
- node_modules/react-native/Libraries/ReactNative/AppRegistry.js:116:10 in runnables.appKey.run
- node_modules/react-native/Libraries/ReactNative/AppRegistry.js:197:26 in runApplication
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:436:47 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:26 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:384:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

To Reproduce

Steps to reproduce the behavior:

1. amplify configure
2. amplify init
3. amplify add auth
4. amplify push

1. //add the following code to App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { withAuthenticator } from 'aws-amplify-react-native'

import Amplify from '@aws-amplify/core'
import config from './src/aws-exports'
Amplify.configure(config)

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Text>Yo!</Text>
      </View>
    );
  }
}

export default withAuthenticator(App, { includeGreetings: true })

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

1. yarn start

Expected behavior

expo / react native project to start without error/warning

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

Mac OS Mojave 10.14.6
Xcode Simulator 10.3 (iOS 12.4 - iPhone X)
"aws-amplify": "^2.2.1",
"aws-amplify-react-native": "^2.2.3",
"expo": "^36.0.0",
"react": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
$ node -v
v13.3.0
$ npm -v
6.13.4
$ expo-cli -V
3.11.1

Smartphone (please complete the following information):

• PIxel 3
  
  
  
  • Android Version 10
  
  

Additional context

Need to update amplify auth components to comply with March 27, 2018 React White Paper entitled "Update on Async Rendering

[SeanRenet]

@kaustavghosh06 why did this get transferred? This is like the first walk-though in amplify and its broken.

[jordanranz]

The warning seems to be thrown from a component in the React Native component library:
import { withAuthenticator } from 'aws-amplify-react-native'

That library is owned by this repo, thus the reason for transfer.

We will look into a change that will get rid of this warning. Thanks for reporting.

[SeanRenet]

@jordanranz okay thank you. I thought it was being buried.

[SeanRenet]

Hi @jordanranz. Any word on a fix?

[schieble]

Hi Any news on the fix for this?

[jackblackCH]

Is this fix on a roadmap of aws?

[SeanRenet]

@jackblackCH I think Amplify is dead. No one answers the chat and all the repo errors are left unanswered

[dantasfiles]

The timeline on this is that Facebook plans to kill the componentWillReceiveProps lifecycle method in React 17 (hence the warning we see), but will keep the equivalent UNSAFE_componentWillReceiveProps indefinitely.

So if the AWS team doesn't have resources at the moment to rewrite the ConfirmSignup component, they should be able to rename the method to UNSAFE_componentWillReceiveProps to get rid of the warning.

[kimfucious]

I've found if you move away from withAuthenticator and just use Authenticator, this warning goes away. For what that's worth, I'm not sure. ;)

[ataravati]

@jordanranz Any updates on this? This is still not working.

[tslocke]

Switching to <Authenticator> instead of withAuthenticator did not remove the warning in my case.