I want to implement image uploading feature with React Native, so i'm using expo-image-picker I have following code from the docs in react-native, Expo:
import React, { useState } from "react";
import { Button, Image, View } from "react-native";
import * as ImagePicker from "expo-image-picker";
export default function EditProfile() {
const [image, setImage] = useState(null);
const pickImage = async () => {
// No permissions request is necessary for launching the image library
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
});
console.log(result);
if (!result.canceled) {
setImage(result.assets[0].uri);
}
};
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Button title="Pick an image from camera roll" onPress={pickImage} />
{image && (
<Image source={{ uri: image }} style={{ width: 200, height: 200 }} />
)}
</View>
);
}
{"assetId": null, "base64": null, "cancelled": false, "exif": null, "height": 2604, "type": "image", "uri": "file:///data/user/0/host.exp.exponent/cache/ImagePicker/9cf27130-4e9e-4917-b9aa-535af3f17453.jpeg", "width": 3472}
And this warning:
Possible Unhandled Promise Rejection (id: 0):
TypeError: undefined is not an object (evaluating 'result.assets[0]')
I tried reinstalling the package but it didn't work. I'd be grateful for any answer.
because there's no property of assets[0] result only contain below data, you can type result.uri directly
{width:720
exif:null
height:540
cancelled:false
uri:"file:///data/user/0/host.exp.exponent/cache/ImagePicker/b44b90ae-02c7-4261-96e8-0e48ba88a0ef.jpeg"
assetId:null
type:"image"
base64:null}