feat(aws-amplify-react-native): Customise authenticator wrapper compo…

…nent (#5375)

* feat(aws-amplify-react-native): enable authenticator wrapper component customization

Co-authored-by: Ashish Nanda <ashish.nanda.5591@gmail.com>

packages/aws-amplify-react-native/src/AmplifyUI.js

@@ -22,6 +22,7 @@ import {
 	TouchableOpacity,
 	TouchableWithoutFeedback,
 	View,
+	SafeAreaView,
 } from 'react-native';
 import { I18n } from 'aws-amplify';
 import AmplifyTheme, {
@@ -33,6 +34,11 @@ import { Icon } from 'react-native-elements';
 import countryDialCodes from './CountryDialCodes';
 import TEST_ID from './AmplifyTestIDs';
 
+export const Container = props => {
+	const theme = props.theme || AmplifyTheme;
+	return <SafeAreaView style={theme.container}>{props.children}</SafeAreaView>;
+};
+
 export const FormField = props => {
 	const theme = props.theme || AmplifyTheme;
 	return (

packages/aws-amplify-react-native/src/Auth/Authenticator.js

@@ -12,10 +12,10 @@
  */
 
 import React from 'react';
-import { SafeAreaView } from 'react-native';
 import { Auth, Analytics, Logger, Hub, JS } from 'aws-amplify';
 import AmplifyTheme from '../AmplifyTheme';
 import AmplifyMessageMap from '../AmplifyMessageMap';
+import { Container } from '../AmplifyUI';
 import Loading from './Loading';
 import SignIn from './SignIn';
 import ConfirmSignIn from './ConfirmSignIn';
@@ -28,6 +28,10 @@ import Greetings from './Greetings';
 
 const logger = new Logger('Authenticator');
 
+const EmptyContainer = ({ children }) => (
+	<React.Fragment>{children}</React.Fragment>
+);
+
 class AuthDecorator {
 	constructor(onStateChange) {
 		this.onStateChange = onStateChange;
@@ -154,6 +158,13 @@ export default class Authenticator extends React.Component {
 		const { authState, authData } = this.state;
 		const theme = this.props.theme || AmplifyTheme;
 		const messageMap = this.props.errorMessage || AmplifyMessageMap;
+		// If container prop is undefined, default to AWS Amplify UI Container (SafeAreaView)
+		// otherwise if truthy, use the supplied render prop
+		// otherwise if falsey, use EmptyContainer
+		const ContainerWrapper =
+			this.props.container === undefined
+				? Container
+				: this.props.container || EmptyContainer;
 
 		const { hideDefault, signUpConfig, usernameAttributes } = this.props;
 		const props_children = this.props.children || [];
@@ -182,6 +193,6 @@ export default class Authenticator extends React.Component {
 					usernameAttributes,
 				});
 			});
-		return <SafeAreaView style={theme.container}>{children}</SafeAreaView>;
+		return <ContainerWrapper theme={theme}>{children}</ContainerWrapper>;
 	}
 }