Skip to main content

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.
Legacy Widget SDK

To 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)
Step 1

Installation​

Install the SDK using npm or yarn:


_10
npm install @mxenabled/react-native-connect-widget-sdk

Step 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.
Step 3

Retrieve URL​

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

Step 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.


_34
import React from "react"
_34
import { ConnectWidget, Event } from "@mxenabled/react-native-connect-widget-sdk"
_34
_34
export function MyConnectScreen() {
_34
const handleEvent = (event: Event) => {
_34
switch (event.type) {
_34
case "mx/connect/memberConnected":
_34
console.log("OAuth requested with URL:", event.metadata)
_34
break
_34
_34
default:
_34
console.log("Received event:", event.type, event.metadata)
_34
}
_34
}
_34
_34
const [url, setUrl] = useState(null)
_34
_34
useEffect(() => {
_34
fetchConnectWidgetUrl().then((url) => {
_34
setUrl(url)
_34
})
_34
}, [])
_34
_34
return (
_34
<ConnectWidget
_34
url={url}
_34
onEvent={handleWidgetEvent}
_34
webViewProps={{
_34
style: { height: 500, width: 300 },
_34
// other WebView props...
_34
}}
_34
/>
_34
)
_34
}

Step 5

Configure your app to handle the client_redirect_url deep link that returns users to the widget after OAuth completion.

success

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

Next Steps​

Return to Integrate using MX's Connect Widget.

On this page