React-native-image-picker: [iOS] Permission requested after selecting image from camera roll

[winkelsdorf]

Bug

I am currently investigating a bug on iOS. If using the showImagePicker alert and selecting an image from the camera roll, a permission dialog is shown after the image is selected and already returned.

Environment info

Using latest library release with RN 0.61.5. iOS 13.

React native info output:

System:
    OS: macOS 10.15.2
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    Memory: 1018.57 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.1.0 - ~/.nvm/versions/node/v13.1.0/bin/node
    Yarn: 1.21.1 - ~/.nvm/versions/node/v13.1.0/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v13.1.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.1, 29.0.2
      System Images: android-19 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.3/11C29 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-rename: 2.4.1
    react-native-version: 3.2.0

Library version: 1.1.0

Steps To Reproduce

1. Present alert with with .showImagePicker()
2. Select to choose from library
3. Library opens
4. Select image
5. Image returned
6. System permission dialog for camera roll shown

Describe what you expected to happen:

Everything except step 6.

Note

The behavior of getting images from the camera roll has changed iirc with iOS 11. There is no need to ask for permission, as the camera roll dialog is provided by the system. If the user selects no image or cancels, nothing is returned to the caller.

[niloufarMakhzani]

Same issue on iOS 13.3, Is there any way to ask for the permission before image selection??

[MrLaibin]

ImagePickerManager.m
line 463
[fileManager copyItemAtURL:videoURL toURL:videoDestinationURL error:&error];
The perfect solution。

[winkelsdorf]

Still happening with https://github.com/react-native-community/react-native-image-picker/releases/tag/v2.0.0

[akiladevinda]

@winkelsdorf Any solutions for this issue ?

[Johan-dutoit]

PR's are welcome

[winkelsdorf]

@akiladevinda No, sorry. Just noticed it during testing.

Checking is done in this line:
https://github.com/react-native-community/react-native-image-picker/blob/4e699d3a59ce849d42e43576b91cab73c483cd1e/ios/ImagePickerManager.m#L207

Might be related to a later call to a method of PHAsset for which some actions require permissions.

@Johan-dutoit Glad to hear that. I just saw that this was already mentioned in https://github.com/react-native-community/react-native-image-picker/pull/1159. Trying to look what the debugger says.. _Edit: Others already did this._

Edit: And more extensively here https://github.com/react-native-community/react-native-image-picker/pull/819.

Edit2: From mentioned discussion, this line is problematic: https://github.com/react-native-community/react-native-image-picker/blob/4e699d3a59ce849d42e43576b91cab73c483cd1e/ios/ImagePickerManager.m#L304

