javascriptreact-nativeexp

why i get promise rejection when picking an image with expo-image-picker?


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>
  );
}
After i have chosen an image i get this output:

{"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.


Solution

  • 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}