Skip to main content

Getting Started

Note

This library under development, if you found a bug, please open an issue from here.

Note

react-native-snapchat-camera-kit is a 3rd party library, we are working on this in our free time. Fixing bugs and development of awaiting features may take time.

Note

It only works on physical devices, not will work with simulator.

Installing the library​

Install react-native-snapchat-camera-kit through npm or yarn:

npm i react-native-snapchat-camera-kit
npx pod-install

Other Required Steps​

Android​

  1. Open your project's AndroidManifest.xml and add the following lines:
<uses-permission android:name="android.permission.CAMERA" />

<!-- optionally, if you want to record audio: -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
  1. Edit android/app/build.gradle file like below:
android {
  //...

  packagingOptions {
    pickFirst '**/libcrypto.so'
    pickFirst '**/libssl.so'
  }
}

iOS​

  1. Open your project's Info.plist and add the following lines:
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera.</string>

<!-- optionally, if you want to record audio: -->
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Microphone.</string>

Defining Credentials​

There are two ways to set credentials: during build time or at runtime.

Build Time​

You can put your credentials into your native files.

Android​

Add secrets to AndroidManifest.xml file like below:

<meta-data
    android:name="com.snap.camerakit.api.token"
    android:value="SNAPCHAT-CAMERA-KIT-API-KEY" />

iOS​

Add secrets to Info.plist file like below:

<key>SCCameraKitAPIToken</key>
<string>SNAPCHAT-CAMERA-KIT-API-KEY</string>

Runtime​

It is not necessary to define secrets in native code; it can be defined at runtime.

import { init } from 'react-native-snapchat-camera-kit';

init({
  apiKey: 'SNAPCHAT-CAMERA-KIT-API-KEY',
});

Prepare Lenses​

You have to define you lens group id/s before use lenses. Checkout Defining Lens Group Id section.