# React Native App Integration
source: https://developer.mastercard.com/open-finance-us/documentation/connect/components/integration/react-native/index.md

This guide provides step-by-step instructions on how to integrate the Mastercard Data Connect Components into a React Native application. The purpose of this integration is to allow partners to:

* Search for financial institutions

* Handle authentication (Legacy \& OAuth)

* Retrieve user account details post-authentication

## Prerequisites {#prerequisites}

Before starting, ensure that you have the following installed:

* React Native environment (React Native CLI or Expo)

* Node.js and npm

* Axios (for API requests): `npm install axios`

* React Native WebView: `npm install react-native-webview`

* React Native In-App Browser (for OAuth flows): `npm install react-native-inappbrowser-reborn`

## Installing the Data Connect Components Web SDK {#installing-the-data-connect-components-web-sdk}

The Data Connect Components SDK provides reusable web components for handling institution login flows. This needs to be installed in your web application:

    npm install connect-components-web-sdk

For more details on the SDK installation and use see [Data Connect Components Web SDK](https://developer.mastercard.com/open-finance-us/documentation/connect/components/integration/ccwebsdk/index.md).

## React Native Screens Overview {#react-native-screens-overview}

Your React Native app will have the following key screens:

* **Institution Search** - Allows users to search for financial institutions.

* **WebView Integration** - Displays your web app which uses the Data Connect Components web SDK.

* **Account Retrieval** - Fetches and displays user accounts after authentication.

Each of these is explained in more detail below.

## Institution Search Flow {#institution-search-flow}

Steps to Implement:

1. Create a search input field where users can type the name of a financial institution.

2. Use the [Get Institutions](https://developer.mastercard.com/open-finance-us/documentation/financial-institution/index.md) API to fetch the list of institutions based on the search input.

3. Display the search results and allow the user to select an institution.

Code Example:

```javascript
import axios from 'axios';

const fetchInstitutions = async (searchText) => {
    const response = await axios.get(
        `/institution/v2/institutions?search=${searchText}`
    );
    return response.data;
};
```

## WebView Integration (Authentication Flow) {#webview-integration-authentication-flow}

Using a webview allows you to leverage your web integration of Data Connect Components:

* You will need to have completed your integration of [Data Connect Components Web SDK](https://developer.mastercard.com/open-finance-us/documentation/connect/components/integration/ccwebsdk/index.md) into your web application.

* Your React Native app then loads this web application via WebView to handle authentication.

```javascript
import { WebView } from 'react-native-webview';

<WebView
  source={{ uri: 'PARTNER_WEB_APP_CC_SDK_URL' }}  // your web app location here
  onMessage={handleWebViewMessages}
  javaScriptEnabled={true}
/>
```

Replace `PARTNER_WEB_APP_CC_SDK_URL` with the URL of your hosted web application which uses the Data Connect Components web SDK.

The `onMessage` prop listens for events from the WebView, such as authentication success or failure. You will need to implement code to handle the event messages from WebView (see below).

### Sending events from WebView to React Native {#sending-events-from-webview-to-react-native}

If the web application (where the Data Connect Components SDK is integrated) needs to send messages back to React Native, use the following approach:

    window.ReactNativeWebView?.postMessage(JSON.stringify(event));

The `ReactNativeWebView` object is automatically attached to the window when using `react-native-webview`, allowing seamless communication between WebView and React Native.

### Handling Messages from WebView {#handling-messages-from-webview}

```javascript
const handleWebViewMessages = (event) => {
  const message = JSON.parse(event.nativeEvent.data);

  switch (message.type) {
        case 'url': openSecureContainer(message.data); // Opens OAuth flow in secure browser
                    break;
        case '..': ...,
  }
};
```

### Opening Secure Container for OAuth Login {#opening-secure-container-for-oauth-login}

OAuth requires opening a secure browser to authenticate the user. We use the [react-native-inappbrowser-reborn](https://www.npmjs.com/package/react-native-inappbrowser-reborn) package for this.

```javascript
import InAppBrowser from 'react-native-inappbrowser-reborn';

const openSecureContainer = async (url) => {
    await InAppBrowser.isAvailable();
    const browserOptions = Platform.OS === 'ios' ? undefined : { forceCloseOnRedirection: false, showInRecents: true };
    await InAppBrowser.open(url, browserOptions);
};
```

See the [OAuth Usage](https://developer.mastercard.com/open-finance-us/documentation/connect/components/integration/ccwebsdk/index.md#oauth-usage) section of the web SDK documentation for details of how you can fetch the OAuth URL to open in a secure container.

## Account Retrieval (After Authentication) {#account-retrieval-after-authentication}

Steps to Implement:

1. After successful authentication, call [Get Customer Accounts](https://developer.mastercard.com/open-finance-us/documentation/products/manage/account-aggregation/index.md).

2. Display the retrieved accounts in the app.

3. Handle potential errors (e.g., session expiration, API failures).

For example:

```javascript
const fetchAccounts = async (customerID) => {
    const response = await axios.get(
        `/aggregation/v1/customers/${customerID}/accounts`
    );
    return response.data;
};
```