react-native-photo-view

react-native-photo-view copied to clipboard

The images from asset-library and local image path returned by camera is not being rendered. Works fine with remote images though. Both http and https

Is it working for others?

I have same problem. downgrade to 1.3 works.

I want MWPPhotoBrowser its available after 1.4.0

I guess the problem is brought by MWPPhotoBrowser since 1.3.x didn't use it.

Which native Image viewer does 1.3.x use? I see a lot of problem with MWPPhotoBrowser. It does not render remote images at random. https://github.com/alwx/react-native-photo-view/issues/87

1.3.x use ScrollView from RN. See https://github.com/alwx/react-native-photo-view/commit/9489a513fbacb0e239aa4dc893601f7470363a9a

MWPPhotoBrowser provides pinch to zoom. I would need that.

Does this support local images? or base64?

Local

@srameshr how about base64 images?

I have not tried it.

I've tried it just now, it's not working on base64

Yup, right now it only works with https images. Not local or base64.

I found the bounds (https://github.com/alwx/react-native-photo-view/blob/master/ios/RNPhotoView.m#L176) will be zero for the images with file:// uri (loaded from photo library or taken from camera). This makes the scaled image no size.

I created a PR (#96) for this issue.

@wolfg1969 Could you also look into https://github.com/npomfret/react-native-image-tools/issues/9 and https://github.com/npomfret/react-native-image-tools/issues/4 . I have no idea about objective-c. Sorry for diverging from the topic of this thread.

@srameshr I'm afraid not. I'm not a objective-c expert too.

you have to add them manually in your assets in xcode

@wolfg1969 (cc @srameshr) I still have the issue with URLs like asset-library://asset/... from Camera Roll.

I ditched this library and unsubscribing from this thread.

@kytwb I use react-native-image-picker and it's return file URI works with this library.

RNPhotoView.m

#import <UIKit/UIKit.h> #import <Foundation/Foundation.h> #import <AssetsLibrary/ALAssetsLibrary.h>imatgetemporal #import <AssetsLibrary/ALAsset.h> #import <AssetsLibrary/ALAssetRepresentation.h>

• (void)setSource:(NSDictionary *)source { dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ if ([_source isEqualToDictionary:source]) { return; } NSString *uri = source[@"uri"]; if (!uri) { return; } _source = source; NSURL *imageURL = [NSURL URLWithString:uri];

    if([uri hasPrefix:@"assets-library://"]){
  
        NSURL *asseturl = [NSURL URLWithString:uri];
        __block ALAssetsLibrary* assetslibrary = [[ALAssetsLibrary alloc] init];
        [assetslibrary assetForURL:asseturl
                       resultBlock:^(ALAsset *asset) {
                           __block ALAssetRepresentation * present = [asset defaultRepresentation];
                           __block CGImageRef imgRef = [present fullResolutionImage];
                           __block UIImage *img = [UIImage imageWithCGImage:imgRef
                                                                      scale:present.scale
                                                                orientation:(UIImageOrientation)present.orientation];
                           [self setImage:img];
                       }
                      failureBlock:^(NSError *error) {
                      }];
  
  
                        return;
  

// // UIImage *image = RCTImageFromLocalAssetURL(imageURL); // if (image) { // if local image // // [self setImage:image]; // return; // } }

    NSURLRequest *request = [[NSURLRequest alloc] initWithURL:imageURL];

For me local images on my device only work when I have remote js debugging switched on. If it is off I only see a black screen. None of the onLoad events is triggered then.

RN: 0.49.3 react-native-photo-view: 1.5.2

I solved this in the iOS sim by prepending file:// to my uri, although I haven't confirmed on device yet though.

The uri returned from the image picker was

/Users/yourUser/Library/Developer/CoreSimulator/Devices/32541D85-B1FD-441F-BB2B-B09850500F6C/data/Containers/Data/Application/DF622A86-5E4B-49C5-8DB5-0141BA339314/Documents/images/E136D41D-47E0-4264-AC79-E0D2A6210F49.jpg

So I changed my source to:

uri: 'file:///Users/yourUser/Library/Developer/CoreSimulator/Devices/32541D85-B1FD-441F-BB2B-B09850500F6C/data/Containers/Data/Application/DF622A86-5E4B-49C5-8DB5-0141BA339314/Documents/images/E136D41D-47E0-4264-AC79-E0D2A6210F49.jpg'

I'm still having the issue in 1.5.2, and it doesn't help to prepend file:// to the uri. Anyone with a solution?

@srameshr what library did you use instead?

I built my own

Same problem here.

@srameshr Could you show your implementation or put it on GitHub? I have the same problem when getting the images using RN CameraRoll.

@ManuBu This is my little implementation to fix the current issue - https://github.com/Warecorp/react-native-photo-view/commit/7a77dd5f519d1bf408111a9a2d21216a0d48e8d0

I didn't implement a common approach because I am needed to show only local images (from document dir).

I have the same problem. But I have solved this issue. You may need add width and height to <Image /> style.

{ this.state.image ? <Image style={{height: 100, width: 100}} source={{uri: this.state.image}} /> : null }