Example of Expo Project with Video Editor React Native Plugin

Overview

This example demonstrates how to integrate the Video Editor React Native Plugin into an Expo project.

Launch Instructions

1. Set the Banuba license token within the app.

2. Install node_modules by running the following command in the terminal:

   npm install

3. Run the following command to build native parts:

   npx expo prebuild --clean

4. Add required resources to iOS and Android modules according to the iOS documentation and Android doumentation.
   Please, make sure all these resources are present in your project:

   • Android:

     1. drawable-xhdpi, drawable-xxhdpi, drawable-xxxhdpi are visual assets for color filter previews. themes.xml includes implementation of VideoCreationTheme of Video Editor SDK - insert them here android/app/src/main/res.
     2. themes.xml includes implementation of VideoCreationTheme of Video Editor SDK - insert them here android/app/src/main/res/values.

   • iOS:

     1. luts - the folder where all color effects are stored - insert them here ios/vesdkexpo;
     2. ColorEffectsPreview - preview images of color effects - insert them here ios/vesdkexpo/Images.xcassets;
     3. Effects Preview - preview images of visual effects - insert them here ios/vesdkexpo/Images.xcassets;
     4. Localized Strings - insert them here ios/vesdkexpo/en.lproj and add it to Copy Bundle Resources of iOS project.

   
   ❗ Important
   Expo cleans up native modules after the prebuild phase. You'll need to repeat step 4 again.

5. Run the project on the devices:

• Android

npx expo run:android    

• iOS

npx expo run:ios    

Integration insttructions

1. Run the command to intall Video Editor React Native Plugin:

   npm install video-editor-react-native

2. Add Expo config plugin (Android Manifest + iOS Podfile) to the root of your project

3. Register the plugin in app.json (or app.config.js)

   "expo": {
      "plugins": [
         "./plugins/withVideoEditorNativeConfig",
         ...
      ]
   }

4. Add the necessary permissons for iOS.zable.strings)

5. Add Localization file and add it to Copy Bundle Resources of iOS project.