A React Native video editor, in your app and your brand

npm install @nitrakit/react-native react-native-nitro-modules

@nitrakit/react-native includes the iOS SDK; on Android, Gradle gets the SDK from Maven Central with no setup.

• iOS: run pod install. If users pick from their photo library, add NSPhotoLibraryUsageDescription to your Info.plist.
• Android: raise minSdkVersion to 26 if it's lower.

In Expo, add the config plugin to app.json instead; it sets the Android version for you. Then run npx expo prebuild.

{ "expo": { "plugins": ["@nitrakit/react-native"] } }

Use a development build: Expo Go can't load the SDK's native code.

NitrakitPreview plays the project and lets the user move and resize layers; NitrakitEditor has the timeline, tools and panels. Give both the same editor:

import { NitrakitEditor, NitrakitPreview } from '@nitrakit/react-native'

export function EditorScreen({ editor }: { editor: Editor }) {
  return (
    <View style={{ flex: 1, backgroundColor: '#000' }}>
      <NitrakitPreview editor={editor} style={{ flex: 1 }} />
      <NitrakitEditor editor={editor} style={{ height: 400 }} onRequest={onRequest} />
    </View>
  )
}

Give NitrakitEditor a fixed height (300–400 works well) and let the preview take the rest. Create the editor once per project, for example in a useMemo or your state store, with createEditor(1080, 1920, 30).

The editor never opens the photo library itself. When the user adds media, onRequest asks your app; return the answer or a promise of it, null if the user backed out, or nothing to use the built-in picker for fonts, colours, text, text styles and filters. importFile turns what a picker gives you (content://, file://) into a path the SDK can read.

Projects refer to media only by your ids. When a project opens on a device that doesn't have its files, your resolver says where they live:

import { setMediaResolver } from '@nitrakit/react-native'

setMediaResolver(async (id) => (await api.signedUrl(id)).url)   // or a local path

See Your pickers and Projects and media.

Export renders an MP4 (H.264 video, AAC audio) in the background while the user keeps editing:

import { filesDir } from '@nitrakit/react-native'

const path = `${filesDir()}/export-${Date.now()}.mp4`
try {
  await editor.exportVideo(path, editor.exportSettings(1080), (f) => setProgress(f))
  // the file at `path` is ready to save, share or upload
} catch (e) {
  // failed, or cancelled with editor.cancelExport()
}

• Theme: colours, font and bar sizes, switchable at runtime for dark and light.
• Tools: hide what you don't offer with hiddenMenuItems, add your own.
• Wording: your app's words, in your users' languages.

React Native is good at the UI around video: pickers, buttons, a player. Decoding, compositing, effects and encoding need native code on each platform, and an editor needs a timeline, a preview that matches the export, text, undo and saved projects on top. Nitrakit is that whole layer as two components. For the full walkthrough, from install to Expo to export, read Add a video editor to your React Native app.