To begin, go ahead and add @particle-network/rn-connect, @particle-network/rn-auth-core, and @particle-network/rn-base to your React Native application; this is a requirement before moving onto platform-specific configuration.

npm install @particle-network/rn-auth-core
npm install @particle-network/rn-base
npm install @particle-network/rn-connect

// Or

yarn add @particle-network/rn-auth-core
yarn add @particle-network/rn-base
yarn add @particle-network/rn-connect

Once the aforementioned libraries are installed, you’re ready to configure Particle Connect.

Most importantly within this process, you’ll need three key values from the Particle dashboard: your project ID, client key, and app ID. These are used to authenticate your instance of Particle Connect and connect your project to the dashboard; these are required to properly initialize the SDK.

To retrieve these keys, follow the steps outlined below:

For more information on the Particle dashboard, take a look at the dashboard quickstart.

Android

If you’re planning on using Android for your React Native application, ensure that you meet the following prerequisites:

• minSdkVersion 23 or higher.
• compileSdkVersion, targetSdkVersion 34 or higher.
• JavaVersion 17.
• Jetpack (AndroidX).
• Android Gradle Plugin Version: 8.5.1 or higher.
• Gradle Version: 8.9 or higher. (before react-native:0.75.2, use 8.8)

Once you’ve made sure your project meets these requirements, you’ll need to move on and define the aforementioned configuration values (project ID, client key, and app ID) within your build.grade file (which is generally found at ${project name}/android/app/build.gradle). These directly link your application’s instance of Particle Connect with the dashboard.

Specifically, within build.gradle, you’ll need to set four different values:

1. dataBinding, this should be enabled with enabled = true.
2. manifestPlaceholders["PN_PROJECT_ID"], the project ID previously retrieved from the Particle dashboard.
3. manifestPlaceholders["PN_PROJECT_CLIENT_KEY"], the client key previously retrieved from the Particle dashboard.
4. manifestPlaceholders["PN_APP_ID"], the app ID previously retrieved from the Particle dashboard.

android {
  ...
  defaultConfig {
      ......
      manifestPlaceholders["PN_PROJECT_ID"] = "Your project ID"
      manifestPlaceholders["PN_PROJECT_CLIENT_KEY"] = "Your client key"
      manifestPlaceholders["PN_APP_ID"] = "Your app ID"
  }

  dataBinding {
      enabled = true
  }

}

iOS

Alternatively, if you plan to use iOS for your React Native application, the underlying setup process differs slightly. Before diving in, ensure that your project meets the following requirements:

• Xcode 15.0 or later.

• iOS 14 or later.

With these requirements set, you’ll need to open an exported iOS project and find ios/{project name}.xcworkspace.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>PROJECT_UUID</key>
  <string>YOUR_PROJECT_UUID</string>
  <key>PROJECT_CLIENT_KEY</key>
  <string>YOUR_PROJECT_CLIENT_KEY</string>
  <key>PROJECT_APP_UUID</key>
  <string>YOUR_PROJECT_APP_UUID</string>
</dict>
</plist>

#import <react_native_particle_connect/react_native_particle_connect-Swift.h>

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
  if ([ParticleConnectSchemeManager handleUrl:url] == YES) {
    return YES;
  } else {
    // other methods
  }
  return YES;
}

<key>LSApplicationQueriesSchemes</key>
<array>
<string>metamask</string>
<string>phantom</string>
<string>bitkeep</string>
<string>imtokenv2</string>
<string>rainbow</string>
<string>trust</string>
<string>zerion</string>
<string>mathwallet</string>
<string>oneinch</string>
<string>awallet</string>
<string>okex</string>
<string>bnc</string>
</array>
<key>NSPhotoLibraryUsageDescription</key>
<string>We need access in order to open photos of barcodes</string>
<key>NSCameraUsageDescription</key>
<string>We use the camera to scan barcodes</string>
<key>NSFaceIDUsageDescription</key>
<string>We use Face ID for secure access to the app.</string>

At this point, you’ve installed and configured Particle Connect; the only step remaining before the SDK can be used is initialization.

Particle Connect can be initialized by simply calling the init method on particleConnect. This takes the following parameters:

• chainInfo, representing the primary chain you intend to use (for example, ChainInfo.Ethereum, chainInfo.Polygon).
• metadata, a collection of information about your project.
• env, affecting the information logged within your environment (Env.dev, Env.production, or Env.staging).

An example of this has been included below.

const chainInfo: ChainInfo = Ethereum;
const env = Env.Dev;
const metadata = {
    url: 'https://connect.particle.network',
    icon: 'https://connect.particle.network/icons/512.png',
    name: 'Particle Connect',
    description: 'Particle Wallet'
}

particleConnect.init(chainInfo, env, metadata);
particleAuthCore.init();

At this point, you’re ready to facilitate connection through the Particle Connect modal (via either socials or standard wallets).

To do this, you’ll need to establish a config object specifying the:

• Onboarding mechanisms you’d like to support, through connectOptions (such as ConnectOption.Email, ConnectOption.Phone, ConnectOption.Social, ConnectOption.Wallet).
• Social login providers you’d like to support, through socialProviders (such as EnableSocialProvider.Google, EnableSocialProvider.Apple, and so on).
• Wallets you’d like to be included as options within the modal, through walletProviders (such as EnableWallet.MetaMask, as shown below).
• (Optionally), layout options altering the format of the connection modal through additionalLayoutOptions.
• (Optionally), additional customizations, such as a custom icon, through logo.

Upon generating this config, you’ll be able to call particleConnect.connectWithConnectKitConfig, initiating the resulting connection modal.

const config = {
      //  You can control the array elements and adjust the UI order
      connectOptions: [ConnectOption.Email, ConnectOption.Phone, ConnectOption.Social, ConnectOption.Wallet],
      //  You can control the array elements and adjust the UI order
      socialProviders: [EnableSocialProvider.Google, EnableSocialProvider.Apple, EnableSocialProvider.Twitter, EnableSocialProvider.Discord, EnableSocialProvider.Github],
      //  You can control the array elements and adjust the UI order
      walletProviders: [{ enableWallet: EnableWallet.MetaMask, label: EnableWalletLabel.Recommended },
      { enableWallet: EnableWallet.OKX, label: EnableWalletLabel.Popular },
      { enableWallet: EnableWallet.Trust, label: EnableWalletLabel.None },
      { enableWallet: EnableWallet.Bitget, label: EnableWalletLabel.None }
      ],

      additionalLayoutOptions: {
        isCollapseWalletList: false,
        isSplitEmailAndSocial: true,
        isSplitEmailAndPhone: false,
        isHideContinueButton: false,
      },
      logo: base64Icon // base64 string or image URL
    };

const accountInfo = await particleConnect.connectWithConnectKitConfig(config);