diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.labels-and-text.flutter.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.labels-and-text.flutter.mdx index bfc55c9c103..76c62bd492d 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.labels-and-text.flutter.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.labels-and-text.flutter.mdx @@ -1,5 +1,3 @@ -## Labels & Text - Using a similar technique as [Internationalization (I18n)](#internationalization-i18n), you can customize the labels and text of the components. Instead of implementing full fledged localization through the use of arb file, the example below shows how customize _only_ the text within the "Sign In" button and the titles of the username, email and password fields: diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.labels-and-text.react-native.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.labels-and-text.react-native.mdx new file mode 100644 index 00000000000..d1a9f0941ea --- /dev/null +++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.labels-and-text.react-native.mdx @@ -0,0 +1,51 @@ +import { Expander, ExpanderItem, Text } from '@aws-amplify/ui-react'; + +Using the same techniques as [Internationalization (I18n)](#internationalization-i18n), you can customize the labels and text of the components: + + + Sign In} value="sign-in"> + ```js + I18n.putVocabulariesForLanguage('en', { + 'Sign In': 'Login', // Tab header + 'Sign in': 'Log in', // Button label + 'Sign in to your account': 'Welcome Back!', + Username: 'Enter your username', // Username label + Password: 'Enter your password', // Password label + 'Forgot your password?': 'Reset Password', + }); + ``` + + + Sign Up} value="sign-up"> + ```js + I18n.putVocabulariesForLanguage('en', { + 'Create Account': 'Register', // Link text + 'Create a new account': 'New User', // Header text + 'Confirm Password': 'Confirm your password', // Confirm Password label + Email: 'Enter your email', + 'Phone Number': 'Enter your phone number', + }); + ``` + + + Reset Password} value="reset-password"> + ```js + I18n.putVocabulariesForLanguage('en', { + 'Reset your password': 'Forgot your password?', + 'Enter your username': 'Username or Email', + 'Send code': 'Reset my password', + 'Back to Sign In': 'Back to Login', + }); + ``` + + + Setup TOTP} value="setup-totp"> + ```js + I18n.putVocabulariesForLanguage('en', { + Code: '2FA Code', + Confirm: 'Confirm 2FA', + 'Back to Sign In': 'Back to Login', + }); + ``` + + diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.labels-and-text.web.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.labels-and-text.web.mdx index 29454d773c0..c83c3b9317b 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.labels-and-text.web.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/customization.labels-and-text.web.mdx @@ -5,8 +5,6 @@ import { Expander, ExpanderItem, Text } from '@aws-amplify/ui-react'; import { LabelsAndTextDemo } from './LabelsAndTextDemo'; -## Labels & Text - Using the same techniques as [Internationalization (I18n)](#internationalization-i18n), you can customize the labels and text of the components: diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/index.page.mdx b/docs/src/pages/[platform]/connected-components/authenticator/customization/index.page.mdx index 61c931c8888..4f1ba91ee7c 100644 --- a/docs/src/pages/[platform]/connected-components/authenticator/customization/index.page.mdx +++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/index.page.mdx @@ -41,7 +41,9 @@ export async function getStaticProps() { {({ platform }) => import(`./customization.i18n.${platform}.mdx`)} - +## Labels & Text + + {({ platform }) => import(`./customization.labels-and-text.${platform}.mdx`)}