# React Native Applications
source: https://developer.mastercard.com/ob-accept-payments/documentation/developer-support/sdk/react-native-sdk/index.md

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

App to app authentication is supported in much the same way as with our native iOS and Android SDKs.

## 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. 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 the repository to your project {#step-1-add-the-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 to display the Connect experience. The `connectUrl` contains the generated url together with the query `sdkRedirect={redirectUrl}` that should be in format `{GENERATED_CONNECT_URL}?sdkRedirect={REDIRECT_URL}`. The Redirect URL redirects back to your mobile app after completing a FI's OAuth flow (universal link on iOS, app link on Android). This parameter and query are always required for proper SDK functionality. |
| `eventHandlers` (required) | A class implementing the `ConnectEventHandlers` interface.                                                                                                                                                                                                                                                                                                                                                                                                              |
| `redirectUrl` (optional)   | This parameter is not used for EU SDK flow and usage of that will not have any effect on the proper function of the flow. This parameter and query are always required for proper SDK functionality.                                                                                                                                                                                                                                                                    |

```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#?sdkRedirect=#UNIVERSAL_LINK_FOR_APP_TO_APP_AUTHENTICATION#'}
      eventHandlers={eventHandlers}
    />
  );
};
```

### 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](/documentation/developer-support/sdk/#Callback Events)for details on the events through their callback interface.

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

## App To App support {#app-to-app-support}

To provide the best app to app authentication experience for your customers, you should send a universal link URL in the `redirectUrl` parameter when using Connect. See [App To App Authentication](https://developer.mastercard.com/ob-accept-payments/documentation/developer-support/sdk/app-to-app-auth-best-practices/index.md) for more details.

Before installing the Connect React Native SDK for use with app to app authentication, complete the following:

* Create your domain's `redirectUrl` (iOS universal link, Android app link)
* Configuring your `redirectUrl`

### iOS: Create your domain's redirectUrl {#ios-create-your-domains-redirecturl}

For information on how to create a [Universal Link](https://developer.apple.com/ios/universal-links/) to be used as the `redirectUrl` in your application, see Apple's [Allowing apps and websites to link to your content](https://developer.apple.com/documentation/xcode/allowing-apps-and-websites-to-link-to-your-content) documentation.

For information on how to configure your server, see [supporting associated domains](https://developer.apple.com/documentation/xcode/supporting-associated-domains) in the Apple developer documentation.
Tip: To provide the best app to app authentication customer experience, you should use a universal link for `redirectUrl`.

We do not recommend using a deep link (custom URL scheme) for `redirectUrl` since deep links lack the security that Apple's Universal Links provide through the two-way association between your app and your website. A deep link will also trigger an alert on iOS devices which can add friction to the customer experience, requesting permission to redirect back to the Partner's app.

Any application can register custom URL schemes and there is no further validation from iOS. If multiple applications have registered the same custom URL scheme, a different application may be launched each time the URL is opened. To complete OAuth flows, it is important that your application is opened and not any other application that has registered the same URL scheme.

### Android: Create your domain's redirectUrl {#android-create-your-domains-redirecturl}

For information on how to create an [App Link](https://developer.android.com/training/app-links#android-app-links) as `redirectUrl` in your application, see [adding Android App Links](https://developer.android.com/studio/write/app-link-indexing) in the Android developer documentation.
Tip: To provide the best app to app authentication customer experience, you should use an app link for `redirectUrl`.

We do not recommend using a deep link (custom URL scheme) for `redirectUrl` since deep links lack the security that Android App Links provide through the two-way association between your app and your website.

Any application can register custom URL schemes and there is no further validation from Android. If multiple applications have registered the same custom URL scheme, a different application may be launched each time the URL is opened. To complete OAuth flows, it is important that your application is opened and not any other application that has registered the same URL scheme.

### Configuring your redirectUrl {#configuring-your-redirecturl}

To return control back to your application after a customer completes an FI's OAuth flow, you must specify a `redirectUrl` value. This URL is used to redirect back to your mobile app after completing an FI's OAuth flow (this should be a universal link on iOS or an app link on Android).

Here is an example of a universal link `redirectUrl`. In this example it is <https://yourdomain.com/mastercardConnect> within your code:

```html
<Connect
  connectUrl={'#GENERATED_CONNECT_URL#?sdkRedirect=https://yourdomain.com/mastercardConnect
'}
  eventHandlers={eventHandlers}
/>
```

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

We provide a sample project uses the Connect React Native SDK on Github: [ConnectReactNativeDemoApp](https://dev.azure.com/spiir/Delivery/_git/tshirt-demo-app)

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