Last active
June 6, 2021 01:37
-
-
Save vgribok/72a481b3878ee075314fc824e286ba21 to your computer and use it in GitHub Desktop.
Showing how to customize AWS Amplify UI components for React Native using withAuthenticator() function, by 1) changing username to email address, 2) supplying a theme overriding Amplify orange, and 3) updating sign up form with removing phone number field and adding person's name field
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| AWS Amplify withAuthenticator() function for React Natvive has two arguments sets, and combining signUpConfig, a theme, | |
| and replacing username with email was hard to figure out, and no internet samples shown how to do that. | |
| Here's the example of how to all of the above. | |
| */ | |
| // @ts-ignore | |
| import { withAuthenticator, AmplifyTheme } from 'aws-amplify-react-native' | |
| import Local from "~/constants/Strings"; | |
| import cloneDeep from 'lodash/cloneDeep'; | |
| import { ColorValue, Platform } from "react-native"; | |
| export default function ScreenWithAuth(screen:any): JSX.Element { | |
| var theme = Platform.OS == "web" ? AmplifyTheme : getAndroidTheme(); | |
| var signUpConfig = { | |
| hiddenDefaults: ["phone_number"], // Hides the phone number field | |
| signUpFields: [ | |
| // Adds person's name field to the sign up screen | |
| { key: 'name', label: Local.authPersonNameFieldLabel, required: true, placeholder: Local.authPersonNameFieldLabel }, | |
| ] | |
| } | |
| // withAuthenticator() effectively has two overloaded variants: | |
| // 1. withAuthenticator(Comp: any, includeGreetings?: boolean, authenticatorComponents?: any[], federated?: any, theme?: any, signUpConfig?: object) | |
| // 2. withAuthenticator(component, {}) | |
| // Details: https://github.com/aws-amplify/amplify-js/blob/main/packages/aws-amplify-react-native/src/Auth/index.tsx#L82 | |
| return withAuthenticator(screen, { | |
| includeGreetings: false, | |
| signUpConfig, // Adds person's name field to the sign up screen, and hides the phone number field | |
| usernameAttributes: 'email' // Changes username field to email on all relevant auth UI screens | |
| }, [], null, theme) // Theme allows overriding default Amplify orange color schema | |
| } | |
| function getAndroidTheme() { | |
| // Theme object example is available | |
| // at https://github.com/aws-amplify/amplify-js/blob/main/packages/aws-amplify-react-native/src/AmplifyTheme.ts | |
| let theme = cloneDeep(AmplifyTheme) | |
| let buttonColor:ColorValue = "#2196f3" // Android button color | |
| let disabledButtonColor:ColorValue = "#92cdfc" | |
| theme.button.backgroundColor = buttonColor | |
| theme.button.paddingVertical=8 | |
| theme.button.paddingHorizontal=16 | |
| theme.button.alignSelf = "center" | |
| theme.buttonDisabled.backgroundColor = disabledButtonColor | |
| theme.buttonDisabled.paddingVertical=8 | |
| theme.buttonDisabled.paddingHorizontal=16 | |
| theme.buttonDisabled.alignSelf = "center" | |
| theme.sectionFooterLink.color = buttonColor | |
| theme.sectionFooterLinkDisabled.color = disabledButtonColor | |
| return theme; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment