react-nativereact-native-image-picker

Image is not shown after image is selected from react-native image-picker


I am developing an application in which i need to upload an image from phone camera and also from gallery . camera & gallery is not showing image inside image tag.

here is my code

function profile({ route,navigation }) {
    const [imageUri, setimageUri] = useState('');



    const openCamera = () => {
        let options={
            storageOptions: {
                path: 'images',
                mediaType: 'photo',
            },
        };
        launchCamera(options, response => {
            console.log("response =", response);
            if(response.didCancel){
                console.log('user cancelled image picker');
            }else if(response.error){
                console.log('Image picker Error:', response.error);
            }else if(response.customButton){
                console.log('User taped cutom button:', response.customButton);
            }else{
                const source = {uri: 'data: image/jpeg;base64,'+ response.base64 };
                setimageUri(source);    
            }
        });
    }

and this is image view code

<Image
  source={imageUri}
  style={{
    height: 100,
    width: 100,
    borderRadius: 100,
    borderWidth: 2,
    borderColor: 'black',
    alignSelf: 'center',
  }}
/>  

Solution

  • Try this,It will help you

    function profile({ route,navigation }) {
        const [imageUri, setimageUri] = useState('');
    
        const openCamera = () => {
            let options={
                storageOptions: {
                    path: 'images',
                    mediaType: 'photo',
                },
            };
            launchCamera(options, response => {
                console.log("response =", response);
                if(response.didCancel){
                    console.log('user cancelled image picker');
                }else if(response.error){
                    console.log('Image picker Error:', response.error);
                }else if(response.customButton){
                    console.log('User taped cutom button:', response.customButton);
                }else{
                    setimageUri(response.assets[0].uri);    
                }
            });
        }
    
    
    <Image
      source={{ uri: imageUri }}
      style={{
        height: 100,
        width: 100,
        borderRadius: 100,
        borderWidth: 2,
        borderColor: 'black',
        alignSelf: 'center',
      }}
    />  
    

    response will give you assets array you can access image uri as response.assets[0].uri.