Getting Started

You can get started with a React Native example here.

You can add Anon to your React Native app using npm.

Step 1

Create a .npmrc file in the same directory as your package.json with the following snippet, replacing ${NPM_TOKEN} with the auth token received from Anon.

@anon:registry=https://npm.cloudsmith.io/anon/anon-sdk/
//npm.cloudsmith.io/anon/anon-sdk/:_authToken=${NPM_TOKEN}
@npm:registry=https://registry.npmjs.org/

Step 2

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

npm install '@anon/sdk-react-native@^0.1.1'
# or
yarn add '@anon/sdk-react-native@^0.1.1'

Step 3

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.1"
            }
          ]
        }
      }
    ]
  ]
}

Rerun expo prebuild and build the app

npx expo prebuild -p ios

Step 4

You can 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,
  }
})

Check out Anon’s supported Integrations below.