# React Native quickstart

> Mount the Fabric camera preview, initialize Nosmai Effects, start processing, and apply a beauty effect in React Native.

> For AI agents: the complete documentation index is at https://nosmai.com/llms/effects.txt

Product: Nosmai Effects
Group: get-started
Source: https://nosmai.com/docs/effects/quickstart/react-native/

## Prerequisites

- [Nosmai Effects SDK for React Native installed](/docs/effects/installation/react-native/)
- React Native 0.81.5 and React 19.1, or Expo SDK 54 custom native build
- New Architecture enabled
- Android API 24 or iOS 15 on a physical arm64 device
- A [Nosmai licence key](/docs/effects/license-key/) for the current platform
- Native camera permissions configured

## 1. Request native permission

Android hosts own the runtime camera prompt. The iOS bridge asks when camera
authorization is undetermined, but `NSCameraUsageDescription` must still exist.

## 2. Mount the native preview

Mount one Fabric preview and record when its native view exists:

```tsx
<NosmaiCameraView
  style={{ flex: 1 }}
  cameraPosition="front"
  mirror
  onLayout={() => setViewMounted(true)}
  onReady={() => {
    void NosmaiCameraSdk.setSkinSmoothing(0.4);
  }}
  onError={(error) => {
    console.error(error.code, error.message);
  }}
/>
```

## 3. Initialize and start processing

Start only after the preview has mounted. Select the key for the current native
application:

```tsx
useEffect(() => {
  if (!viewMounted) return;

  const licenseKey = Platform.select({
    android: ANDROID_LICENSE_KEY,
    ios: IOS_LICENSE_KEY,
    default: '',
  });

  const start = async () => {
    const accepted = await NosmaiCameraSdk.initialize(licenseKey);
    if (!accepted) {
      throw new Error('Nosmai initialization was not accepted');
    }

    await NosmaiCameraSdk.configureCamera({ position: 'front' });
    await NosmaiCameraSdk.startProcessing();
  };

  void start().catch(console.error);

  return () => {
    void NosmaiCameraSdk.cleanup();
  };
}, [viewMounted]);
```

Replace the documentation constants with application-owned runtime
configuration. The view must be mounted before `startProcessing()` and another
camera controller must not own the device.

## 4. Run the native build

Android:

```sh
yarn android
```

iOS physical device:

```sh
yarn ios --device
```

For Expo SDK 54, use `npx expo run:android` or `npx expo run:ios --device` after
prebuild. Expo Go is not supported.

## Package example app

For a complete runnable implementation, open the
[React Native package example app](https://github.com/nosmai/nosmai_effects_sdk_react_native/tree/main/example).
This example matches the documented Expo 54 and React Native 0.81 New
Architecture compatibility line. Add the verified Android AAR and your own
app-bound platform licence keys before running it on a physical device.

## Verify it worked

You should see a full-size camera preview and the status `Camera ready with skin
smoothing`. The skin-smoothing level is `0.4`. Navigate away and confirm the
operating-system camera indicator turns off after cleanup.

## Common errors

| Error | Cause | Fix |
| --- | --- | --- |
| `E_NOT_INITIALIZED` | A camera or effect method ran before successful initialization | Await `initialize` before configuration and processing |
| `E_NO_PREVIEW` | Processing started before a Fabric preview owned the session | Mount `NosmaiCameraView` and start only after its layout callback |
| `E_CAMERA_PERMISSION` | Android runtime camera permission is missing | Request `PermissionsAndroid.PERMISSIONS.CAMERA` before initialization |
| `E_CAMERA_DEVICE` | Camera2 reported a device error, often because another controller still owns the camera | Dispose or stop the other camera session before opening Nosmai |
| `E_PROCESSING_START` | Native preview or pipeline could not start | Keep one mounted view, inspect the preceding native error, and retry after cleanup |

## Next steps

- [Apply a beauty filter in React Native](/docs/effects/guides/effects/apply-a-beauty-filter/react-native/)
- [Replace the background in React Native](/docs/effects/guides/background/replace-the-background/react-native/)
- [Download a Cloud Filter in React Native](/docs/effects/guides/filters/download-a-cloud-filter/react-native/)
- [Control a camera game in React Native](/docs/effects/guides/effects/control-a-camera-game/react-native/)
- [Understand processed-frame sampling](/docs/effects/concepts/off-screen-rendering/)

## References

- [React Native installation](/docs/effects/installation/react-native/)
- [React Native package example app](https://github.com/nosmai/nosmai_effects_sdk_react_native/tree/main/example)
- [React Native package on npm](https://www.npmjs.com/package/@nosmai/react-native-effects-sdk)
- [React Native repository](https://github.com/nosmai/nosmai_effects_sdk_react_native)
- [How the pipeline works](/docs/effects/concepts/how-the-pipeline-works/)
- [Nosmai Effects](https://nosmai.com/effects/)
- [Nosmai Effects pricing](https://nosmai.com/effects/#pricing)