React Native

Follow these instructions to set up your Android integration.

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:

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:

Build gradle:

1configurations.all {
2    resolutionStrategy.force 'com.squareup.okhttp3:okhttp:4.9.x'
3    resolutionStrategy.force 'com.squareup.okhttp3:okhttp-urlconnection:4.9.x'
4}

1. Add the SDK dependency.

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

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

   $ cd ios

   $ pod install

   $ pod update

3. Configure and start the flow:

   SDK configuration:

   1import ArgyleSdk from '@argyleio/argyle-plugin-react-native'
   2
   3// Configure the SDK before hand, once. only call ArgyleSdk.start() when the UI is needed
   4ArgyleSdk.loginWith("YOUR_LINK_KEY", "https://api-sandbox.argyle.com/v1", "")
   5
   6ArgyleSdk.onUserCreated(res => console.log("onUserCreated", res))
   7ArgyleSdk.onAccountCreated(res => console.log("onAccountCreated", res))
   8ArgyleSdk.onAccountConnected(res => console.log("onAccountConnected", res))
   9ArgyleSdk.onAccountUpdated(res => console.log("onAccountUpdated", res))
   10ArgyleSdk.onAccountRemoved(res => console.log("onAccountRemoved", res))
   11ArgyleSdk.onAccountError(res => console.log('onAccountError', res))
   12ArgyleSdk.onPayDistributionSuccess(res => console.log('onPayDistributionSuccess', res))
   13ArgyleSdk.onPayDistributionError(res => console.log('onPayDistributionError', res))
   14ArgyleSdk.onError(error => console.log("onError", error))
   15ArgyleSdk.onTokenExpired(res => console.log("onTokenExpired", res))
   16ArgyleSdk.onClose(() => console.log('onClose'))
   17ArgyleSdk.onUIEvent(res => console.log('onUIEvent', JSON.stringify(res, null, 2)))
   18
   19ArgyleSdk.linkItems(["uber", "lyft"]) // Can be skipped if all Link items are needed
   20
   21// Launch the SDK
   22ArgyleSdk.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().

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 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.