> ## Documentation Index
> Fetch the complete documentation index at: https://developer.moneyone.in/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native Integration

> Complete guide for integrating PFM service with React Native mobile applications

PFM Stack provides an Embedded React Native SDK that allows you to integrate a Personal Finance Management experience into your mobile application with minimal effort. With just a few lines of code, you can enable users to aggregate all their financial data in one place using the Account Aggregator framework.

## Step-by-Step Integration

### STEP 1: Initialization of SDK API

When a consumer wants to open PFM, your backend service must trigger the initialization of SDK API. Follow the [SDK Init API](/pfm/sdk-init-api) guide to integrate with the API in your backend server.

### STEP 2: Adding React Native SDK as dependency

Add the following dependency to your package.json. Run npm install to install the dependency.

```json theme={null}
equal-react-native-pfm-sdk: ^1.0.3
```

Install the peer dependency `react-native-webview` if not already in your project:

```bash theme={null}
npm install react-native-webview
```

For iOS, install CocoaPods:

```bash theme={null}
cd ios && pod install && cd ..
```

### Step 3: Launch PFM SDK

Once the Initialize API is invoked and you have session\_token, the PFM SDK can be opened from client using the below procedure.

In your Component (Or any of your React Native Component) use the below snippet to launch Equal SDK.

```tsx theme={null}
import React, { useState } from 'react';
import { Alert, Button, SafeAreaView, View } from 'react-native';
import { PFMWebView } from 'equal-react-native-pfm-sdk';
import type { EventResponse } from 'equal-react-native-pfm-sdk';

export default function App() {
  const [showPFM, setShowPFM] = useState(false);
  const [token, setToken] = useState<string | null>(null);

  const fetchTokenAndLaunch = async () => {
    fetch('https://<your_backend_api_that_calls_sdk_init_api_and_returns_token>', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify('<API Body as per your API contracts>')
    })
    .then(response => response.json())
    .then(data => {
      setToken(data.session_token);
      setShowPFM(true);
    })
    .catch(error => console.error('Error fetching token:', error));
  };

  const handleClosed = (data: EventResponse) => {
    console.log('PFM Closed:', data);
    setShowPFM(false);
  };

  const handleError = (data: EventResponse) => {
    console.error('PFM Error:', data);
    setShowPFM(false);
  };

  if (showPFM && token) {
    return (
      <PFMWebView
        token={token}
        env="sandbox"
        onClosed={handleClosed}
        onError={handleError}
      />
    );
  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View style={{ flex: 1, justifyContent: 'center', padding: 24 }}>
        <Button title="Launch PFM" onPress={fetchTokenAndLaunch} />
      </View>
    </SafeAreaView>
  );
}
```

## Important Code for integration

```tsx theme={null}
// Import the SDK
import { PFMWebView } from 'equal-react-native-pfm-sdk';
import type { EventResponse } from 'equal-react-native-pfm-sdk';

// Launch SDK with token and handle onClose & onError callbacks.
<PFMWebView
  token={token}           // session_token from SDK Init API
  env="sandbox"           // "sandbox" | "production"
  onClosed={(data) => {}} // onClosed(data: EventResponse) - Invoked when SDK is closed by user.
  onError={(data) => {}}  // onError(data: EventResponse) - Invoked when any error occurs.
/>
```

## SDK Parameters

| Parameter | Mandatory/Optional | Description                                                                                                  |
| --------- | ------------------ | ------------------------------------------------------------------------------------------------------------ |
| token     | Mandatory          | Generated and shared in response from Step 1 - Response of SDK Init API                                      |
| env       | optional           | sandbox is Default. Pass "production" to point to production - Ensure this variable is environment specific. |

## SDK Callback Methods

The PFMWebView component accepts the following callback methods:
**onError:** this is Invoked by SDK when

* There are failures in opening the UI
* Session Timeout.

**onClosed:** Invoked when the SDK is closed by the user.