
Security News
Deno 2.4 Brings Back deno bundle, Improves Dependency Management and Observability
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
react-native-video-trimmer-core
Advanced tools
Trim videos between start and end using ffmpeg-kit-react-native
Trim videos between specified start and end times using ffmpeg-kit-react-native
This library provides a simple and efficient way to trim video files in React Native applications. It utilizes the powerful FFmpeg library through the ffmpeg-kit-react-native package to perform video trimming operations. With this core functionality, you can easily integrate video trimming capabilities into your React Native projects, allowing users to select specific portions of a video for further use or processing.
Key features:
Whether you're building a video editing app, a social media platform with video sharing, or any application that requires video manipulation, this core library simplifies the process of implementing video trimming functionality.
npm install react-native-video-trimmer-core
This library depends on the following packages:
ffmpeg-kit-react-native
: ^6.0.2react-native-fs
: ^2.20.0npm install ffmpeg-kit-react-native react-native-fs react-native-video-trimmer-core
Make sure to install these dependencies in your project.
import VideoTrimmer from 'react-native-video-trimmer-core';
// Create an instance of VideoTrimmer
const trimmer = new VideoTrimmer();
// Trim a video
const trimVideo = async (videoPath, startTime, endTime) => {
try {
const trimmedVideoPath = await trimmer.trimVideo(videoPath, startTime, endTime);
console.log('Trimmed video path:', trimmedVideoPath);
} catch (error) {
console.error('Error trimming video:', error);
}
};
// Delete a temporary file
const deleteTempFile = async (filePath) => {
try {
await trimmer.deleteTempFile(filePath);
console.log('Temporary file deleted successfully');
} catch (error) {
console.error('Error deleting temporary file:', error);
}
};
VideoTrimmer
const trimmer = new VideoTrimmer(dir?: string);
dir
(optional): Custom directory for temporary files. If not provided, it uses the default cache directory.trimVideo(path: string, start: number, stop: number): Promise<string>
Trims the video at the specified path from the start time to the stop time.
path
: Path to the input video file.start
: Start time in seconds.stop
: End time in seconds.Returns a promise that resolves with the path of the trimmed video.
deleteTempFile(path: string): Promise<void>
Deletes a temporary file at the specified path.
path
: Path to the temporary file to be deleted.Returns a promise that resolves when the file is successfully deleted.
Here's a complete example of how to use react-native-video-trimmer-core
along with react-native-video-trimmer-ui
Check (https://www.npmjs.com/package/react-native-video-trimmer-ui):
import { useState, useEffect, useRef } from 'react';
import { View, Button, StyleSheet, Text } from 'react-native';
import VideoTrimmer, {
type VideoTrimmerRef,
} from 'react-native-video-trimmer-ui';
import VideoTrimmerCore from 'react-native-video-trimmer-core';
import RNFS from 'react-native-fs';
const trimmer = new VideoTrimmerCore();
export default function App() {
const [uri, setUri] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const [trimmedUri, setTrimmedUri] = useState<string | null>(null);
const trimmerRef = useRef<VideoTrimmerRef>(null);
useEffect(() => {
const filePath = RNFS.DocumentDirectoryPath + '/sample.mp4';
RNFS.exists(filePath).then((exists) => {
if (exists) {
console.info('file exists');
setUri(filePath);
return;
}
RNFS.downloadFile({
fromUrl:
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
toFile: filePath,
})
.promise.then(() => {
console.info('file downloaded');
setUri(filePath);
})
.catch((err) => {
console.error(err);
setError(err.message);
});
});
return () => {
if (trimmedUri) {
trimmer.deleteTempFile(trimmedUri).catch((err) => {
console.warn('Error deleting temp file:', err);
});
}
};
}, [trimmedUri]);
const onSelected = (start: number, end: number) => {
console.info('start, end', start, end);
};
const trimVideo = () => {
if (!trimmerRef.current) return;
const [start, end] = trimmerRef.current.getSelection();
if (uri) {
trimmer.trimVideo(uri, start, end).then((path) => {
console.info('trimmed url path', path);
setTrimmedUri(path);
});
}
};
return (
<View style={styles.container}>
{trimmedUri ? <Text>Trimmed url: {trimmedUri}</Text> : null}
{uri ? (
<>
<VideoTrimmer
ref={trimmerRef}
source={{ uri }}
onSelected={onSelected}
/>
<View style={styles.buttonContainer}>
<Button onPress={trimVideo} title="Trim" />
</View>
</>
) : (
<View style={styles.downloadContainer}>
<Text style={styles.downloadText}>
{error ? 'Error downloading: ' + error : 'Downloading...'}
</Text>
</View>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingVertical: 50,
backgroundColor: 'black',
},
downloadContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
downloadText: {
color: 'white',
fontSize: 32,
fontWeight: 'bold',
},
buttonContainer: {
alignSelf: 'center',
width: '30%',
},
});
This example demonstrates:
VideoTrimmer
component from react-native-video-trimmer-ui
react-native-video-trimmer-core
This project is licensed under the MIT License - see the LICENSE file for details.
FAQs
Trim videos between start and end using ffmpeg-kit-react-native
The npm package react-native-video-trimmer-core receives a total of 6 weekly downloads. As such, react-native-video-trimmer-core popularity was classified as not popular.
We found that react-native-video-trimmer-core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.
Security News
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.