I am currently working on a small app and I want load images from camera roll into the app. I've build a ponent to do so with the help of the Expo Image Picker at its documentation. Sadly, I always get the following warning in my expo client and I am not able to pick any images from the camera roll. It just stays as it is, when I click the button to select them.
My code:
import React, {useEffect, useState} from 'react';
import { View, Image, TouchableOpacity, PermissionsAndroid, Alert, Platform, StyleSheet } from 'react-native';
import * as Permissions from 'expo-permissions';
import ImagePicker from 'expo-image-picker';
import { MaterialIcons } from '@expo/vector-icons'
export default function ImageChooser() {
const [imageSource, setImageSource] = useState([]);
getPermissionAsync = async () => {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
};
useEffect(() => {
getPermissionAsync();
}, []);
_getPhotoLibrary = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
allowsEditing: true,
aspect: [4, 3]
});
if (!result.cancelled) {
setImageSource({ image: result.uri });
}
}
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button} onPress={() => _getPhotoLibrary()}>
{!imageSource && <MaterialIcons name="add-a-photo" style={styles.icon} size={36} />}
{/* {imageSource && <Image source={{uri:imageSource}} style={styles.image} />} */}
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
container: {
paddingLeft: 20,
paddingVertical: 10
},
button: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
width: 200,
height: 150,
borderWidth: 1,
borderColor: '#C6C6C8',
borderRadius: 5,
backgroundColor: '#fff'
},
image: {
width: 200,
height: 150
},
icon: {
color: '#C6C6C8'
}
})
The warning I receive:
[Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_expoImagePicker.default.launchImageLibraryAsync')]
* ponents/ImageChooser.js:23:23 in _getPhotoLibrary
- node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
- node_modules/regenerator-runtime/runtime.js:293:29 in invoke
- node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
- node_modules/regenerator-runtime/runtime.js:154:27 in invoke
- node_modules/regenerator-runtime/runtime.js:189:16 in PromiseImpl$argument_0
- node_modules/react-native/node_modules/promise/setimmediate/core.js:45:6 in tryCallTwo
- node_modules/react-native/node_modules/promise/setimmediate/core.js:200:22 in doResolve
- node_modules/react-native/node_modules/promise/setimmediate/core.js:66:11 in Promise
- node_modules/regenerator-runtime/runtime.js:188:15 in callInvokeWithMethodAndArg
- node_modules/regenerator-runtime/runtime.js:211:38 in enqueue
- node_modules/regenerator-runtime/runtime.js:238:8 in exports.async
* ponents/ImageChooser.js:23:23 in _getPhotoLibrary
* ponents/ImageChooser.js:36:61 in TouchableOpacity.props.onPress
- node_modules/react-native/Libraries/Pressability/Pressability.js:691:17 in _performTransitionSideEffects
- node_modules/react-native/Libraries/Pressability/Pressability.js:628:6 in _receiveSignal
- node_modules/react-native/Libraries/Pressability/Pressability.js:524:8 in responderEventHandlers.onResponderRelease
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:265:4 in invokeGuardedCallbackImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:476:2 in invokeGuardedCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:500:2 in invokeGuardedCallbackAndCatchFirstError
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:597:41 in executeDispatch
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:621:19 in executeDispatchesInOrder
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2521:28 in executeDispatchesAndRelease
* [native code]:null in forEach
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:836:4 in forEachAccumulated
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2546:20 in runEventsInBatch
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2702:18 in runExtractedPluginEventsInBatch
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2639:35 in batchedUpdates$argument_0
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:17712:13 in batchedUpdates$1
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2492:29 in batchedUpdates
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2638:16 in _receiveRootNodeIDEvent
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2767:27 in receiveTouches
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:416:4 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:109:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
I am currently working on a small app and I want load images from camera roll into the app. I've build a ponent to do so with the help of the Expo Image Picker at its documentation. Sadly, I always get the following warning in my expo client and I am not able to pick any images from the camera roll. It just stays as it is, when I click the button to select them.
My code:
import React, {useEffect, useState} from 'react';
import { View, Image, TouchableOpacity, PermissionsAndroid, Alert, Platform, StyleSheet } from 'react-native';
import * as Permissions from 'expo-permissions';
import ImagePicker from 'expo-image-picker';
import { MaterialIcons } from '@expo/vector-icons'
export default function ImageChooser() {
const [imageSource, setImageSource] = useState([]);
getPermissionAsync = async () => {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
if (status !== 'granted') {
alert('Sorry, we need camera roll permissions to make this work!');
}
};
useEffect(() => {
getPermissionAsync();
}, []);
_getPhotoLibrary = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
allowsEditing: true,
aspect: [4, 3]
});
if (!result.cancelled) {
setImageSource({ image: result.uri });
}
}
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button} onPress={() => _getPhotoLibrary()}>
{!imageSource && <MaterialIcons name="add-a-photo" style={styles.icon} size={36} />}
{/* {imageSource && <Image source={{uri:imageSource}} style={styles.image} />} */}
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
container: {
paddingLeft: 20,
paddingVertical: 10
},
button: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
width: 200,
height: 150,
borderWidth: 1,
borderColor: '#C6C6C8',
borderRadius: 5,
backgroundColor: '#fff'
},
image: {
width: 200,
height: 150
},
icon: {
color: '#C6C6C8'
}
})
The warning I receive:
[Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_expoImagePicker.default.launchImageLibraryAsync')]
* ponents/ImageChooser.js:23:23 in _getPhotoLibrary
- node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
- node_modules/regenerator-runtime/runtime.js:293:29 in invoke
- node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
- node_modules/regenerator-runtime/runtime.js:154:27 in invoke
- node_modules/regenerator-runtime/runtime.js:189:16 in PromiseImpl$argument_0
- node_modules/react-native/node_modules/promise/setimmediate/core.js:45:6 in tryCallTwo
- node_modules/react-native/node_modules/promise/setimmediate/core.js:200:22 in doResolve
- node_modules/react-native/node_modules/promise/setimmediate/core.js:66:11 in Promise
- node_modules/regenerator-runtime/runtime.js:188:15 in callInvokeWithMethodAndArg
- node_modules/regenerator-runtime/runtime.js:211:38 in enqueue
- node_modules/regenerator-runtime/runtime.js:238:8 in exports.async
* ponents/ImageChooser.js:23:23 in _getPhotoLibrary
* ponents/ImageChooser.js:36:61 in TouchableOpacity.props.onPress
- node_modules/react-native/Libraries/Pressability/Pressability.js:691:17 in _performTransitionSideEffects
- node_modules/react-native/Libraries/Pressability/Pressability.js:628:6 in _receiveSignal
- node_modules/react-native/Libraries/Pressability/Pressability.js:524:8 in responderEventHandlers.onResponderRelease
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:265:4 in invokeGuardedCallbackImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:476:2 in invokeGuardedCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:500:2 in invokeGuardedCallbackAndCatchFirstError
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:597:41 in executeDispatch
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:621:19 in executeDispatchesInOrder
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2521:28 in executeDispatchesAndRelease
* [native code]:null in forEach
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:836:4 in forEachAccumulated
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2546:20 in runEventsInBatch
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2702:18 in runExtractedPluginEventsInBatch
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2639:35 in batchedUpdates$argument_0
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:17712:13 in batchedUpdates$1
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2492:29 in batchedUpdates
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2638:16 in _receiveRootNodeIDEvent
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2767:27 in receiveTouches
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:416:4 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:109:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
4 Answers
Reset to default 5You are importing the ImagePicker incorrectly,
use import * as ImagePicker from 'expo-image-picker';
Here is the reference documentation: https://docs.expo.io/versions/latest/sdk/imagepicker/
Expo-image-picker needs a plugin to get access to native code.
Make your you have included this in app.json. Expo-image-picker docs
Also don't forget to rebuild app.
{
"expo": {
"plugins": [
[
"expo-image-picker",
{
"photosPermission": "The app accesses your photos to let you share them with your friends."
}
]
]
}
}
Add "expo-image-picker" array to plgins array, in your app.json (app configuration file). To learn more about app.json, read: https://docs.expo.dev/versions/v46.0.0/config/app/
You might need to check your EAS build in case there were issues there. It seems like the Native Module is always undefined, so could be a build issue
Try running eas build:list and navigating to the most recent build you're getting the error for. Then check the build pipeline steps.
expo doctor flagged an issue with the version of react-native i was using. Fixing this solved the error for me
After 2 days I realized reason of this problem. It was related expo application. I tried my app in other device I could not faced this problem. After I removed expo and reinstalled my codes run succesfully.