But there is no easy fix, as Apple mentioned asset library to be deprecated a long time ago. This would likely need a full rewrite of the iOS side of react-native-image-picker which is out of my scope :(

The Assets Library framework is deprecated in iOS 8.0 and later, replaced by the Photos framework.

fwiw that was already mentioned as an issue for RN itself back in 2015: https://github.com/facebook/react-native/issues/1579 :/

[Johan-dutoit]

Should be fixed in the latest v2.1.0. Thanks @winkelsdorf

[akiladevinda]

@Johan-dutoit what is the latest version we can install ?

[Johan-dutoit]

@akiladevinda v2.1.0?

[akiladevinda]

@Johan-dutoit still I'm facing the issue.. Now once i select the image from the camera roll it returns null

Edit -

I think the issue with file name - Once I use camera roll fileName return always null

[akiladevinda]

v2.1.0 fileName null temporary fix

Hi I found temporary fix for fileName returns null when picking images from camera roll.

 if (
            typeof response.fileName === 'undefined' ||
            response.fileName === null
          ) {
         // on iOS, using camera returns undefined fileName and camera roll returns  null. This fixes that issue, so API can work.
            var getFilename = response.uri.split('/');
            imgName = getFilename[getFilename.length - 1];
            this.setState({
              avatarSource: source,
              image_name: imgName,
              image_uri: response.uri,
              image_type: response.type,
            });
          } else {
            this.setState({
              avatarSource: source,
              image_name: imageName,
              image_uri: response.uri,
              image_type: response.type,
            });
          }

[Johan-dutoit]

Thanks @akiladevinda , can you throw that into a PR?

[winkelsdorf]

Thanks @Johan-dutoit and @akiladevinda for the quick help! ~Waiting for new PR by @akiladevinda.~

[winkelsdorf]

@Johan-dutoit Thanks for fixing, working correctly with v2.2.0 🎉

[vgm8]

hey @winkelsdorf and @Johan-dutoit I was having this issue on ios 13.2.2 iphone 8 and after update to the lastest version v2.2.1 the request permissions is not showing anymore. Not even after selecting the image. Can you guys help me? Thanks in advance.

[winkelsdorf]

@vgm8 That's correct, the permission request is not needed for the camera roll anymore. Apple changed the behavior 🎉

[Ravi448]

@winkelsdorf Can you please provide the apple statement supporting your comment? I guess, permission is mandatory for all kind of media. Apple is super-strict for privacy.
Thanks

[winkelsdorf]

@Ravi448 Sure, but let me rephrase my sentence first: The permission request is not needed anymore when picking an image from the camera roll _using Apple's provided system dialog_ (that is UIImagePickerController).

Storing to the camera roll etc of course still requires permission.

This component uses the UIImagePickerController here: https://github.com/react-native-community/react-native-image-picker/blob/5ec8f8d9fee77133a13559f93900971930fa12b7/ios/ImagePickerManager.m#L135

And from Apple's official documentation "Requesting Authorization to Access Photos" on https://developer.apple.com/documentation/photokit/requesting_authorization_to_access_photos we learn (emphasis mine):

Note
When using the UIImagePickerController to bring up the user's photo library, your app doesn't need to request permission explicitly.

Edit: Logically it makes sense if you think about it. The dialog is coming from iOS itself. The user alone decides if he wants to return something to the calling App or not. No need to put an extra layer of authorization in between. Storing to the camera roll is something different, as an App changes data in the global user space.

Hope this helps!

[ayciceksahin]

What about ImagePicker.launchImageLibrary it is still asking permission after chose video from gallery. v2.3.1 ? @Johan-dutoit @winkelsdorf

[winkelsdorf]

@ayciceksahin I am using react-native-image-picker for images only, so I can't say if it works. Sorry! Maybe it needs another fix for video picking, too.

Probably best to open a new issue and reference this one..

[ayciceksahin]

@ayciceksahin I am using react-native-image-picker for images only, so I can't say if it works. Sorry! Maybe it needs another fix for video picking, too.

Probably best to open a new issue and reference this one..

Thanks for your replying.

[winkelsdorf]

@ayciceksahin You're welcome! Sorry that I can't help.

[craigcoles]

@ayciceksahin I am also seeing this issue when selecting a video from the gallery. Is there an issue I can follow for this?

Update: Following #1304 👍

[faraznaqvi99]

v2.1.0 fileName null temporary fix

Hi I found temporary fix for fileName returns null when picking images from camera roll.

 if (
            typeof response.fileName === 'undefined' ||
            response.fileName === null
          ) {
         // on iOS, using camera returns undefined fileName and camera roll returns  null. This fixes that issue, so API can work.
            var getFilename = response.uri.split('/');
            imgName = getFilename[getFilename.length - 1];
            this.setState({
              avatarSource: source,
              image_name: imgName,
              image_uri: response.uri,
              image_type: response.type,
            });
          } else {
            this.setState({
              avatarSource: source,
              image_name: imageName,
              image_uri: response.uri,
              image_type: response.type,
            });
          }

Thanks for the fix mate!

[elizabethlofredo]

This is still happening to me with v2.3.1, any news?

[gamage1995]

This is still happening to me with v2.3.1, any news?

same here