React native image picker not displaying selected image - react-native

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" />
);
}

Answer 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>