ImagePicker not showing selected image

Question

I'm using the launchImageLibrary function from the react-native-image-picker library. I am able to to select images from my library but the selected image doesn't show up on my app but its shows that the uri has changed in the console. Here's a piece of my code.

chooseImage = () => {
    let options = {
      maxWidth: 300,
      maxHeight: 300,
      storageOptions: {
        skipBackup: true,
        path: 'images',
        cameraRoll: true,
      },
    };

    launchImageLibrary(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);
      } else {
        this.setState({
          fileUri: response.assets[0].uri,
        });
        console.log(this.state.fileUri);
      }
    });

  

  <TouchableOpacity
    activeOpacity={0.8}
    onPress={this.chooseImage}
    style={{
      width: 300,
      height: 300,
      backgroundColor: COLORS.dark,
      alignItems: 'center',
      justifyContent: 'center',
    }}>
    {this.state.fileUri ? (
      <Image source={{ uri: this.state.fileUri }} />
    ) : (
      <Icon name="add-a-photo" size={40} color={COLORS.inactive} />
    )}
  </TouchableOpacity>

Mj.Mthimunye · Answer 1 · 2022-03-08T16:31:41.167

You have to provide a width and height style to the image.

chooseImage = (type) => {

    let options = {
        mediaType: type,
    };

    launchImageLibrary(options, (response) => {

        if (response.didCancel) {
            alert('User cancelled camera picker');
        } else if (response.errorCode == 'camera_unavailable') {
            alert('Camera not available on device');
        } else if (response.errorCode == 'permission') {
            alert('Permission not satisfied');
        } else if (response.errorCode == 'others') {
            alert(response.errorMessage);
        }else{
            console.log('uri -> ', response.uri);

            this.setState({
                imageUri: response.uri,
            })
        }

    });
};


render() {

    return (
        <View style={styles.container}>

            <TouchableOpacity onPress={() => this.chooseImage('photo')}>
                <Icon  name="images-outline" size={25}  />
                <Text >Library </Text>
            </TouchableOpacity>
            
            <View style={{marginTop: 50}}>
                {this.state.imageUri ? (
                    <Image source={{ uri: this.state.imageUri }} style={{width: 80, height: 80}} />
                    ) : (
                    <Icon name="add-circle-outline" size={40} />
                )}
            </View>
        
      </View>
    );
}

For v4 of react-native-image-picker

launchImageLibrary(options, (response) => {

    if (response.didCancel) {
        alert('User cancelled camera picker');
    } else if (response.errorCode == 'camera_unavailable') {
        alert('Camera not available on device');
    } else if (response.errorCode == 'permission') {
        alert('Permission not satisfied');
    } else if (response.errorCode == 'others') {
        alert(response.errorMessage);
    }else{

        response.assets.map((asset) => {

            console.log('uri -> ', asset.uri);

            this.setState({
                imageUri: asset.uri,
            })

        });
    }

});

ImagePicker not showing selected image

1 Answers1