Not able to select an image from image picker popup

React Native
1

The react image picker is working but this is what happens.
Once I click on the “Select an image button” → the popup comes up → then I am supposed to be able to select an image from the popup which shows all the images in the popup in the image library →
I try to keep pressing on the image and then select it (as shown on the image) → once I select, nothing happens, the screen remains on the popup and I am also not getting the image object returned function.

I will leave the code below, please someone help with this problem. I am not able to move forward without resolving this error. Thanks.

Code

import React, { useEffect, useState } from “react”;
import { View, Text, SafeAreaView, Image, Button } from “react-native”;
import Screen from “./app/components/Screen”;

import * as ImagePicker from “expo-image-picker”;
import * as Permissions from “expo-permissions”;
import { TouchableOpacity } from “react-native-gesture-handler”;
import ImageInput from “./app/components/ImageInput”;

export default function App() {
const [imageUri, setImageUri] = useState();

const requestPermissions = async () => {
const { granted } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (!granted) {
alert(“You need to allow permissions to access the library”);
}
};

const selectImage = async () => {
console.log(“i am here”);

const result = await ImagePicker.launchImageLibraryAsync();
setImageUri(result.uri);
console.log(result);

};

console.log(“here”);

useEffect(() => {
requestPermissions();
}, []);

return (


<TouchableOpacity onPress={() => selectImage}>
<Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} />

  <ImageInput imageUri={imageUri} />
</Screen>

);
}
import React, { useEffect, useState } from “react”;
import { View, Text, SafeAreaView, Image, Button } from “react-native”;
import Screen from “./app/components/Screen”;

import * as ImagePicker from “expo-image-picker”;
import * as Permissions from “expo-permissions”;
import { TouchableOpacity } from “react-native-gesture-handler”;
import ImageInput from “./app/components/ImageInput”;

export default function App() {
const [imageUri, setImageUri] = useState();

const requestPermissions = async () => {
const { granted } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (!granted) {
alert(“You need to allow permissions to access the library”);
}
};

const selectImage = async () => {
console.log(“i am here”);

const result = await ImagePicker.launchImageLibraryAsync();
setImageUri(result.uri);
console.log(result);

};

console.log(“here”);

useEffect(() => {
requestPermissions();
}, []);

return (


<TouchableOpacity onPress={() => selectImage}>
<Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} />

  <ImageInput imageUri={imageUri} />
</Screen>

);
}

Code

image
image443×907 37.1 KB

1 Like
2

What specific lesson are you on? (As you know, the code in the course changes as the course progresses.)

And, what specific component files are you working with?

As I recall, in the iOS Simulator there were specific alerts that displayed to allow the app permission to access the images on the device. Did you see those alerts? (If permission has not been granted, no images will display.)

I’m just another student. I completed the course a number of weeks ago, but I’ll help if I can.

3

Hey, thanks. Actually, the permissions are allowed for all images and everything is perfect but it is not working. I am not able to select any image from the image library popup that comes up. I did not see anyone else with that problem till now.

I have an M1 MacBook, so I am not sure if that is the problem because it does not have everything supporting in terms of coding. Please let me know if there is anything I could do. I am not able to move forward with the course because of this

4

It’s possible there’s a problem with your dev setup – I’ve seen a variety of articles about some difficulties in setting up the M1 MacBooks for dev work.

One follow-up question: what do you get as output in the console for your console.log(result) statement in the selectImage function? (And are your other “here” console.log statements showing the functions are firing?)

5

same Problem here on mac M1 :confused:
I am not sure if this problem is due to the MacBook M1
I tested the code on Android
it works
So the problem is not the installation or the code
Is it possible to give an answer to this problem? @codewithmosh
Is the code written in the course on the MacBook M1 or not ? @Mosh

6

The React native / expo library has been updated since this course was recorded, and now you can’t use the uri directly from the launchImageLibraryAsync result.

So, instead of writing:
setImageUri(result.uri);

You should write:

setImageUri(result.assets[0].uri);

2 Likes
7

Thanks, i encounter the same problem but this result.assets[0].uri solved my 8hrs problem :smiley: