> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mx.com/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native SDK

Embed the Connect Widget into your react native app using the React Native SDK.

This SDK has these benefits:

* OAuth redirects are opened within the app, reducing the likelihood of user dropoff compared to previously complex workflows and UX.
* Simplified integration compared to the previous React Native SDK or embedding the widget directly via a WebView.

<Note>
  **LEGACY WIDGET SDK**

  To refer to the previous React Native SDK, see the [legacy documentation](/other/legacy-connectivity-guides/react-native-legacy-sdk).
</Note>

## Prerequisites

Before integrating the SDK, ensure you have:

* An account on the [Client Dashboard](https://dashboard.mx.com/sign_in)
* A React Native application (iOS or Android)

<Steps>
  <Step title="Installation">
    Install the SDK using npm or yarn:

    <Tabs>
      <Tab title="npm">
        ```bash theme={null}
        npm install @mxenabled/react-native-connect-widget-sdk
        ```
      </Tab>

      <Tab title="yarn">
        ```bash theme={null}
        yarn add @mxenabled/react-native-connect-widget-sdk
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Backend Setup">
    Create a backend endpoint that calls the Platform API to [generate widget URLs](/api-reference/platform-api/reference/widgets) with the required parameters for a mobile webview integration:

    * `client_redirect_url`: Deep link URL that returns users to your app (for example, `yourappscheme://connect`).
    * `is_mobile_webview`: Must be set to `true` for mobile integrations.
    * `widget_type`: Set to `connect_widget`.
  </Step>

  <Step title="Retrieve URL">
    Call your backend endpoint from your React Native app to retrieve the widget URL.
  </Step>

  <Step title="Render Component">
    Import and render the `ConnectWidget` component with the widget URL and event callbacks.

    These props are required:

    * `url` (type: `string`): The generated Connect Widget URL. This URL will be loaded in the underlying WebView component.
    * `onEvent` (type: `(event: Event) => void`): `event` contains the event object emitted by the widget. For a complete list of events you must handle, see [Widget Events](/connect/widget-events).

    Additionally, you can customize the WebView's behavior and styling with `webViewProps` (type: `WebViewProps`). By default, the WebView will be styled with `{ height: "100%", width: "100%" }` if no `webViewProps.style` is provided.

    ```javascript theme={null}
    import React from "react"
    import { ConnectWidget, Event } from "@mxenabled/react-native-connect-widget-sdk"

    export function MyConnectScreen() {
      const handleEvent = (event: Event) => {
        switch (event.type) {
          case "mx/connect/memberConnected":
            console.log("OAuth requested with URL:", event.metadata)
            break

          default:
            console.log("Received event:", event.type, event.metadata)
        }
      }

      const [url, setUrl] = useState(null)

      useEffect(() => {
          fetchConnectWidgetUrl().then((url) => {
            setUrl(url)
          })
      }, [])

      return (
        <ConnectWidget
          url={url}
          onEvent={handleWidgetEvent}
          webViewProps={{
            style: { height: 500, width: 300 },
            // other WebView props...
          }}
        />
      )
    }
    ```
  </Step>

  <Step title="Deep Link Configuration">
    Configure your app to handle the `client_redirect_url` deep link that returns users to the widget after OAuth completion.

    <Check>
      **SUCCESS**

      You've embedded the widget into your react native app using the React Native SDK.
    </Check>

    ## Next Steps

    Return to [Integrate using MX's Connect Widget](/products/connectivity/overview/connectivity-integration-guides/connect-widget-flow).
  </Step>
</Steps>