Getting Started

You can get started with a React Native example here.

Install Dependencies

Add the SDK package to your project’s package.json

npm install '@anon/sdk-react-native@^0.1.1'

Setup the Example Code

Bare React Native Setup

Include the AnonKit pod in your PodFile

pod 'AnonKit', '~> 0.3.1', :source => 'ssh://git@github.com/anon-dot-com/sdk-ios-pkg.git'

Set use_frameworks! in your PodFile with the static linkage option

use_frameworks! :linkage => :static

If a minimum deployment target is required, set it in your PodFile

platform :ios, '16.0'

Update pod dependencies

pod install

Update the minimum deployment target in your Xcode project

Expo Setup

Install the expo-build-properties package

npx expo install expo-build-properties

Add the following to your app.json file

"expo": {
  "plugins": [
    [
      "expo-build-properties",
      {
        "ios": {
          "deploymentTarget": "16.0",
          "useFrameworks": "static",
          "extraPods": [
            {
              "name": "AnonKit",
              "source": "ssh://git@github.com/anon-dot-com/sdk-ios-pkg.git",
              "version": "~> 0.3.5"
            }
          ]
        }
      }
    ]
  ]
}

Rerun expo prebuild and build the app

npx expo prebuild -p ios

Render the SDK View

Proceed to initialize the AnonKit SDK by rendering the view in your application.

Here’s an example of using the SDK view in your React Native application:

import AnonKit, { AnonKitEnvironment } from "@anon/sdk-react-native";

export default function MyScreen() {
  return (
    <AnonKit
      appName="instagram"
      style={styles.anon}
      onDismiss={() => {}}
      ui={{
        theme: "light",
        // replace with your own
        orgName: "YourCompany",
        // replace with your own
        orgIconUrl: "https://example.com/logo.png",
        showAnonLogo: true,
        showPrivacyPolicy: true,
      }}
      config={{
        environment: AnonKitEnvironment.sandbox,
        // grab from env.ANON_SDKCLIENT_ID
        clientId: "XXXX-XXXX-XXXX-XXXX-XXXX",
        // grab from env.ANON_APP_USER_ID_TOKEN
        appUserIdToken: "ey************",
      }}
    />
  )
}

const styles = StyleSheet.create({
  anon: {
    flex: 1,
  }
})

After connecting user sessions, you are ready to execute actions with user sessions!

Next Steps

Was this page helpful?