react-native-video-trim-picker

A React Native module that allows you to use native UI to select video from the device library and trim it.

Install

npm install https://github.com/MYFC2015/react-native-video-trim-picker/tarball/master --save

Automatically link the libarary:

rnpm link react-native-video-trim-picker

iOS - Manual linking (do not need this if rnpm link ... is used)

1. In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>
2. Go to node_modules ➜ react-native-video-trim-picker ➜ ios ➜ select RNVideoTrimPicker.xcodeproj
3. Add RNVideoTrimPicker.a to Build Phases -> Link Binary With Libraries
4. Compile and have fun

Android - Manual linking (do not need this if rnpm link ... is used)

// file: android/settings.gradle
...

include ':react-native-video-trim-picker'
project(':react-native-video-trim-picker').projectDir = new File(settingsDir, '../node_modules/react-native-video-trim-picker/android')

// file: android/app/build.gradle
...

dependencies {
    ...
    compile project(':react-native-video-trim-picker')
}

<!-- file: android/app/src/main/AndroidManifest.xml -->
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.myApp">

    <uses-permission android:name="android.permission.INTERNET" />

    <!-- add following permissions -->
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-feature android:name="android.hardware.camera" android:required="false"/>
    <uses-feature android:name="android.hardware.camera.autofocus" android:required="false"/>
    <!-- -->
    ...

// file: android/app/src/main/java/com/<...>/MainApplication.java
...

import com.myfc.videotrimpicker.VideoTrimPickerPackage; // <-- add this import

public class MainApplication extends Application implements ReactApplication {
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new VideoTrimPickerPackage() // <-- add this line
        );
    }
...
}

Usage

var Platform = require('react-native').Platform;
var VideoTrimPicker = require('react-native-video-trim-picker');

// More info on all the options is below in the README...just some common use cases shown here
var options = {
  title: 'Pick and Trim Video',
  customButtons: [
    {name: 'trim', title: 'Trim Video Now'},
  ],
  storageOptions: {
    skipBackup: true,
    path: 'images'
  },
  customStyles: {
  	pickvideo: { height: 35 },
  	trimvideo: { alignSelf: 'center' },
  	containerTrimmerBottomView:{ flexDirection:'column'},
  	sliderValuesView:{ justifyContent:'space-between'},
  	sliderValuesText1: { fontSize: 18,  color: 'black'},
  	sliderValuesText2: { fontSize: 18,  color: 'black'},
  	backgroundView: { flexDirection:'column'	},
  	backgroundViewTrimmer: {	  alignItems:'center' 	}
  }
};

/**
 * The first arg is the options object for customization (it can also be null or omitted for default options),
 * The second arg is the callback which sends object: response (more info below in README)
 */
VideoTrimPicker.showVideoTrimPicker(options, (response) => {
  console.log('Response = ', response);

  if (response.didCancel) {
    console.log('User cancelled video picker');
  }
  else if (response.error) {
    console.log('VideoTrimPicker Error: ', response.error);
  }
  else if (response.customButton) {
    console.log('User tapped custom button: ', response.customButton);
  }
  else {
    // You can display the video using either data...
    const source = {uri: 'data:video/mp4;base64,' + response.data, isStatic: true};
    // or a reference to the platform specific asset location
    if (Platform.OS === 'ios') {
      const source = {uri: response.uri.replace('file://', ''), isStatic: true};
    } else {
      const source = {uri: response.uri, isStatic: true};
    }

    this.setState({
      myTrimmedVideoSource: source
    });
  }
});

Then later, if you want to display this video in your render() method:

<Video source={this.state.myTrimmedVideoSource} />

Options

option	iOS	Android	Info
title	OK	OK	Specify null or empty string to remove the title
cancelButtonTitle	OK	OK
customButtons	OK	OK	An array containing objects with the name and title of buttons
videoQuality	OK	OK	'low', 'medium', or 'high' on iOS, 'low' or 'high' on Android
durationLimit	OK	OK	Max video trimming time, in seconds
noData	OK	OK	If true, disables the base64 data field from being generated (greatly improves performance on large videos)
storageOptions	OK	OK	If this key is provided, the video will get saved in the Documents directory on iOS, and the Videos directory on Android (rather than a temporary directory)
storageOptions.path	OK	-	If set, will save video at /Documents/[path] rather than the root
storageOptions.cameraRoll	OK	-	If true, the trimmed video will be saved to the iOS Camera roll.

The Response Object

key	iOS	Android	Description
didCancel	OK	OK	Informs you if the user cancelled the process
error	OK	OK	Contains an error message, if there is one
data	OK	OK	The base64 encoded video data
uri	OK	OK	The uri to the local file asset on the device
origURL	OK	-	The URL of the original asset in library, if it exists
width	OK	OK	Video dimensions
height	OK	OK	Video dimensions
fileSize	OK	OK	The file size
type	-	OK	The file type
fileName	-	OK	The file name
path	-	OK	The file path