Bridge Connect React Native SDK

This tool is provided by Bridge Labs. Please always refer to our official documentation and website for proper implementation of our service.

The Bridge Connect React Native SDK provides an easy way to integrate Bridge's secure financial connection services into your React Native application.

Introduction

Bridge Connect | Official Docs

Features

• 🔒 Secure connections: Connect to financial institutions securely through Bridge's platform
• 🌐 Seamless modal interface: Clean UI for users to connect their financial accounts
• 🪝 React hooks API: Simple and intuitive hooks-based API
• 📱 React Native optimized: Built specifically for React Native applications

Compatibility

• React Native >= 0.60.0 (with auto-linking)
• Expo

Installation

# Using npm
npm install @bridge-do/connect-react-native

# Using yarn
yarn add @bridge-do/connect-react-native

# Using pnpm
pnpm add @bridge-do/connect-react-native

Dependencies

This package depends on react-native-webview. If you haven't installed it yet, you'll need to add it (You can omit this step if is already installed):

# Using npm
npm install react-native-webview

# Using yarn
yarn add react-native-webview

# Using pnpm
pnpm add react-native-webview

Quick Start

1. Wrap your app with BridgeConnectProvider

import { BridgeConnectProvider } from '@bridge-do/connect-react-native';

function App() {
  return (
    <BridgeConnectProvider applicationId="YOUR_BRIDGE_APPLICATION_ID">
      {/* Your app goes here */}
    </BridgeConnectProvider>
  );
}

2. Use the hook to connect accounts

import { useBridgeConnect } from '@bridge-do/connect-react-native';
import { Button, Text, View } from 'react-native';

function ConnectButton() {
  const { openConnect, connectData } = useBridgeConnect();

  return (
    <View>
      <Button title="Connect Your Bank" onPress={openConnect} />

      {connectData && (
        <Text>Connected! Session ID: {connectData.sessionId}</Text>
      )}
    </View>
  );
}

API Reference

BridgeConnectProvider

The main provider component that manages the connection flow.

Props

| Prop | Type | Required | Description | | --------------- | --------------- | -------- | ----------------------------------------------------- | | applicationId | string | Yes | Your Bridge application ID from your Bridge dashboard | | children | React.ReactNode | Yes | Child components |

useBridgeConnect()

A hook that provides access to the Bridge Connect functionality.

Returns

| Property | Type | Description | | -------------- | ------------------------------ | ---------------------------------------------- | | openConnect | () => void | Function to open the connection modal | | closeConnect | () => void | Function to close the connection modal | | connectData | BridgeConnectData | undefined | Connection data if a connection was successful |

TypeScript Support

This package is written in TypeScript and includes type definitions. Key types include:

BridgeConnectData

interface BridgeConnectData {
  sessionId: string;
  metadata: {
    institution: {
      id: string;
      name: string;
    };
    accounts: Array<{
      id: string;
      name: string;
      type: string;
      lastFour: string;
      balance: { current: number };
    }>;
  };
}

Examples

Complete Connection Flow

import React from 'react';
import { View, Button, Text, StyleSheet } from 'react-native';
import {
  BridgeConnectProvider,
  useBridgeConnect,
} from '@bridge-do/connect-react-native';

// Create a component that uses the hook
function ConnectComponent() {
  const { openConnect, connectData } = useBridgeConnect();

  return (
    <View style={styles.container}>
      <Button title="Connect Your Financial Account" onPress={openConnect} />

      {connectData && (
        <View style={styles.resultContainer}>
          <Text style={styles.heading}>Connection Successful!</Text>
          <Text>Connected to: {connectData.metadata.institution.name}</Text>
          <Text>Accounts: {connectData.metadata.accounts.length}</Text>

          {connectData.metadata.accounts.map((account) => (
            <View key={account.id} style={styles.accountItem}>
              <Text>
                {account.name} ({account.type})
              </Text>
              <Text>Last four: **** {account.lastFour}</Text>
              <Text>Balance: ${account.balance.current.toFixed(2)}</Text>
            </View>
          ))}
        </View>
      )}
    </View>
  );
}

// Main App component with the provider
export default function App() {
  return (
    <BridgeConnectProvider applicationId="YOUR_BRIDGE_APPLICATION_ID">
      <ConnectComponent />
    </BridgeConnectProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  resultContainer: {
    marginTop: 20,
    padding: 15,
    backgroundColor: '#f0f0f0',
    borderRadius: 8,
  },
  heading: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  accountItem: {
    marginTop: 10,
    padding: 10,
    backgroundColor: '#ffffff',
    borderRadius: 5,
  },
});

Handling Connection States

For a better user experience, you might want to handle different connection states:

function ConnectionFlow() {
  const { openConnect, connectData } = useBridgeConnect();
  const [isLoading, setIsLoading] = useState(false);

  const handleConnect = () => {
    setIsLoading(true);
    openConnect();
  };

  // When connectData changes, update loading state
  useEffect(() => {
    if (connectData) {
      setIsLoading(false);
      // You can also call your API here to save the connection data
    }
  }, [connectData]);

  return (
    <View>
      <Button
        title={isLoading ? 'Connecting...' : 'Connect Account'}
        onPress={handleConnect}
        disabled={isLoading}
      />
    </View>
  );
}

License

MIT

Made with ❤️ by Bridge Labs in 🇩🇴