CameraRoll.saveToCameraRoll saves local videos as static images, even when video extension is .MOV or .MP4. Fails when passing `video` as type

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: macOS Sierra 10.12.6 Node: 6.11.3 Yarn: 1.0.2 npm: 5.3.0 Watchman: 4.9.0 Xcode: Xcode 8.3.3 Build version 8E3004b Android Studio: Not Found

Packages: (wanted => installed) react: 16.0.0-alpha.12 => 16.0.0-alpha.12 react-native: 0.48.4 => 0.48.4

Target Platform: iOS (10.2.1)

Steps to Reproduce

1. Create a new project
2. Use CameraRoll.getPhotos({first: 20,assetType: 'All'}) to retrieve camera roll items, ensure it works properly
3. After selecting an item, try saving a new copy to camera roll using CameraRoll.saveToCameraRoll(item)

Expected Behavior

Photo selected from camera roll would be saved as a new image in camera roll.

Video selected from camera roll would be saved as a new video in camera roll.

Actual Behavior

Videos are saved as a static photo. If ‘video’ type is passed to CameraRoll.saveToCameraRoll(item, type) then the video does not get saved at all. The video I’m trying to save is a .MOV file (assets-library://asset/asset.mov?id=A9479A56-998A-4E4D-92BC-97A9F60E3930&ext=mov)

Photos are saved properly as static images.

Reproducible Demo

I created an Expo Snack: https://snack.expo.io/ryJvCtFoW

The above will grab the latest video from your device and attempt to save it to camera roll. It alerts the original URI as well as the newly generated URI to show that a .MOV will be saved as a .JPG.

[jordangrant]

Hola amigos, was having issues with downloading a video using react-native-fetch-blob, and then saving to Camera Roll. Here’s how I did it.

1. Downloading the video to temporary storage

downloadTheVideo() {
    RNFetchBlob
    .config({
      fileCache : true,
      // by adding this option, the temp files will have a file extension
      appendExt : 'mp4'
    })
    .fetch('GET', this.props.video.url)    //<-- url here was like https://aws.s3.videofile.mp4 for example
    .then((res) => {
      this.setState({path: res.path()});
      this.saveToCameraRoll()
    })
  }

1. Now, the saveToCameraRoll() function I made looks like:

saveToCameraRoll() {
    CameraRoll.saveToCameraRoll(this.state.path).then(Alert.alert('Success', 'Saved to camera roll!'))
  }

Tried a few things, and this is what ended up working for my, so thought I’d share.

[tafty]

@nikhammerellis For the MP4s, I used react-native-fetch-blob to save the MP4 file to the device and then, once the download was complete, passed the file path to saveToCameraRoll with a type of ‘video’.