chore(docs): React Native federated sign in and install updates

docs/src/components/InstallScripts.tsx

@@ -60,13 +60,16 @@ export const TerminalCommand = ({
 };
 
 interface InstallScriptsProps {
+  command?: string;
   framework?: Framework;
   component?: string;
 }
 
 export const InstallScripts = ({
-  framework,
+  // override framework default platform install command
+  command,
   component,
+  framework,
 }: InstallScriptsProps) => {
   const {
     query: { platform = 'react' },
@@ -86,13 +89,15 @@ export const InstallScripts = ({
       <Tabs.Panel value="npm">
         <TerminalCommand
           framework={framework}
+          command={command}
           component={component}
           packageManager="npm"
         />
       </Tabs.Panel>
       <Tabs.Panel value="yarn">
         <TerminalCommand
           framework={framework}
+          command={command}
           component={component}
           packageManager="yarn"
         />

docs/src/data/frameworks.ts

@@ -30,7 +30,7 @@ export const FRAMEWORK_DISPLAY_NAMES: Record<Framework, string> = {
 
 // React Native requires direct installation of dependencies with native modules
 export const REACT_NATIVE_DEPENDENCIES =
-  'react-native-safe-area-context amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill';
+  '@aws-amplify/react-native react-native-safe-area-context amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill';
 
 export const FRAMEWORK_INSTALL_SCRIPTS = {
   react: 'npm i @aws-amplify/ui-react aws-amplify',

docs/src/pages/[platform]/connected-components/authenticator/configuration/index.page.mdx

@@ -78,7 +78,7 @@ with the exception of `address`, `gender`, `locale`, `picture`, `updated_at`, an
   </Tabs.Panel>
 </Tabs.Container>
 
-<Fragment useCommonWebContent platforms={['web', 'flutter']}>
+<Fragment useCommonWebContent platforms={['web', 'flutter', 'react-native']}>
   {({ platform }) => import(`./socialProviders.${platform}.mdx`)}
 </Fragment>
 

docs/src/pages/[platform]/connected-components/authenticator/configuration/socialProviders.react-native.mdx

@@ -0,0 +1,13 @@
+import { Alert } from '@aws-amplify/ui-react';
+
+## Social Providers
+
+<Alert role="none" heading="Zero Configuration">
+
+The Authenticator reads directly from your [Amplify configuration](/connected-components/authenticator#step-1-configure-backend) `socialProviders` from `amplify pull`.
+
+</Alert>
+
+Social Provider authentication is supported out of the box, to configure: 
+- ensure the required dependencies have been installed in the [React Native Quick Start guide](../../connected-components/authenticator#step-2-install-dependencies)
+- configure your provider(s) by following the Amplify JS [Add Social Provider Sign-In guide](https://docs.amplify.aws/react-native/build-a-backend/auth/add-social-provider/)

docs/src/pages/[platform]/connected-components/authenticator/quick-start-install.react-native.mdx

@@ -1,3 +1,37 @@
+import { Example, ExampleCode } from '@/components/Example';
 import { InstallScripts } from '@/components/InstallScripts';
 
 <InstallScripts />
+
+If your project will support Federated Sign In using the React Native `Authenticator` the `@aws-amplify/rtn-web-browser` package is also required:
+
+<InstallScripts command="npm install @aws-amplify/rtn-web-browser" framework="react-native" />
+
+`@aws-amplify/react-native` and `@aws-amplify/rtn-web-browser` require a minimum iOS deployment target of `13.0`, open the _Podfile_ located in the _ios_ directory and update the `target` value:
+
+```diff
+- platform :ios, min_ios_version_supported
++ platform :ios, 13.0
+```
+
+Then install the iOS cocoapods, by running:
+
+<InstallScripts command="npx pod-install" framework="react-native" />
+
+The AWS SDK requires React Native applications to polyfill `crypto.getRandomValues` and `URL`. Import the [`react-native-get-random-values`](https://github.com/LinusU/react-native-get-random-values) and [`react-native-url-polyfill`](https://github.com/charpeni/react-native-url-polyfill) polyfills and them to the top of your application's root entry point (in most React Native apps this will be the top level `index.js`).
+
+<Example>
+<ExampleCode>
+```jsx
+// index.js
+import 'react-native-url-polyfill/auto';
+import 'react-native-get-random-values';
+
+import { AppRegistry } from 'react-native';
+import App from './App';
+import { name as appName } from './app.json';
+
+AppRegistry.registerComponent(appName, () => App);
+```
+</ExampleCode>
+</Example>

docs/src/pages/[platform]/getting-started/installation/dependencies.react-native.mdx

@@ -1,5 +1,5 @@
 import { Tabs } from '@aws-amplify/ui-react';
-import { InstallScripts } from '@/components/InstallScripts.tsx';
+import { InstallScripts, TerminalCommand } from '@/components/InstallScripts.tsx';
 import { Example, ExampleCode } from '@/components/Example';
 
 `@aws-amplify/ui-react-native` is compatible for usage with the React Native apps created using the [React Native CLI](https://github.com/react-native-community/cli) or [Expo](https://expo.dev/).
@@ -15,12 +15,22 @@ Install `@aws-amplify/ui-react-native` and its dependencies with [npm](https://w
 
 <InstallScripts framework="react-native" />
 
-For iOS, additionally run:
-```
-npx pod-install
+If your project will support Federated Sign In using the React Native `Authenticator` the `@aws-amplify/rtn-web-browser` package is also required:
+
+<InstallScripts command="npm install @aws-amplify/rtn-web-browser" framework="react-native" />
+
+`@aws-amplify/react-native` and `@aws-amplify/rtn-web-browser` require a minimum iOS deployment target of `13.0`, open the _Podfile_ located in the _ios_ directory and update the `target` value:
+
+```diff
+- platform :ios, min_ios_version_supported
++ platform :ios, 13.0
 ```
 
-> The AWS SDK requires React Native applications to polyfill `crypto.getRandomValues` and `URL`. Import the [`react-native-get-random-values`](https://github.com/LinusU/react-native-get-random-values) and [`react-native-url-polyfill`](https://github.com/charpeni/react-native-url-polyfill) polyfills and them to the top of your application's root entry point (in most React Native apps this will be the top level `index.js`).
+Then install the iOS cocoapods, by running:
+
+<InstallScripts command="npx pod-install" framework="react-native" />
+
+The AWS SDK requires React Native applications to polyfill `crypto.getRandomValues` and `URL`. Import the [`react-native-get-random-values`](https://github.com/LinusU/react-native-get-random-values) and [`react-native-url-polyfill`](https://github.com/charpeni/react-native-url-polyfill) polyfills and them to the top of your application's root entry point (in most React Native apps this will be the top level `index.js`).
 
 <Example>
 <ExampleCode>
@@ -43,17 +53,14 @@ AppRegistry.registerComponent(appName, () => App);
 
 Add `@aws-amplify/ui-react-native` and its dependencies using the [Expo CLI](https://expo.dev/tools#cli) to ensure installation of native module dependency versions compatible with your Expo app:
 
-<Example>
-<ExampleCode>
-```shell
-expo install @aws-amplify/ui-react-native aws-amplify react-native-safe-area-context @react-native-async-storage/async-storage @react-native-community/netinfo
-```
-</ExampleCode>
-</Example>
-
-</Tabs.Panel>
-</Tabs.Container>
-
+<br />
+<TerminalCommand command="npx expo install @aws-amplify/ui-react-native aws-amplify @aws-amplify/react-native react-native-safe-area-context @react-native-async-storage/async-storage @react-native-community/netinfo" />
+<br />
 
+If your project will support Federated Sign In using the React Native `Authenticator` the `@aws-amplify/rtn-web-browser` package is also required:
 
+<br />
+<TerminalCommand command="npx expo install @aws-amplify/rtn-web-browser" />
 
+</Tabs.Panel>
+</Tabs.Container>