support load image from local document directory.

[phamhieu]

Add support to load image from local document directory. Currently, it will show error when loading from document directory

Unrecognized tag protocol: file:///var/mobile/Containers

[facebook-github-bot]

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at cla@fb.com. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[vjeux]

Can you explain what the use case is? Are you saving images from the internet and you want to be able to read them?

[phamhieu]

When react native out, I tried to create a camera app like Snapchat to test the native UI support.

It goes pretty well until I need to load the saved image from app document to show user. The Image class supports local image from bundle but not from document folder where my capture image saved.

Good framework! Waiting for Android feature. Thanks

[brentvatne]

@phamhieu - would this work for you? https://github.com/facebook/react-native/blob/master/Libraries/Image/RCTImageLoader.m#L60-L72

[phamhieu]

@brentvatne Correct me if i'm wrong but I believe that block of code is used to support PhotoKit.

My app just basic captures an image, adds text watermark and saves image in app document folder. I just want to load the image to show user as a preview before share/save to library...

[vjeux]

I'm unsure but isn't the CameraRoll class doing what you want?
http://facebook.github.io/react-native/docs/cameraroll.html#content

[phamhieu]

@vjeux But the image not saved in camera roll yet.

my app flow:

1. camera take image
2. image saved in app document folder
3. user edit with text watermark. (image loaded from app document folder)
4. Ok go step 5 OR retry step 3
5. share image/ save image to camera roll/ email image...

So basic I need the ability to load image from app document on step 3 to show user so that he/she can edit it. With the current Image class, I cannot. Thanks

[tadeuzagallo]

UIImage *image = [RCTConvert UIImage:imageTag];
if (!image) { ... }
callback(nil, image);

[tadeuzagallo]

Sounds like a valid use case to me...

[tadeuzagallo]

I knew I had seen that before, it's so valid that it already works! ;)
Just remove the file://:

<Image source={{uri: '/var/mobile/Containers/...'}} ... />

[phamhieu]

I did try that before. Just try it again but i receive error:

2015-04-04 10:22:44.658 SnapChatProject[664:35603] >
  RCTJSLog> "data = /var/mobile/Containers/Data/Application/727553BC-2B55-4376-A31C-47E93A20009A/Documents/Snap_Chat_Image.png"
2015-04-04 10:22:44.707 SnapChatProject[664:35571] >
  [RCTLog][tid:0x16d86fd0][RCTStaticImageManager.m:55]>Unrecognized tag protocol: /var/mobile/Containers/Data/Application/727553BC-2B55-4376-A31C-47E93A20009A/Documents/Snap_Chat_Image.png

my code to load image:

return(
      <Image source={{uri: this.state.takenPhotoURI}}
             style={styles.thumbnail}> 
        {inputText}
        {text}
      </Image>
    );

[brentvatne]

@phamhieu - try adding isStatic: true to the uri object

[phamhieu]

@brentvatne can you give me an example. It'm not very sure how to add isStatic: true to the uri

FYI: this.state.takenPhotoURI is a string.

[brentvatne]

@phamhieu - <Image source={{uri: '/var/mobile/Containers/...', isStatic: true}} ... />

[brentvatne]

@phamhieu - relevant code: https://github.com/facebook/react-native/blob/master/Libraries/Image/Image.ios.js#L111-L116

[phamhieu]

@brendanv Yes, it works. Confirm that adding isStatic: true will help load the image. Thank you.

[brentvatne]

💥 fantastic, any chance you'll open source your app @phamhieu? I'd love to see it

[phamhieu]

:) you can take a look here. https://github.com/phamhieu/ReactNativeExample

I will need some more time to clean the code. But anything should be there.

[brentvatne]

@phamhieu - thanks! I'll check that out tomorrow. I suppose we can close this issue now?