# React Native SDK
source: https://developer.mastercard.com/open-finance-au/documentation/connect/integrating-with-connect/react-native-sdk/index.md

If you are creating cross platform mobile app, we recommend using our React Native SDK.

## React Native SDK {#react-native-sdk}

The Connect React Native SDK provides an easy way for you to integrate Mastercard Open Finance Connect into your React Native application.

#### Compatibility {#compatibility}

The Connect React Native SDK supports the following Android and iOS versions:

* Android: Android 5.0 (Lollipop) or later, Android SDK level 21 or later.
* iOS: iOS 11 or later.

Note: The `redirectUrl` property, supporting universal links on iOS, app links on Android, and deeplinks, is available from Connect React Native SDK version 2.0.0 onward (we recommend using the most recent available version of the SDK). For more information see our [Github repository](https://github.com/Mastercard/connect-react-native-sdk).

### Install the Connect React Native SDK {#install-the-connect-react-native-sdk}

### Dependencies {#dependencies}

The Connect React Native SDK has the following `peerDependencies`:

* [react-native-inappbrowser-reborn](https://www.npmjs.com/package/react-native-inappbrowser-reborn) \>= 3.6
* [react-native-webview](https://www.npmjs.com/package/react-native-webview) \>= 11
* [react](https://www.npmjs.com/package/react) \>= 16.13
* [react-native](https://www.npmjs.com/package/react-native) \>= 0.63

### Step 1: Add repository to your project {#step-1-add-repository-to-your-project}

If your application doesn't use `react-native-inappbrowser-reborn` and `react-native-webview` as dependencies, you can install them using the following:

* [react-native-inappbrowser-reborn](https://github.com/proyecto26/react-native-inappbrowser)
* [react-native-webview](https://github.com/react-native-webview/react-native-webview)

<br />

The Connect React Native SDK has been tested on `react-native-inappbrowser-reborn` version 3.7.0 and `react-native-webview` version 13.6.4.

### Step 2: Add Connect React Native SDK {#step-2-add-connect-react-native-sdk}

The easiest way to install the SDK is to use npm or yarn:

* npm: `npm install connect-react-native-sdk`
* yarn: `yarn add connect-react-native-sdk`

<br />

On iOS, CocoaPods needs this additional step: `$ cd ios && pod install && cd ..`
Tip: You can view the SDK source code on [Github](https://github.com/Mastercard/connect-react-native-sdk). Note: The Connect React Native SDK only supports React Native versions above 0.64. Linking the package manually is not required as it uses [Autolinking](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md).

### Step 3: Update Android application settings {#step-3-update-android-application-settings}

The Connect React Native SDK requires internet access to connect with our servers, so you need to add internet permissions to the `AndroidManifest.xml` file:

```xml
<uses-permission android:name="android.permission.INTERNET">
```

### Usage {#usage}

#### Parameters {#parameters}

|         Parameter          |                                   Description                                   |
|----------------------------|---------------------------------------------------------------------------------|
| `connectUrl` (required)    | The SDK loads the Connect URL provided in order to show the Connect experience. |
| `eventHandlers` (required) | A class implementing the `ConnectEventHandlers` interface.                      |

See the [Generate Connect URL](https://developer.mastercard.com/open-finance-au/documentation/connect/generate-2-connect-url-apis/index.md) section for details of how to generate a Connect URL for the `connectUrl` parameter.

```javascript
import {
  Connect,
  ConnectEventHandlers,
} from 'connect-react-native-sdk';

const MyConnectComponent = () => {
  const eventHandlers: ConnectEventHandlers = {
    onDone: (event: ConnectDoneEvent) => {},
    onCancel: (event: ConnectCancelEvent) => {},
    onError: (event: ConnectErrorEvent) => {},
    onRoute: (event: ConnectRouteEvent) => {},
    onUser: (event: any) => {},
    onLoad: () => {},
  };
  return (
    <Connect
      connectUrl={'#GENERATED_CONNECT_URL#'}
      eventHandlers={eventHandlers}
      redirectUrl={'#UNIVERSAL_LINK_FOR_APP_TO_APP_AUTHENTICATION#'}
    />
  );
};
```

### Event Handler Interface {#event-handler-interface}

Throughout the Connect flow, events about the state of the web application are sent as JSON objects to the `eventHandlers` prop.
Note: The `onUser` event handler will not return anything unless you are specifically targeting Connect,

```javascript
export interface ConnectEventHandlers {
  onDone: (event: ConnectDoneEvent) => void;
  onCancel: (event: ConnectCancelEvent) => void;
  onError: (event: ConnectErrorEvent) => void;
  onRoute?: (event: ConnectRouteEvent) => void;
  onUser?: (event: any) => void;
  onLoad?: () => void;
}
```

#### Callback Events {#callback-events}

See [here](https://developer.mastercard.com/open-finance-au/documentation/connect/integrating-with-connect/index.md#callback-events) for details on the events via their callback interface.

**Note** : The `onDone`, `onError`, `onRoute`, and `onUser` callback functions will have a **JSONObject** parameter that contains data about the event.

## Android: Working Without redirectUrl {#android-working-without-redirecturl}

If your Android application does not pass `redirectUrl`, additional configuration is required in order to support OAuth redirection and deep linking back to your application.


Tip: In order to have the best authentication experience, we recommend specifying a universal or app link as `redirectUrl` for iOS and Android platforms. If however this is not possible, the following additional configuration is required with Android, due to behavior changes introduced in Android 15. This ensures the Connect flow can redirect securely back to your application after authentication. On iOS, the existing URL scheme handling will be used. To enable this, you must ensure you are using version 2.0.5 or later of the Data Connect React Native SDK, then configure an intent filter in your Android app's **AndroidManifest.xml** file. Inside the `<activity>` that handles app launches (usually `MainActivity`), add the intent filter as follows:

<br />

```xml
<manifest
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <application>
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter
                android:autoVerify="true"
                tools:ignore="AppLinkUrlError">
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="connect" />
                <data android:host="maob" />
                <data android:path="/redirect" />
            </intent-filter>
          </activity>
    </application>
</manifest>
```

Warning: Do not change the scheme, host, or path unless explicitly instructed. Ensure this intent filter is added only once.

## Sample React Native App {#sample-react-native-app}

We provide a sample project uses the Connect React Native SDK on Github: [ConnectReactNativeDemoApp](https://github.com/Mastercard/connect-react-native-sdk/tree/master/ConnectReactNativeDemoApp)

Ensure that you have the necessary setup for React Native version 0.72 to successfully run and explore this demo app.

## Connect React Native SDK Migration Guide {#connect-react-native-sdk-migration-guide}

This migration guide provides step by step instructions for migrating from Connect React-Native SDK version 1.x to version 2.x. Follow the outlined changes carefully to ensure a smooth transition.

### Step 1: Update your installation {#step-1-update-your-installation}

The first step is to make sure you install the new version of the SDK. If you were previously using npm then you will need to update your npm command as shown. You can also use yarn from v2.x onward.

**v1.x**

    npm install @finicity/connect-react-native-sdk

**v2.x**

* npm: `npm install connect-react-native-sdk`
* yarn: `yarn add connect-react-native-sdk`

<br />

On iOS, CocoaPods needs this additional step: `$ cd ios && pod install && cd ..`

### Step 2: Update your code {#step-2-update-your-code}

You will need to update your code where you import the SDK and use the components as follows.

**v1.x**

With v1.x, you needed to import `FinicityConnect` and `ConnectEventHandlers` from `@finicity/connect-react-native-sdk`, and your return function could define the `linkingUri` property:

```javascript
import {
  FinicityConnect,
  ConnectEventHandlers,
} from '@finicity/connect-react-native-sdk';

const MyConnectComponent = () => {
  const eventHandlers: ConnectEventHandlers = {
    onDone: (event: ConnectDoneEvent) => {},
    onCancel: (event: ConnectCancelEvent) => {},
    onError: (event: ConnectErrorEvent) => {},
    onRoute: (event: ConnectRouteEvent) => {},
    onUser: (event: any) => {},
    onLoad: () => {},
  };
  return (
    <FinicityConnect
      connectUrl={'#GENERATED_CONNECT_URL#'}
      eventHandlers={eventHandlers}
      linkingUri={'#UNIVERSAL_LINK#'}
    />
  );
};
```

**v2.x**

With v2.x, you need to import `Connect` and `ConnectEventHandlers` from `connect-react-native`, and your return code will need to be updated to use `redirectUrl` instead of `linkingUri`, as shown below:

```javascript
import {
  Connect,
  ConnectEventHandlers,
} from 'connect-react-native-sdk';

const MyConnectComponent = () => {
  const eventHandlers: ConnectEventHandlers = {
    onDone: (event: ConnectDoneEvent) => {},
    onCancel: (event: ConnectCancelEvent) => {},
    onError: (event: ConnectErrorEvent) => {},
    onRoute: (event: ConnectRouteEvent) => {},
    onUser: (event: any) => {},
    onLoad: () => {},
  };
  return (
    <Connect
      connectUrl={'#GENERATED_CONNECT_URL#'}
      eventHandlers={eventHandlers}
      redirectUrl={'#UNIVERSAL_LINK_FOR_APP_TO_APP_AUTHENTICATION#'}
    />
  );
};
```