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