React Native : Import Resized Images From Photo library

Mostly we need to import resized images for our application for better user experience and crash free application. Resized images are more useful while we are dealing with photo related applications.

Generally its not a good way to use actual image fetched from photo library to your mobile application specially while you are dealing with multiple images. Because while we fetch number of images with actual size provided by image-picker or camera will lead to memory issue and that makes app to crash as memory stack grows. So we need to import resized images on our application specially while dealing with photo library like functionality.

I was fetching same issue of memory with my React Native project. I have tried to used react-native-photos-framework to fetch image reference urls instead of image it self but if I load image with that reference url directly then it will lead to memory issue as I have explain above. So now I need something that will provide me resized image with better quality image. I have tried this code to achieve that but there is issue with photo framework and its won’t work.

RNPhotosFramework.getAssets({
    startIndex: 0,
    endIndex: 100,
    prepareForSizeDisplay: Rect(100,100),
    fetchOptions: {
        sourceTypes: ['userLibrary'],
        sortDescriptors: [{
            key: 'creationDate',
            ascending: true,
        }]
    }
}).then((response) => console.log(response.assets));

Here actually issue with with prepareForSizeDisplay I think its not properly implemented in photo framework.

Finally i come to know that Native Photo Library provide resized functionality and React Native also provide feature of Native code bridging. So I have created Native module for my React Native project to fetch resized image with required size and quality.

Here i have added code for more detail how to achieve this using Photo Library.

PHImageRequestOptions *cropToSquare = [[PHImageRequestOptions alloc] init];

cropToSquare.resizeMode = PHImageRequestOptionsResizeModeExact;

cropToSquare.deliveryMode = PHImageRequestOptionsDeliveryModeOpportunistic;

[cropToSquare setSynchronous:YES];

NSURL *imageurl = [NSURL URLWithString:picsUrls];

PHFetchResult* asset =[PHAsset fetchAssetsWithALAssetURLs:[NSArray arrayWithObjects:imageurl, nil] options:nil];

[[PHImageManager defaultManager] requestImageForAsset:(PHAsset *)[asset objectAtIndex:0] targetSize:retinaSquare contentMode:PHImageContentModeAspectFit                                                options:cropToSquare                                          resultHandler:^(UIImage *fetchedImage, NSDictionary *info) {

NSLog(@”Result Image: %@”,fetchedImage);

NSLog(@”Result Image info: %@”,info);

NSData *imageData = UIImageJPEGRepresentation(fetchedImage,0.65);

NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);

NSTimeInterval timeStamp = [[NSDate date] timeIntervalSince1970];

NSString *filePath = [[paths objectAtIndex:0] stringByAppendingPathComponent:[NSString stringWithFormat:@”%0.0f.jpg”, timeStamp*1000]];

[imageData writeToFile:filePath atomically:YES];

NSLog(@”Local file path : %@”, filePath);

NSURL* fileUrl = [NSURL fileURLWithPath:filePath];

}];

Its help me to convert 5MB plus size image to around 50kb and its save lots of memory of my application so its run very much smooth without getting stuck while loading number of images on my app screen.

Here on GitHub you will find code. For now its done only for iOS but latter i will update for Android too. Hope this will help lots to person who are dealing with images.