Make withAuthenticator HOC configurable

[rlmartin]

This will allow for building custom SignIn, Loading, etc components but still leveraging the ease of withAuthenticator.

[codecov-io]

Codecov Report

Merging #110 into master will not change coverage.
The diff coverage is 100%.

@@           Coverage Diff           @@
##           master     #110   +/-   ##
=======================================
  Coverage   90.78%   90.78%           
=======================================
  Files          53       53           
  Lines        2517     2517           
  Branches      510      510           
=======================================
  Hits         2285     2285           
  Misses        221      221           
  Partials       11       11

Impacted Files	Coverage Δ
packages/aws-amplify-react/src/Auth/index.jsx	85% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fc07d3b...40e88da. Read the comment docs.

[mlabieniec]

@rlmartin the structure has changed a bit here, the core logic has moved into aws-amplify, can you have a look and see if you can merge these into the latest. Thanks.

[rlmartin]

@mlabieniec sure I'll take a look.

[rlmartin]

@mlabieniec in case you missed it, I updated this PR.

[powerful23]

@rlmartin could you provide us an example to show how does it work with the code? I am trying to pass a customized component into the array and expecting to just get that component rendered like:

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

export default class myComponent extends React.Component {
    render() {
        return (
            <Button title="Record" />
        );
    }
}

and using it in the hoc like:

withAuthenticator(App, false, [myComponent]);

But turns out to be an error saying:
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Thanks. Also really appreciate it if you could add it into the readme.

[rlmartin]

Hi @powerful23 - I believe that's an error from React Native. You need to pass in an instance of the class, not the class itself (i.e. <myComponent />). This is how the Authenticator class works: https://github.com/aws/aws-amplify/blob/master/packages/aws-amplify-react-native/src/Auth/Authenticator.js#L107

I'll update the README :)

[powerful23]

👍 Great job!

[github-actions]

This pull request has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.