Twilight Video Editor

A comprehensive video editor package for React Native applications, featuring video trimming, filters, overlays, and audio editing.

Features

• Video trimming and cutting
• Filters and color adjustments
• Sticker and text overlays
• Drawing capabilities
• Audio editing and mixing
• Timeline-based editing
• Export with quality options

Installation

npm install twilight-video-editor
# or
yarn add twilight-video-editor

Additional Dependencies

The package requires the following dependencies:

# Install peer dependencies
npm install react-native-video react-native-gesture-handler react-native-reanimated react-native-fs
# or
yarn add react-native-video react-native-gesture-handler react-native-reanimated react-native-fs

For iOS, install pods:

cd ios && pod install

Expo Compatibility

This package is designed to be compatible with Expo projects. It uses Expo's native modules instead of direct native dependencies when possible:

• Uses expo-file-system instead of react-native-fs for file operations
• Works with Expo's managed workflow with development builds

Installation with Expo

# Install the package
npx expo install twilight-video-editor expo-file-system

# Install additional required dependencies
npx expo install react-native-reanimated react-native-gesture-handler react-native-video

Since this package uses native modules, you'll need to create a development build when using Expo:

# Create a development build
npx expo prebuild
npx expo run:ios
# or
npx expo run:android

Config Plugin

If you're using Expo, add the following to your app.json:

{
  "expo": {
    "plugins": [
      [
        "twilight-video-editor",
        {
          "ffmpegKitPackage": "full"
        }
      ]
    ]
  }
}

Basic Usage

import React, { useState } from 'react';
import { View, Button } from 'react-native';
import { TwilightVideoEditor, useVideoExport } from 'twilight-video-editor';

const VideoEditingScreen = () => {
  const [source, setSource] = useState({ uri: 'file:///path/to/video.mp4' });
  const { exportVideo, isExporting, progress } = useVideoExport();

  const handleExport = async () => {
    try {
      const result = await exportVideo(source, {
        quality: 'high',
        includeAudio: true,
      });
      console.log('Exported video: ', result.outputPath);
    } catch (error) {
      console.error('Export failed: ', error);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <TwilightVideoEditor
        source={source}
        style={{ flex: 1 }}
        showTrimmer={true}
        showFilters={true}
      />
      <Button 
        title={isExporting ? `Exporting... ${Math.round(progress * 100)}%` : 'Export Video'} 
        onPress={handleExport}
        disabled={isExporting}
      />
    </View>
  );
};

export default VideoEditingScreen;

Advanced Usage

For more advanced usage examples, please refer to the included example app and the API documentation.

API Reference

[Detailed component and hook documentation here]

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.