React Native

React Native SDK provides a way to integrate Argyle Link into your React Native app.

Setup

Requirements for iOS:

  • The minimum deployment target needs to be at least 11.0.
  • Required react-native version 0.60.x+.

Requirements for Android:

❗️

Important: When using tools like Proguard to obfuscate your code, make sure to exclude Android Link SDK package (com.argyle._) from the process, it may cause unexpected runtime issues otherwise. You can do this by adding this line to your proguard-rules.pro:-keep class com.argyle. { _; }

In case of runtime issues related to okhttp3 library, the Link SDK currently has a dependency of okhttp3:4.9.2. If some of your dependencies use an older version (okhttp3:3.x.x), you may need to update a version that also uses okhttp3:4.x.x. Alternatively, you may try forcing the version of the dependency as follows:

configurations.all {
    resolutionStrategy.force 'com.squareup.okhttp3:okhttp:4.9.x'
    resolutionStrategy.force 'com.squareup.okhttp3:okhttp-urlconnection:4.9.x'
}
  1. Add the SDK dependency.

$ npm install @argyleio/argyle-plugin-react-native --save or

$ yarn add @argyleio/argyle-plugin-react-native

  1. Update the Argyle pod with these commands, in case an older version of Argyle pod was installed:

$ cd ios

$ pod install

$ pod update

  1. Configure and start the flow.
import ArgyleSdk from '@argyleio/argyle-plugin-react-native'

// Configure the SDK before hand, once. only call ArgyleSdk.start() when the UI is needed
ArgyleSdk.loginWith("YOUR_LINK_KEY", "https://api-sandbox.argyle.com/v1", "")

ArgyleSdk.onUserCreated(res => console.log("onUserCreated", res))
ArgyleSdk.onAccountCreated(res => console.log("onAccountCreated", res))
ArgyleSdk.onAccountConnected(res => console.log("onAccountConnected", res))
ArgyleSdk.onAccountUpdated(res => console.log("onAccountUpdated", res))
ArgyleSdk.onAccountRemoved(res => console.log("onAccountRemoved", res))
ArgyleSdk.onAccountError(res => console.log('onAccountError', res))
ArgyleSdk.onPayDistributionSuccess(res => console.log('onPayDistributionSuccess', res))
ArgyleSdk.onPayDistributionError(res => console.log('onPayDistributionError', res))
ArgyleSdk.onError(error => console.log("onError", error))
ArgyleSdk.onTokenExpired(res => console.log("onTokenExpired", res))
ArgyleSdk.onClose(() => console.log('onClose'))
ArgyleSdk.onUIEvent(res => console.log('onUIEvent', JSON.stringify(res, null, 2)))

ArgyleSdk.linkItems(["uber", "lyft"]) // Can be skipped if all Link items are needed

// Launch the SDK
ArgyleSdk.start()

📘

The API host in this SDK configuration example is set to the Argyle Sandbox API (<https://api-sandbox.argyle.com/v1>). It's a good idea to test your implementation in Sandbox mode first, then change this to the Production API (<https://api.argyle.com/v1>) when you are ready to go live.

Closing Link programmatically

Normally, the user closes Link but you can also close it by calling ArgyleSdk.close().

🚧

We strongly recommend upgrading the SDK as soon as there is a new version available. Doing so will help you provide the best Argyle Link experience in your application. To receive notifications when a new release is issued, you can watch for releases on our repositories or subscribe to our Changelog.

Configuration

Argyle Link provides multiple configuration options and callbacks that customize how this UI element functions in your application. The only argument that is mandatory when invoking Argyle Link is the linkKey, which you can find in the Argyle Console.

By default, anytime Argyle Link is initialized, it will be treated as a new session for a new user. To ensure your users retain their previous state in Argyle Link when it is re-initialized for them, your application must use the userToken parameter.

For a full list of Link configuration parameters, see the Link reference.

User tokens

User tokens are temporary access keys that let you start Argyle Link for an existing user.

Tokens are short-lived. Generate a new token using the API every time you initialize Argyle Link for a returning user.

You can create user tokens using the /user-tokens endpoint.

Make sure that you request user tokens on your server-side and your client_id and client_secret are never exposed on the front-end.

Callbacks

For a full list of callbacks, see the Link reference.

Upgrade

See the Link SDK for React Native upgrade guide for instructions on upgrading your integration.


What’s Next