Trim a video

This method allows you to trim a video by specifying the file uri, start time, and end time. It provides the ability to extract a specific portion of a video.

Parameters

• fileUri (string): The file uri of the video you want to trim.

• startTime (number): The start time (in seconds) from which you want to begin trimming the video.

• endTime (number): The end time (in seconds) at which you want to finish trimming the video.

• Returns a Promise:

  • onfulfilled: the trimmed videos url
  • onrejected: the error message

Supported Formats

• Android: Currently, We support the .mp4,.webm and .3gp videos formats. But, we are looking ahead to support more video formats.

Usage

import React, { useState } from 'react';
import {
  View,
  Button,
  Alert,
  StyleSheet,
  Dimensions,
  ActivityIndicator,
  Text,
} from 'react-native';
import { trimVideo } from 'rnvideoeditor';
import { launchImageLibrary } from 'react-native-image-picker';

const VideoTrimmer = () => {
  const [isProcessing, setIsProcessing] = useState(false);

  const trimAsync = async (fileUri) => {
    try {
      //Here,you can show a UI where user can decide which portion to trim
      const startTime = 2_000;
      const endTime = 7_000;

      const trimmedFileUri = await trimVideo(fileUri, startTime, endTime);
      console.log('Trimmed File URI', trimmedFileUri);

      Alert.alert('Video Trimmed', trimmedFileUri);
    } catch (error) {
      console.log('Error:', error);
      Alert.alert('Failed to Trim', JSON.stringify(error.message));
    } finally {
      setIsProcessing(false);
    }
  };

  const handlePickAndTrim = async () => {
    const result = await launchImageLibrary({
      mediaType: 'video',
    });

    if (result.assets) {
      const fileUri = result.assets[0]?.uri;
      if (!fileUri) return;

      setIsProcessing(true);

      trimAsync(fileUri);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.processingText}>
        {isProcessing && (
          <>
            <ActivityIndicator size="large" color="#0000ff" />
            <Text>Trimming your video...</Text>
          </>
        )}
      </Text>
      <Button
        title="Pick Video And Trim"
        onPress={handlePickAndTrim}
        disabled={isProcessing}
      />
      {isProcessing && <ActivityIndicator size="large" color="#0000ff" />}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  processingText: {
    marginBottom: 10,
  },
});

export default VideoTrimmer;