Trouble asking for permission with Expo Image Picker

Question

I am trying to use Expo-image-picker with a react-native application. Here is my code:

 const openCamera = async () => {

  const permissionResult = await ImagePicker.requestCameraPermissionsAsync();

  if (permissionResult.granted === false) {
    alert("You've refused to allow this app to access your photos!");
    return;
  }

  const result = await ImagePicker.launchCameraAsync();

  if (!result.cancelled) {
    uploadImage(result.uri)
  }
}

Every time I try to use it it immediately jumps to the alert without prompting the user to give the camera permission. I've tried several different hooks and they all seem to not work. If anyone has a working example I'd be greatly appreciative.

Answer 1

If you've ever decline the permission, iOS remembers this and you will have to go back into Settings to allow it again. [Settings]->[Privacy]->[Photos], find ExpoGo and allow access.

Or [Settings]->[Expo Go]->[Photos]

The only way I've found to allow you to test that prompt again is to remove Expo Go and reinstall.

By the way, I think your code will immediately launch the Camera and not waiting for the permissionResult. Try this:

    const openCamera = async () => {

    const result = await ImagePicker.requestCameraPermissionsAsync();
    
      if (permissionResult.granted === false) {
        alert("You've refused to allow this app to access your photos!");

      } else {
        const result = await ImagePicker.launchCameraAsync();
    
        if (!result.cancelled) {
          uploadImage(result.uri)
        }

        return result;
      }
    }

Answer 2

UPDATE November 2023, Expo SDK 49

I highly recommend to use useCameraPermissions hook to obtain user's permission and operate with UI accordingly.

import * as ImagePicker from 'expo-image-picker'
import * as Linking from 'expo-linking'
    
const [cameraStatus, requestCameraPermission] = ImagePicker.useCameraPermissions()

const handleCameraPermission = useCallback(async () => {
 if (cameraStatus) {
  if (
    cameraStatus.status === ImagePicker.PermissionStatus.UNDETERMINED ||
    (cameraStatus.status === ImagePicker.PermissionStatus.DENIED && cameraStatus.canAskAgain)
  ) {
    const permission = await requestCameraPermission()
    if (permission.granted) {
      await handleLaunchCamera()
    }
  } else if (cameraStatus.status === ImagePicker.PermissionStatus.DENIED) {
    await Linking.openSettings()
  } else {
    await handleLaunchCamera()
  }
}
}, [cameraStatus, handleLaunchCamera, requestCameraPermission])

  const handleLaunchCamera = useCallback(async () => {
    const result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 1,
      aspect: [3, 4],
    })
    if (!result.canceled) {
      // your success logic using result.assets
    }
  }, [])

return (//any UI element as Button, Pressable or dialog 
that triggers handleCameraPermission() function)

you can check all available API on expo