Unable to use react-native-image-picker on iOS

Question

I'm using react-native-image-picker to select and upload images on server. It works great on android, but throws error on iOS. The npm link have provided a note that "On iOS, don't assume that the absolute uri returned will persist. See #107" what does it means? Will this library work on iOS? I'm trying with iOS simulator, it displays image properly but when I'm trying to upload on server using axios, it throws error "Missing request token for request: <NSURLRequest: 0x60000253e5a0> { URL: file://" like here Is there any other alternative react-native library to upload images with iOS and android?

Answer 1

This is a internal error. Try it.

Go to node_modules/react-native/Image/RCTLocalAssetImageLoader.mm and change this lines to:

 - (RCTImageLoaderCancellationBlock)loadImageForURL:(NSURL *)imageURL
                                           size:(CGSize)size
                                          scale:(CGFloat)scale
                                     resizeMode:(RCTResizeMode)resizeMode
                                progressHandler:(RCTImageLoaderProgressBlock)progressHandler
                             partialLoadHandler:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
                              completionHandler:(RCTImageLoaderCompletionBlock)completionHandler
 {
   __block auto cancelled = std::make_shared<std::atomic<bool>>(false);
   RCTExecuteOnMainQueue(^{
     if (cancelled->load()) {
       return;
     }

     UIImage *image = RCTImageFromLocalAssetURL(imageURL);
     if (image) {
       if (progressHandler) {
         progressHandler(1, 1);
       }
       completionHandler(nil, image);
     } else {
       NSString *message = [NSString stringWithFormat:@"Could not find image %@", imageURL];
       RCTLogWarn(@"%@", message);
       completionHandler(RCTErrorWithMessage(message), nil);
     }
   });

   return ^{
     cancelled->store(true);
   };
 }

Answer 2

If you are trying to upload a file to a server, react-native-image-picker & react-native-image-crop-picker will not work on iOS simulators. It will throw:

Missing request token for request: <NSURLRequest: 0x60000253e5a0> { URL: file://' error.

It works perfectly fine on real devices both android & ios. Just use a filename like this.

ImagePicker.openPicker({
  width: 300,
  height: 400,
  cropping: true,
  compressImageMaxHeight: 300,
  compressImageMaxWidth: 400,
  compressImageQuality: 0.5,
  mediaType: 'photo',
}).then(image => {
 
let filename = image.path.split('/').pop();
  
  let formData = new FormData();

  formData.append('file', {
    name: Platform.OS === 'android' ? filename : image.filename,
    type: image.mime,
    uri: image.path, 
  });
}