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

[keviniamburg]

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.

[mferranti]

Here too. AlsoCameraRoll.saveToCameraRoll saves animated gif like static images.

[tafty]

I've just experienced this issue saving MP4s (I cannot) and the static gif problem too whilst attempting to use CameraRoll in conjunction with the Giphy API.

Is there a known fix or workaround?

EDIT:

My workaround has been to save the file to the device and then save to CameraRoll using the file path.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[nikhammerellis]

+1

[nikhammerellis]

@tafty how did you save to device before saving to cameraroll?

I too am having the static gif issue. I have gifs stored in firebase storage and have them displaying properly in a react native iOS app and in a React CMS for the iOS app.

I am wondering if gifs are considered movies? Because in the CameraRoll Documentation it says this: "On iOS, the tag can be any image URI (including local, remote asset-library and base64 data URIs) or a local video file URI (remote or data URIs are not supported for saving video at this time)."

It's that last bit, "remote or data URIs are not supported for saving video at this time", that I am starting to think is the problem with gifs stored "remotely" on firebase. Appears to only save the first frame of the gif.

[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'.

[nikhammerellis]

@tafty thanks just found react-native-fetch-blob and then you said that. Good stuff. Hopefully works for gifs.

[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()
    })
  }

2. 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.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.