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.
- 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)
npm install react-native-video react-native-video-trimmer-uiImport 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"
/>| 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 |
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.
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.
- Video trimming functionality for React Native applications
- Customizable slider for selecting trim range
- Supports looping video playback
- Additional customization options for the trimmer UI
- Fully customizable Video
- Fully customizable slider
This project is licensed under the MIT License - see the LICENSE file for details.