React native image picker not displaying selected image

Question

I don't seem to be able to render the image selected when using react-native-image-picker. After selecting an image from the device library the default image stays selected

My first thoughts are it has something to do with the path

defaultImageUri http://localhost:8081/assets/src/assets/images/emptyavatar.jpg?platform=ios&hash=54674069799117e0326e575845f59679

imageURI file:///Users/lewisr66/Library/Developer/CoreSimulator/Devices/CA90AEB9-E017-4E46-9D5F-A4761F060334/data/Containers/Data/Application/71492FA8-D8D3-4CC5-B810-E64EC1C08C6A/tmp/999D74FB-BCE6-46BC-AAF3-0A81FEFDB3F0.jpg

But I'm unsure it this has anything to do with it. Have I done something wrong here?

import React, {useContext, useState} from 'react';
import {Image} from 'react-native';
import {Avatar} from 'native-base';

import defaultProfileImage from '../../assets/images/emptyavatar.jpg';
import {launchImageLibrary} from 'react-native-image-picker';

export const UserProfile = () => {
  // Image Picker
  const defaultImageUri = Image.resolveAssetSource(defaultProfileImage).uri;
  const [imageURI, setImageURI] = useState(defaultImageUri);

  const options = {
    title: 'Select Image',
    type: 'library',
    options: {
      maxHeight: 200,
      maxWidth: 200,
      selectionLimit: 1,
      mediaType: 'photo',
      includeBase64: false,
    },
  };

  const openGallery = async () => {
    const imageData = await launchImageLibrary(options);
    setImageURI(imageData.assets[0].uri);
  };

  return (
    <Avatar source={{uri: imageURI}} w="24" h="24" />
  );




}

Shahanshah Alam · Answer 1 · 2022-03-04T13:02:20.813

1

Try something like this:-

const handleOpenLibrary = () => {
    let options = {
        mediaType: "photo",
         //rest your options
    };
    launchImageLibrary(options, (response) => {
       
        if (response.didCancel) {
        } else if (response.error) {
        } else if (response.customButton) {

            Alert.alert(response.customButton);
        } else {
            let source = response;
            console.log("source", source);
            let imageSizeInKb = source.fileSize / 1024
            let imageSizeInMb = imageSizeInKb / 1024
            if (imageSizeInMb < 10) {
                setImageURI(source.uri)
            }
            else {
                Toast.show({
                    text1: "AppName",
                    text2: "size error",
                    type: "error",
                    position: "top"
                });
            }
        }
    });
};

And in return:-

<View style={{flex:1}}>
 <Image 
   source={{uri:imageURI}} 
   style={{height:50,width:50}}/>
</View>

edited Mar 04 '22 at 13:02

answered Mar 04 '22 at 12:55

Shahanshah Alam

565
7
22

Changing from async/await to a callback still doesn't seem to make a difference – Richlewis Mar 04 '22 at 13:05
Add a parent view in `return`. I have updated my answer. – Shahanshah Alam Mar 04 '22 at 13:05
Would you mind adding some kind of explanation to the answer please?, i added the view wrapper and then an image appeared, but when selecting another image nothing updated. I restarted my build and now when selecting an image im back to nothing happening – Richlewis Mar 04 '22 at 13:15
1

Got it working now, had to add a `key` to my Avatar component, ``. I found another SO post that mentioned the use of a key property, though I dont quite fully understand how this enabled it to work – Richlewis Mar 04 '22 at 13:37

React native image picker not displaying selected image

1 Answers1