{"id":15199,"library":"react-native-plaid-link-sdk","title":"Plaid React Native SDK","description":"The `react-native-plaid-link-sdk` is the official client-side SDK for integrating Plaid Link into React Native applications, enabling users to securely connect their financial accounts to Plaid's services. As of version 12.8.0, it provides a programmatic API for initializing and opening the Link flow, including an optional preloading feature (introduced in v11.6.0) designed to reduce latency for users. The SDK also offers a declarative `PlaidLink` component and robust callbacks for managing Link success and exit events. It handles platform-specific integrations for iOS (via CocoaPods) and Android (via Gradle). Plaid actively maintains this SDK, with major versions frequently introducing updates to the Link flow or API integration patterns, ensuring compatibility with the latest Plaid Link features and security standards. Developers should consult the official documentation for specific version-dependent integration details.","status":"active","version":"12.8.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","react-native","Plaid","typescript"],"install":[{"cmd":"npm install react-native-plaid-link-sdk","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-plaid-link-sdk","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-plaid-link-sdk","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for React Native components and hooks.","package":"react","optional":false},{"reason":"Core platform for React Native SDK functionality.","package":"react-native","optional":false}],"imports":[{"note":"The primary function to open the Plaid Link flow. Modern React Native applications typically use ESM imports.","wrong":"const { open } = require('react-native-plaid-link-sdk');","symbol":"open","correct":"import { open } from 'react-native-plaid-link-sdk';"},{"note":"Introduced in v11.6.0, this function preloads Plaid Link for improved user experience. It should be called before `open`.","wrong":"const { create } = require('react-native-plaid-link-sdk');","symbol":"create","correct":"import { create } from 'react-native-plaid-link-sdk';"},{"note":"A functional component for declarative integration, though the `create` and `open` functions are the recommended approach for versions >=11.6.0.","wrong":"import PlaidLink from 'react-native-plaid-link-sdk';","symbol":"PlaidLink","correct":"import { PlaidLink } from 'react-native-plaid-link-sdk';"},{"note":"TypeScript types for the callback parameters of the `open` function. Use `import type` for type-only imports.","symbol":"LinkSuccess, LinkExit","correct":"import type { LinkSuccess, LinkExit } from 'react-native-plaid-link-sdk';"}],"quickstart":{"code":"import React, { useEffect, useState } from 'react';\nimport { Button, View, Text, Platform, Alert } from 'react-native';\nimport {\n  open,\n  create,\n  dismissLink,\n  LinkSuccess,\n  LinkExit,\n  LinkTokenConfiguration,\n  LinkOpenProps,\n  LinkIOSPresentationStyle,\n  LinkLogLevel,\n} from 'react-native-plaid-link-sdk';\n\n// IMPORTANT: In a real application, 'YOUR_GENERATED_PLAID_LINK_TOKEN'\n// must be fetched from your backend server. This token is short-lived.\n// Refer to Plaid's /link/token/create documentation.\nconst GENERATED_LINK_TOKEN = 'YOUR_GENERATED_PLAID_LINK_TOKEN';\n\nconst PlaidLinkIntegration = () => {\n  const [linkToken, setLinkToken] = useState<string | null>(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    // Simulate fetching a link token from your backend.\n    // Replace this with an actual API call to your server that generates the token.\n    const fetchLinkToken = async () => {\n      try {\n        // Example (replace with your actual backend endpoint):\n        // const response = await fetch('https://your-backend.com/create_plaid_link_token');\n        // const data = await response.json();\n        // setLinkToken(data.link_token);\n\n        if (GENERATED_LINK_TOKEN !== 'YOUR_GENERATED_PLAID_LINK_TOKEN') {\n          setLinkToken(GENERATED_LINK_TOKEN);\n        } else {\n          Alert.alert(\n            'Missing Link Token',\n            \"Please replace 'YOUR_GENERATED_PLAID_LINK_TOKEN' with a valid token from your backend. Link will not open without it.\"\n          );\n        }\n      } catch (error) {\n        console.error('Failed to fetch link token:', error);\n        Alert.alert('Error', 'Could not fetch Plaid Link token.');\n      }\n      setLoading(false);\n    };\n    fetchLinkToken();\n  }, []);\n\n  useEffect(() => {\n    if (linkToken) {\n      // For SDK versions >= 11.6.0, it's recommended to preload Link.\n      const tokenConfiguration: LinkTokenConfiguration = {\n        token: linkToken,\n        noLoadingState: false, // Set to true to hide the native activity indicator\n      };\n      create(tokenConfiguration);\n    }\n  }, [linkToken]);\n\n  const handleOpenLink = () => {\n    if (!linkToken) {\n      Alert.alert('Error', 'Plaid Link token is not available yet.');\n      return;\n    }\n\n    const openProps: LinkOpenProps = {\n      onSuccess: (success: LinkSuccess) => {\n        console.log('Plaid Link Success:', success);\n        // Send success.public_token to your backend for exchange with an access_token\n        Alert.alert('Link Success', `Account linked! Public Token: ${success.public_token}`);\n      },\n      onExit: (linkExit: LinkExit) => {\n        console.log('Plaid Link Exit:', linkExit);\n        if (linkExit.error) {\n          console.error('Plaid Link Error:', linkExit.error);\n          Alert.alert('Link Exit Error', `Code: ${linkExit.error.error_code}, Message: ${linkExit.error.display_message}`);\n        }\n        dismissLink(); // Ensure Link view is dismissed, especially on iOS.\n      },\n      iOSPresentationStyle: LinkIOSPresentationStyle.MODAL, // Or FULL_SCREEEN\n      logLevel: LinkLogLevel.ERROR,\n    };\n    open(openProps);\n  };\n\n  if (loading) {\n    return (\n      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n        <Text>Loading Plaid Link Token...</Text>\n      </View>\n    );\n  }\n\n  return (\n    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n      <Button\n        title=\"Open Plaid Link\"\n        onPress={handleOpenLink}\n        disabled={!linkToken}\n      />\n      {!linkToken && (\n        <Text style={{ marginTop: 10, color: 'red' }}>\n          Please provide a valid Plaid Link token.\n        </Text>\n      )}\n    </View>\n  );\n};\n\nexport default PlaidLinkIntegration;","lang":"typescript","description":"This quickstart demonstrates the recommended flow for integrating Plaid Link into a React Native application using the `create` (for preloading) and `open` functions. It includes state management for the `link_token`, essential callbacks for success and exit events, and handles platform-specific configurations like iOS presentation styles."},"warnings":[{"fix":"Implement the `create(LinkTokenConfiguration)` function with your `link_token` as soon as possible, and then call `open(LinkOpenProps)` when the user is ready to engage with Link. Maximize the delay between `create` and `open` for optimal latency reduction.","message":"Starting with v11.6.0, the recommended integration pattern shifted to using `create()` for preloading the Link experience, followed by `open()` to launch it. Previous versions typically relied solely on `open()` or the `PlaidLink` component directly without a distinct preloading step. Applications upgrading from versions older than 11.6.0 must adapt to this new `create` then `open` flow.","severity":"breaking","affected_versions":">=11.6.0"},{"fix":"Update your `android/app/build.gradle` file to set `compileSdkVersion 33`.","message":"For Android, your project's `compileSdkVersion` must be `33` to ensure compatibility and proper functioning of the Plaid React Native SDK. Mismatched SDK versions can lead to build failures or runtime issues.","severity":"gotcha","affected_versions":">=10.0.0"},{"fix":"Navigate to your Plaid Dashboard (dashboard.plaid.com/developers/api), go to 'Team Settings' -> 'API' and add your Android package name under 'Android Package Names'.","message":"When developing for Android, you must register your application's Android package name (e.g., `com.yourcompany.yourapp`) in the Plaid Dashboard. Failure to do so will prevent the successful connection to OAuth institutions, which include most major banks.","severity":"gotcha","affected_versions":">=10.0.0"},{"fix":"Ensure your React Native application fetches a fresh `link_token` from your secure backend before attempting to initialize or open Plaid Link.","message":"The `link_token` required by the SDK is a short-lived, single-use token that must be generated on your backend server using the `/link/token/create` endpoint of the Plaid API. It should never be generated client-side or hardcoded.","severity":"gotcha","affected_versions":">=10.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Ensure your backend generates a new `link_token` for each Plaid Link session using the `/link/token/create` endpoint and that your React Native app is fetching this fresh token before calling `create` or `open`.","cause":"The provided `link_token` is expired, malformed, or has already been used.","error":"Plaid Link initialization failed: Invalid link_token"},{"fix":"Navigate to your iOS project directory (`cd ios`) and manually run `bundle install && bundle exec pod install` to install dependencies.","cause":"Automatic linking of iOS dependencies via CocoaPods failed after `npm install`.","error":"Error: Failed to install CocoaPods dependencies"},{"fix":"Log in to your Plaid Dashboard, navigate to 'Team Settings' -> 'API' and add your app's Android package name (e.g., `com.yourcompany.yourapp`) to the 'Android Package Names' list.","cause":"The Android application's package name is not registered in the Plaid Dashboard, preventing successful OAuth redirect handling.","error":"Connection to OAuth institution fails on Android device/emulator."},{"fix":"Open your `android/app/build.gradle` file and set `compileSdkVersion 33`.","cause":"Your Android project's `compileSdkVersion` is not set to `33`, which is a requirement for recent versions of the SDK.","error":"Plaid Link doesn't open or crashes on Android, or shows `android.view.InflateException`"}],"ecosystem":"npm"}