Skip to content
Branch: master
Find file History
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
demo restructure webview examples Jun 10, 2019
linkkit migrate deprecated /link repo Jun 10, 2019
README.md restructure webview examples Jun 10, 2019

README.md

React Native for Plaid Link (iOS)

⚛︎📱 This repository contains sample code that demonstrates integration and use of Plaid Link using React Native. Currently only iOS is supported.

⚠️ Note that this is the React Native bridge for Link officially supported by Plaid, but is very different from the module with the same name available on npmjs; we strongly recommend favoring this React Native bridge.

Prerequisites

To complete the steps in this example the following software is needed:

  • Xcode
  • yarn (we recomment using nvm to install yarn on macOS: brew install nvm; nvm install 8; nvm use 8; npm -g install yarn)

Using React Native for Plaid Link

  • Clone the Plaid Link repository
  • Add this react-native-plaid-link component to your react-native project and install the necessary dependencies:
  % cd $PATH_TO_YOUR_REACT_NATIVE_PROJECT
  % yarn add file:$PATH_TO_YOUR_CLONE_OF_THIS_REPO/react-native/linkkit
  % yarn install
  % react-native link react-native-plaid-link
  • Integrate the native Plaid Link for iOS SDK (LinkKit.framework) into the iOS part of your react-native project, see the documentation for details.
  • In your App.js import Plaid Link using: import PlaidLink from 'react-native-plaid-link';
  • Create a linkHandler object (we recommend doing so in componentDidMount()) and replace any of the placeholder <#VARIABLE#>s in the example below according to your setup (for details see the Plaid Link documentation):
    this.linkHandler = PlaidLink.create({
      key: '<#PUBLIC_KEY#>',
      env: '<#ENVIRONMENT#>',
      product: ['<#PRODUCT#>'],
      clientName: '<#CLIENT NAME#>',
      onSuccess: this.onSuccess,
      onExit: this.onExit,
      onEvent: this.onEvent,
    });
  • Next, when you would like to show the Plaid Link flow call open() on the linkHandler, e.g. this.linkHandler.open(); which will modally present Plaid Link and guide the user through the process of linking their account with your application through Plaid
  • Once the user has completed, exited, or errored out of the flow the appropriate callback method is invoked
  • A detailed working example can be found in react-native/demo/lib/App.js

About the linkdemo_reactnative Xcode project

ℹ️ In order build and run the linkdemo_reactnative iOS demo application the react-native-plaid-link component must be registered and linked to the Xcode project as mentioned above, e.g.:

  % cd link/react-native/demo
  % yarn add file:../linkkit
  % yarn install
  % react-native link react-native-plaid-link
You can’t perform that action at this time.