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.

Answer 1

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

Answer 2

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,
});

Answer 3

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.