Question 209401 in React native Question posted in
The official React Native documentation can be found here.

React native – When we pressed upload image button, the following error shown

Please check error, the error show: Key "cancelled" in the image picker result is deprecated. By the way I used canceled

import React, { useEffect, useState } from 'react'
import { Alert, Button, Image, View, StyleSheet,Platform } from 'react-native'
import * as ImagePicker from 'expo-image-picker'
import Constants from 'expo-constants'


const Fine_Repair_Request = () => {
 const [image,setimage] = useState(null);

 useEffect( async() => {
  if(Platform.OS !== 'web'){
    const {status} =await ImagePicker.requestMediaLibraryPermissionsAsync();
    if(status !== 'granted'){
      alert('Permission denied')
    }
  }
 },[])
   
   const PickImage = async()=>{
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing:true,
      aspect:[4,3],
      quality:1
    })
    console.log(result)
    if(!result.canceled){
      setimage(result.uri)
    }
   }


  return (
    <View style={styles.container}>
      <Button title="Upload Image" onPress={PickImage} />
      {image && <Image source={{uri:image}}/>}
    </View>
  )
}
export default Fine_Repair_Request;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  }
})
  • Error: WARN Key "cancelled" in the image picker result is deprecated and will be removed in SDK 48, use "canceled" instead
    WARN Key "uri" in the image picker result is deprecated and will be removed in SDK 48, you can access selected assets through the "assets" array instead
Tags:

2

Answers


  1. 0

    for Error: WARN Key "cancelled" try

    const result = await ImagePicker.launchImageLibraryAsync();
    // Explore the result
    //console.log(result);
    if (!result.canceled) {
      ///// add this line
      ///// add this line
      ///// add this line
      delete result.cancelled;

      .......

    }
  }

    and for WARN Key "uri"

    setImage(result.assets[0].uri)

//instead of

setImage(result.uri)

    then the full code :

       const PickImage = async()=>{
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing:true,
      aspect:[4,3],
      quality:1
    })
    console.log(result)
    if(!result.canceled){
      delete result.cancelled;
      setimage(result.assets[0].uri)
    }
   }
    Login or Signup to reply.
  2. 0

    So, your problem is that you are accessing a deprecated propertie and you aren’t accessing ok to the uri of the image.

    From the expo-image-picker this is what a result response looks like:

    // When you run this example and pick an image, you will see the image that you picked show up in your app, and a similar log will be shown in the console:

{
  "assets": [
    {
      "assetId": "C166F9F5-B5FE-4501-9531",
      "base64": null,
      "duration": null,
      "exif": null,
      "fileName": "IMG.HEIC",
      "fileSize": 6018901,
      "height": 3025,
      "type": "image",
      "uri": "file:///data/user/0/host.exp.exponent/cache/cropped1814158652.jpg"
      "width": 3024
    }
  ],
  "canceled": false,
  "cancelled": false
}

    In order to be able to get the uri of the selected asset you have to access the assets array and then the image:

    console.log(result.assets[0].uri) // Will print the uri of the first selected image

    The propertie cancelled is deprecated also, so just use the key that they are suggesting to you canceled

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search