react-native-videoeditor-ios

Empower iOS developers to take their video editing capabilities to the next level with our comprehensive React Native npm library. Our package offers a versatile suite of features to crop, trim, add filters, overlay images, text, shapes, and GIFs seamlessly onto videos within your React Native iOS applications. Whether you're building a social media app, a video-sharing platform, or enhancing user-generated content, our library simplifies the integration of advanced video editing functionality, saving you valuable development time and effort.

Key Features:

Video Trimming: Trim videos to achieve the desired length.

Filters and Effects: Apply a wide range of filters and effects to enhance video aesthetics and creativity.

iOS Compatibility: Tailored specifically for iOS applications, ensuring optimal performance and compatibility.

User-Friendly API: Intuitive and well-documented API for easy integration and customization.

Real-time Preview: Enable users to see edits in real-time before finalizing changes.

High-Quality Output: Deliver edited videos in a variety of resolutions and formats while maintaining video quality.

Whether you're building a video editing app, a platform for user-generated content, or simply need to enhance your iOS app with video editing capabilities, our React Native Video Editing Toolkit empowers you to create compelling and engaging video experiences for your users. Get started today and unlock the full potential of video editing in your iOS applications.

In Future Release:

• Image Overlays: Superimpose images onto videos to add logos, watermarks, or visual elements.
• Text Overlays: Embed dynamic text overlays with customizable fonts, colors, and animations to convey messages or captions.
• Shapes and Graphics: Enhance videos with geometric shapes, lines, and custom graphics for creative expression.
• GIF Integration: Seamlessly integrate GIFs into videos to create captivating, dynamic content.
• Android Support

Installation

1npm install react-native-videoeditor-ios

or

1yarn add install react-native-videoeditor-ios

1pod install

Usage

1import VideoEditor from 'react-native-videoeditor-ios';
2
3// ...
4
5const filters = [
6    {
7      name: 'Original',
8      type: '',
9      color: 'white',
10      icon: '',
11      text: 'O',
12    },
13    {
14      name: 'Invert',
15      type: 'CIColorInvert',
16      color: 'pink',
17      icon: 'https://imgv3.fotor.com/images/blog-richtext-image/a-man-surfing-with-different-filter.png', // (optional) add image uri to show as a filter preview
18      text: 'I',
19    },
20    {
21      name: 'Mono',
22      type: 'CIColorMonochrome', // dont change the type
23      color: 'pink',
24      icon: '',
25      text: 'M',
26    },
27    {
28      name: 'Posterize',
29      type: 'CIColorPosterize',
30      color: 'pink',
31      icon: '',
32      text: 'P',
33    },
34    {
35      name: 'False Color',
36      type: 'CIFalseColor',
37      color: 'pink',
38      icon: '',
39      text: 'F',
40    },
41    {
42      name: 'Max Gray',
43      type: 'CIMaximumComponent',
44      color: 'pink',
45      icon: '',
46      text: 'MC',
47    },
48    {
49      name: 'Min Gray',
50      type: 'CIMinimumComponent',
51      color: 'pink',
52      icon: '',
53      text: 'MC',
54    },
55    {
56      name: 'Chrome',
57      type: 'CIPhotoEffectChrome',
58      color: 'pink',
59      icon: '',
60      text: 'C',
61    },
62    {
63      name: 'Fade',
64      type: 'CIPhotoEffectFade',
65      color: 'pink',
66      icon: '',
67      text: 'F',
68    },
69    {
70      name: 'Instant',
71      type: 'CIPhotoEffectInstant',
72      color: 'pink',
73      icon: '',
74      text: 'I',
75    },
76    {
77      name: 'Gray Scale',
78      type: 'CIPhotoEffectMono',
79      color: 'pink',
80      icon: '',
81      text: 'EM',
82    },
83    {
84      name: 'Noir',
85      type: 'CIPhotoEffectNoir',
86      color: 'pink',
87      icon: '',
88      text: 'N',
89    },
90    {
91      name: 'Process',
92      type: 'CIPhotoEffectProcess',
93      color: 'pink',
94      icon: '',
95      text: 'P',
96    },
97    {
98      name: 'Tonal',
99      type: 'CIPhotoEffectTonal',
100      color: 'pink',
101      icon: '',
102      text: 'T',
103    },
104    {
105      name: 'Transfer',
106      type: 'CIPhotoEffectTransfer',
107      color: 'pink',
108      icon: '',
109      text: 'T',
110    },
111    {
112      name: 'Sapia',
113      type: 'CISepiaTone',
114      color: 'pink',
115      icon: '',
116      text: 'S',
117    },
118  ];
119
120// just remove whatever filters you don't want from the array
121
122const videoEditingRef = React.useRef(null); // create ref to save the edited video
123
124await videoEditingRef.current.completeEditing() // call this to save the edited video
125
126<VideoEditor ref={videoEditingRef} uri={video} filters={filters} /> // add video from the gallery or phone camera

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Made with create-react-native-library