react-native-video-trimmer-ui

react-native-video-trimmer-ui

React Native Video Trimmer UI is a powerful and easy-to-use UI component that adds video trimming functionality to your React Native applications. It's perfect for video editing apps, social media platforms, or any application requiring video manipulation.

Demo

Key Features

• Intuitive user interface for selecting trim range
• Real-time preview of the trimmed video section
• Customizable trim duration limits
• Support for various video formats
• Efficient trimming process with optimized performance
• Cross-platform compatibility (iOS and Android)
• Easy integration with existing React Native projects (Expo and bare React Native)

Installation

npm install react-native-video react-native-video-trimmer-ui

Usage

Import the VideoTrimmerUI component in your React Native application:

import VideoTrimmerUI from 'react-native-video-trimmer-ui';

Then, use the VideoTrimmerUI component in your JSX:

<VideoTrimmerUI
  source={{ uri: 'https://example.com/video.mp4' }}
  onSelected={(start, end) => console.log(`Selected trim range: ${start} to ${end}`)}
  loop={true}
  containerStyle={{ height: 300 }}
  sliderContainerStyle={{ marginHorizontal: 20 }}
  tintColor="#007AFF"
/>

Props

Prop	Type	Default	Description
source	ReactVideoSource	required	The source of the video (e.g., { uri: 'https://example.com/video.mp4' })
onSelected	function	-	Callback function that receives the selected start and end times (in seconds) when the user finishes trimming
loop	boolean	true	Whether the video should loop after reaching the end
containerStyle	ViewStyle	-	Custom styles for the container of the VideoTrimmerUI component
sliderContainerStyle	ViewStyle	-	Custom styles for the slider container
tintColor	string	'#24A0ED'	Color of the slider and its components
minDuration	number	1	Minimum duration (in seconds) for the trimmed video section

Methods

You can access the VideoTrimmerUI methods using a ref:

const trimmerRef = useRef(null);

// Later in your component
const [start, end] = trimmerRef.current.getSelection();
console.log(`Current trim range: ${start} to ${end}`);

// In your JSX
<VideoTrimmerUI
  ref={trimmerRef}
  // ... other props
/>

Available methods:

• getSelection(): Returns an array with the current start and end times of the trim range.

Trimming the Video

After selecting the trim range using the VideoTrimmerUI component, you can use the react-native-video-trimmer-core library to perform the actual video trimming. For more information on how to use this library, please refer to the react-native-video-trimmer-core npm package.

Features

• Video trimming functionality for React Native applications
• Customizable slider for selecting trim range
• Supports looping video playback

Upcoming Features

• Additional customization options for the trimmer UI
  • Fully customizable Video
  • Fully customizable slider

License

This project is licensed under the MIT License - see the LICENSE file for details.