Cannot read property 'requestMediaLibraryPermissionsAsync' of undefined

Question

I'm using expo-image-picker in my React Native application developed with Expo. When trying to access the requestMediaLibraryPermissionsAsync function, I'm getting the following error:

Cannot read property 'requestMediaLibraryPermissionsAsync' of undefined

Relevant code:

const pickImage = async () => {
    const {status} = await ImagePicker.requestMediaLibraryPermissionsAsync()

    if (status !== 'granted') {
      alert('Sorry, we need camera roll permissions to make this work!')
      return
    }

    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    })

    if (!result.cancelled) {
      const source = {uri: result.uri}
      uploadImage(source.uri)
    }
}

I've made sure to import ImagePicker:

import * as ImagePicker from 'expo-image-picker';

Project config:

expo-env-info 1.0.5 environment info:
    System:
      OS: macOS 13.5.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.17.1 - /usr/local/bin/node
      npm: 8.19.4 - ~/node_modules/.bin/npm
      Watchman: 2023.09.04.00 - /opt/homebrew/bin/watchman
    IDEs:
      Android Studio: 2022.3 AI-223.8836.35.2231.10671973
      Xcode: /undefined - /usr/bin/xcodebuild
    npmPackages:
      expo: ~49.0.8 => 49.0.9 
      metro: ^0.79.0 => 0.79.0 
      react: 18.2.0 => 18.2.0 
      react-native: 0.72.4 => 0.72.4 
    npmGlobalPackages:
      eas-cli: 5.2.0
      expo-cli: 6.3.10
    Expo Workflow: managed

What I've tried so far:

• Checked if expo-image-picker is correctly installed.
• Ensured that I'm using the correct import statement for ImagePicker.
• Restarted the Expo client and cleared the cache.

What I'm trying to do:

• Ensure that when I click on the pen icon on the profile image, it'll open my phone media library to upload a new picture.

Any ideas on what might be causing this issue and how to solve it?

Answer 1

I had the same problem, i solved it by dynamic imports like:

import { launchImageLibraryAsync, useMediaLibraryPermissions, useCameraPermissions, MediaTypeOptions, } from "expo-image-picker";