React-native: [iOS] Image component unable to load iCloud photos via 'assets-library://' stored in cloud

[ronaldheft]

Using the Image component with a URI pointing to an assets-library:// source can result in a failure to load the image with iCloud Photo Library enabled.

If the source image is not available on the device, (i.e. currently stored in the cloud and the device only has metadata information available), the Image component will render blank and trigger the onError handler. Viewing the full resolution photo in an iCloud Photo Library aware application (such as Photos) will allow the image to load, as the device will now have the image available.

I suspect the larger issue is React Native using the deprecated ALAssetsLibrary over the newer iCloud Photo Library-aware Photos Frameworks available in iOS 8 and later. Migrating to the newer framework will allow the Photos Framework to handle the behind-the-scenes work of fetching missing photos from iCloud.

Occurs in React Native Version: 0.29.2

[ronaldheft]

Dug through the source code more. This is already supported. Using the ph://{assetIdentifier} URI scheme will use the Photos Framework. Hope this helps someone else in the future.

[samuelkraft]

@ronaldheft Did you manage to get CameraRoll working with iCloud photos?

[ronaldheft]

@samuelkraft Yes, I ended writing some native iOS code to fill in the gaps where React Native's CameraRoll doesn't support iCloud Photo Library yet. Here is my solution with a common API for iOS and Android:

https://gist.github.com/ronaldheft/d244797e5ce2a8d954cd64fd494d120e

[samuelkraft]

@ronaldheft Thanks a lot, I will try it. Any chance you can make this a PR?

Edit: Works great, although I got hit by #7081 when trying to upload the images. Do you have the same issue?

[ronaldheft]

@samuelkraft While I am uploading the photos to a server, at least in my limited testing so far, I have not been hit the issue. My upload code has retriability with a slight delay, so perhaps that code is helping me recover from photos not downloaded to the phone. Are you using FormData for uploading?

However, what I have seen is occasionally CameraRoll assets fail to display via the Image component. It's perplexed me, because sometimes it's happening with photos that were just placed in the CameraRoll via the camera or displayed on another page at a different size immediately before.

I've suspected it might have something to do with iCloud Photos, but I haven't had a chance to fully debug yet. I'm wrapping development on this project in the next few weeks and I've been planning to debug that issue during our user testing phase, before we submit to the App Store.

I've noticed the past few RN releases have included image fixes, and I've been kind of hoping someone beats me to resolving the issue, haha. I do not expect to have time to submit a full PR for iCloud Photo Library via CameraRoll, as the full solution will require more time than the quick hack I put together, but if I find any issue with Image display, I will definitely contribute my fixes.

Let me know if you're able to confirm FormData has a bug with iCloud Photo Library, and if it also traces back to Image display. I don't know what your project timeline is, but in a few weeks I'd be happy to work with you to knock out these Image annoyances.

[samuelkraft]

@ronaldheft I did notice the same issue with the image component. I am fetching an iCloud image and displaying it with ph://{assetIdentifier} but on the next screen it won't show up at all - even if the code is the same. I think you're right about it having to do with iCloud photos..

We're using Relay for uploading - but if the image hasn't downloaded fully the server will receive empty bytes as @gre in #7081

Will continue to debug this, although not knowing Obj-C makes it pretty hard :(

[ronaldheft]

@samuelkraft I submitted PR #9530 to resolve the iCloud downloading issue.

If you would like to use the fix immediately, I cherry-picked the fix into RN v0.31 here: https://github.com/thesocialstation/react-native/tree/0.31-stable

You can use "react-native": "thesocialstation/react-native#0.31-stable" in your package.json.

[ronaldheft]

I forgot to mention, let me know if you see any further issues after installing the fix. I've only seen the issue intermittently, so additional feedback is helpful.

[gre]

@ronaldheft woo, cool! such a simple fix.
are you sure it works correctly even if you don't call requestImageDataForAsset ? I remember I had to do this to force images to download, but maybe just the networkAccessAllowed part was doing to trick?! ( https://github.com/facebook/react-native/issues/7081 )

[ronaldheft]

@gre Check line 93: https://github.com/thesocialstation/react-native/blob/3291c504bc0aed1df47be823b5a68f3eaa5dd388/Libraries/CameraRoll/RCTPhotoLibraryImageLoader.m#L93

The setting does gets passed into requestImageForAsset, which is iCloud aware. The class already had progress handling implemented, so it will be treated similarly to downloading a file from the web. 😄

[samuelkraft]

@ronaldheft Wow great fix! 👍

[gre]

awesome. good job @ronaldheft

[samuelkraft]

@ronaldheft I think the issue with images sometimes not showing up via the Image component on another page while showing on the first is because of the size differences. RN automatically picks the best size image which means that if the image on screen 2 is bigger than the one on screen 1 it might choose another size and download it again. If I change the image size on screen 2 to be the same as screen 1 it shows up immediately.

[ronaldheft]

@samuelkraft Yeah, I agree that would be the cause. Are you still seeing blank images / failed uploads after making the changes I highlighted above? We recently started user testing and so far I haven't received any reports of missing or blank images.

[samuelkraft]

@ronaldheft Nope everything seems to work after the changes!

[olofd]

I'm working on a library called react-native-photos-framework that can access assets from local camera-roll and iCloud using Apples Photos-framework. Its starting to take form and will be able to do most things you can do with Apples native API's. This includes: Loading images from iCloud (Custom RN-Image-Loader), Loading albums and collections from iCloud, Creating Albums, Deleting and saving assets in albums etc.

I'm also implementing more low-lever features such as change-detection in asset-collections. And caching for large number of assets. Check it out if your interested.