Skip to main content
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.
LEGACY WIDGET SDKTo refer to the previous React Native SDK, see the legacy documentation.

​
Prerequisites

Before integrating the SDK, ensure you have:
  • An account on the Client Dashboard
  • A React Native application (iOS or Android)
1

Installation

Install the SDK using npm or yarn:
npm install @mxenabled/react-native-connect-widget-sdk
2

Backend Setup

Create a backend endpoint that calls the Platform API to generate widget URLs 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.
3

Retrieve URL

Call your backend endpoint from your React Native app to retrieve the widget URL.
4

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.
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.
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...
      }}
    />
  )
}
5

Deep Link Configuration

Configure your app to handle the client_redirect_url deep link that returns users to the widget after OAuth completion.
SUCCESSYou’ve embedded the widget into your react native app using the React Native SDK.

​
Next Steps

Return to Integrate using MX’s Connect Widget.