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

Question

I am developing an app in which i need to upload an image from my phone, once i click upload gallery is shown and i am able to select the image but once the image is selected the image is not shown in image container i have used.

my code

This is selectImage Function

selectImage = () => {
        const options = {
            title: 'Select Profile Picture',
            storageOptions: {
                skipBackup: true,
                path: 'images',
            },
        };
        ImagePicker.showImagePicker(options, (response) => {
            console.log('Response = ', response);
            if (response.didCancel) {
                console.log('User cancelled image picker');
            } else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
                Alert.alert(response.error.toString())
            } else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            } else {
                //let source = { uri: response.uri };
                Alert.alert(response.uri)
                let source = { uri: 'data:image/jpeg;base64,' + response.data };
                this.setState({
                    imageSource: source,
                    data: response.data,
                });
            }
        });
    }

this is display code

<Image source={this.state.imageSource} style={{ width: 200, height: 250 }} />

No error is thrown.

score 3 · Answer 1 · answered Oct 13 '20 at 12:34

3

Try setting the image source directly to the uri provided by the ImagePicker response.

Alert.alert(response.uri);
let source = { uri: response.uri };
this.setState({
  imageSource: source,
  data: response.data,
});

answered Oct 13 '20 at 12:34

Thomas

7,933
4
37
45

This worked for me. But, I am not sure why we can not first set it into a variable and then use it? – Mahesh Gaikwad Mar 15 '23 at 17:00

score 0 · Answer 2 · answered Oct 13 '20 at 12:25

0

Try adding console.log when the state is set. If the state is empty, then you are making errors while updating the states. If the state is populated with uri of your selected image, then try rebuilding your application

answered Oct 13 '20 at 12:25

Shaheer Khan

45
1
9

The image source is updated with the selected image value and i also tried rebuilding the app but still the image is not shown – Keerthieaaswar Ramachandran Oct 13 '20 at 12:30
I guess the state variable is not getting updated, is there any chance for this to happen? – Keerthieaaswar Ramachandran Oct 13 '20 at 12:32
Try building the View container with the height and width of the image, and let the image height and width be 100% – Shaheer Khan Oct 13 '20 at 12:32
Console the state of image and verify with the actual image uri – Shaheer Khan Oct 13 '20 at 12:35
i tried with width and height as 100% but still same – Keerthieaaswar Ramachandran Oct 13 '20 at 12:41
What is your console response? – Shaheer Khan Oct 13 '20 at 12:47
this is the response when using ```let source = { uri: response.uri };this.setState({ imageSource: source, data: response.data, }); ``` imageSource: {uri: "content://media/external/images/media/7547"} – Keerthieaaswar Ramachandran Oct 13 '20 at 12:56
How this will render? It is incorrect uri. It must have ```.jpg``` or ```.png``` – Shaheer Khan Oct 13 '20 at 12:57
this is given in docs and i used in my other apps too it works fine but i dont know why this is not working now. – Keerthieaaswar Ramachandran Oct 13 '20 at 12:59

score 0 · Answer 3 · answered Oct 13 '20 at 13:25

0

At last i found the issue, this is due to react-native-web-swiper, i had my Image container inside this, this doesn't support the re-render of the state.

answered Oct 13 '20 at 13:25

Keerthieaaswar Ramachandran

65
8

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

3 Answers3