Skip to content

Integrate Mobile Camera

In this example, we will show you how to initialize the Camera SDK’s mobile editor in your React Native app. We also prepared a dedicated example application which you can checkout on GitHub.

Requirements

For this version, the minimum requirements are:

  • React Native: 0.73
  • iOS: 16
  • Swift: 5.10 (Xcode 15.4)
  • Android: 7

Add from npmjs.com

Add the @imgly/camera-react-native module to your projects via your favorite package manager.

Android Setup

In order to integrate the camera for Android, you will need to make some adjustments to your app.json file. First, please add the expo-build-properties config plugin to your app. Then, add the following options:

  • Add the IMG.LY maven repository.
            "extraMavenRepos": ["https://artifactory.img.ly/artifactory/maven"],
  • Change the minSdk to 24 (Android 7) or later.
            "minSdkVersion": 24,
  • If needed, change the Kotlin version to 1.9.10 or any other version compatible.
            "kotlinVersion": "1.9.10"

iOS Setup

In order to integrate the camera for iOS, you will need to make some adjustments to your app.json file as well:

  • Add a camera usage permissions description.
        "NSCameraUsageDescription": "This app uses the camera for demonstration purposes.",
  • Add a microphone usage permissions description.
        "NSMicrophoneUsageDescription": "This app uses the camera for demonstration purposes."

Usage

In this example, we’ll demonstrate the basic usage of the camera.

In order to launch the camera, an instance of CameraSettings needs to be provided. For this, you only need to provide the license key that you received from IMG.LY. Optionally, you can provide a unique ID tied to your application’s user. This helps us accurately calculate monthly active users (MAU) and it is especially useful when one person uses the app on multiple devices with a sign-in feature, ensuring they’re counted once.

const settings: CameraSettings = {
  license: 'YOUR_LICENSE_KEY',
};

Next, you can open the editor using the openCamera method.

const result = await IMGLYCamera.openCamera(settings);

That is all. For more than basic configuration, check out all the available configurations.

Full Code

Here’s the full code for both app.json and camera_react_native.ts.

app.json

{
  "expo": {
    "plugins": [
      [
        "expo-build-properties",
        {
          "android": {
            "extraMavenRepos": ["https://artifactory.img.ly/artifactory/maven"],
            "minSdkVersion": 24,
            "kotlinVersion": "1.9.10"
          },
          "ios": {
            "deploymentTarget": "16.0"
          }
        }
      ]
    ],
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "This app uses the camera for demonstration purposes.",
        "NSMicrophoneUsageDescription": "This app uses the camera for demonstration purposes."
      }
    }
  }
}

camera_react_native.ts

import IMGLYCamera, { CameraSettings } from '@imgly/camera-react-native';


export const camera = async (): Promise<void> => {
  const settings: CameraSettings = {
    license: 'YOUR_LICENSE_KEY',
  };
  const result = await IMGLYCamera.openCamera(settings);
};