React-native-video-trimmer-ui NPM

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

Video Trimmer UI 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.