Link React Native SDK

To get started with Plaid Link for React Native youʼll want to sign up for free API keys through the Plaid Dashboard.

• React Native Version 0.66.0 or higher

SDK versions are supported for two years; with each major SDK release, Plaid will stop officially supporting any previous SDK versions that are more than two years old. While these older versions are expected to continue to work without disruption, Plaid will not provide assistance with unsupported SDK versions.

In your react-native project directory, run:

1npm install --save react-native-plaid-link-sdk

Add Plaid to your project's Podfile as follows (likely located at ios/Podfile).

1pod 'Plaid', '~> <insert latest version>'

Autolinking should install the CocoaPods dependencies for iOS project. If it fails you can run

1cd ios && bundle install && bundle exec pod install

Requirements:

• Android 5.0 (API level 21) and above.
• Your compileSdkVersion must be 33.
• Android gradle plugin 4.x and above.

Autolinking should handle all of the Android setup.

• Register your Android package name in the Dashboard. This is required in order to connect to OAuth institutions (which includes most major banks).

Sample app

For a sample app that demonstrates a minimal integration with the React Native Plaid Link SDK, see the Tiny Quickstart (React Native).

Before you can open Link, you need to first create a link_token. A link_token can be configured for different Link flows and is used to control much of Link's behavior. To see how to create a new link_token, see the API Reference entry for /link/token/create. If your React Native application will be used on Android, the link/token/create call should include the android_package_name parameter. Each time you open Link, you will need to get a new link_token from your server.

The SDK provides two options for opening Link. The preferred approach is via the create and open methods. This approach minimizes user-facing latency by allowing you to pre-configure Link with create before actually rendering it with open. These functions require version 11.6 or later of the Plaid React Native SDK.

Alternatively, you can open Link with the legacy PlaidLink component, which configures Link and registers a callback in a single component.

1<TouchableOpacity
2  style={styles.button}
3  onPress={() => {
4      create({token: linkToken});
5      setDisabled(false);
6    }
7  }>
8  <Text style={styles.button}>Create Link</Text>
9</TouchableOpacity>

1<TouchableOpacity
2  disabled={disabled}
3  style={disabled ? styles.disabledButton : styles.button}
4  onPress={() => {
5    const openProps = {
6      onSuccess: (success: LinkSuccess) => {
7      console.log(success);
8      },
9      onExit: (linkExit: LinkExit) => {
10        console.log(exit);
11      };
12    open(openProps);
13    setDisabled(true);
14  }}>
15  <Text style={styles.button}>Open Link</Text>
16</TouchableOpacity>

1<PlaidLink
2  tokenConfig={{
3    token: '#GENERATED_LINK_TOKEN#',
4  }}
5  onSuccess={(success: LinkSuccess) => {
6    console.log(success);
7  }}
8  onExit={(exit: LinkExit) => {
9    console.log(exit);
10  }}
11>
12  <Text>Add Account</Text>
13</PlaidLink>

1const onSuccess = (success: LinkSuccess) => {
2  fetch('https://yourserver.com/exchange_public_token', {
3    method: 'POST',
4    headers: {
5      "Content-Type": "application/json",
6    },
7    body: JSON.Stringify({
8      publicToken: linkSuccess.publicToken,
9      accounts: linkSuccess.metadata.accounts,
10      institution: linkSuccess.metadata.institution,
11      linkSessionId: linkSuccess.metadata.linkSessionId,
12    }),
13  });
14};

1const onExit = (linkExit: LinkExit) => {
2  supportHandler.report({
3    error: linkExit.error,
4    institution: linkExit.metadata.institution,
5    linkSessionId: linkExit.metadata.linkSessionId,
6    requestId: linkExitlinkExit.metadata.requestId,
7    status: linkExit.metadata.status,
8  });
9};

The React Native Plaid module emits onEvent events throughout the account linking process. To receive these events use the usePlaidEmitter hook.

1usePlaidEmitter((event) => {
2  console.log(event);
3});

1submit({
2  "phone_number": "+14155550123"
3})

Using Plaid Link with an OAuth flow requires some additional setup instructions. For details, see the OAuth guide.

The latest version of the SDK is available from GitHub. New versions of the SDK are released frequently. Major releases occur annually. The Link SDK uses Semantic Versioning, ensuring that all non-major releases are non-breaking, backwards-compatible updates. We recommend you update regularly (at least once a quarter, and ideally once a month) to ensure the best Plaid Link experience in your application.

SDK versions are supported for two years; with each major SDK release, Plaid will stop officially supporting any previous SDK versions that are more than two years old. While these older versions are expected to continue to work without disruption, Plaid will not provide assistance with unsupported SDK versions.

• Version 11.x contains several breaking changes from previous major versions. For details, see the migration guide on GitHub.
• When upgrading from 9.x to 10.x or later, you should remove any invocation of useDeepLinkRedirector on iOS, as it has been removed from the SDK, since it is no longer required for handling Universal Links. You must make sure you are using a compatible version of React Native (0.66.0 or higher) and the Plaid iOS SDK (see the version compatibility chart on GitHub).
• The only difference between version 7.x and 8.x is that 8.x adds support for Xcode 14. No code changes are required to upgrade from 7.x to 8.x, although you must convert to an Xcode 14 toolchain.
• No code changes are required to upgrade from 8.x to 9.x, although you must make sure you are using a compatible version of the Plaid iOS SDK (4.1.0 or higher).