How to display the image on screen which is taken from camera

Question

I am using react-native-image-picker to take image.

Below is the code for this:

const chooseImage = () => {
    ImagePicker.launchCamera(
      {
        mediaType: 'photo',
        includeBase64: false,
        maxHeight: 1000,
        maxWidth: 1000,
        quality: 0.5,
        cameraType: 'front',
      },
      (response) => {
        console.log(response);
        if (response.didCancel) {
          console.log('User cancelled image picker');
        } else if (response.error) {
          console.log('ImagePicker Error: ', response.error);
        } else if (response.customButton) {
          console.log('User tapped custom button: ', response.customButton);
        } else {
          console.log(response);
        }
      },
    );
  };

<TouchableOpacity onPress={chooseImage}>
    <Text style={styles.title}>Selfie Screen</Text>
</TouchableOpacity>

In console I am getting output as:

{height: 1000, uri: "content://com.tericsofttask.imagepickerprovider/ca…lib_temp_12aafb95-496e-4796-a6d8-8f29eaa3b78f.jpg", width: 750, fileName: "rn_image_picker_lib_temp_12aafb95-496e-4796-a6d8-8f29eaa3b78f.jpg", type: "image/jpeg", …}
fileName: "rn_image_picker_lib_temp_12aafb95-496e-4796-a6d8-8f29eaa3b78f.jpg"
fileSize: 11569
height: 1000
type: "image/jpeg"
uri: "content://com.tericsofttask.imagepickerprovider/cacheDir/rn_image_picker_lib_temp_12aafb95-496e-4796-a6d8-8f29eaa3b78f.jpg"
width: 750
__proto__: Object

Now I want to display the image taken on screen. But I am not able to figure it out. I don't want to open gallery and then choose image. I want to display the image on screen instantly. Please help

EDIT I made few changes :

const chooseImage = () => {
    ImagePicker.launchCamera(
        {
            // ....Same as previous
        },
        (response) => {
            // ... Same as previous
            } else {
                let source = response.uri;
                setImageSource(source);
                console.log("imgSrc: ", imageSource);
            }
        },
    );
};

Console output:

imgSrc:  content://com.tericsofttask.imagepickerprovider/cacheDir/rn_image_picker_lib_temp_c61dd0cc-2a46-4987-af5d-2b21ac87548b.jpg

Then I tried to show that on my screen:

<View style={styles.container}>
    <TouchableOpacity onPress={chooseImage}>
        <Text style={styles.title}>Selfie Screen</Text>
    </TouchableOpacity>
    <Image
        source={{ uri: imageSource }}
        style={styles.imageBox}
        resizeMode='contain'
    />
</View>

But nothing appears on the screen.

score 1 · Answer 1 · answered Apr 10 '21 at 08:39

1

Upon analyzing the response object, I do notice a field named 'URI' (Uniform Resource Identifier). Which basically, represents the PATH to the image.

Use this path and pass it as source to Image to display the image.

 <Image source={{ uri: PATH_SHOULD_BE_HERE }} />

References

answered Apr 10 '21 at 08:39

SNikhill

446
2
8

I have an edit in my post. Can you please see it. – pratteek shaurya Apr 10 '21 at 11:01

score 0 · Answer 2 · answered May 27 '21 at 00:17

That might be a basic mistake, but you should check the styles.imageBox style, once the width and height are mandatory for data images and you didn't include it on the example.

Note that for network and data images, you will need to manually specify the dimensions of your image!

How to display the image on screen which is taken from camera

2 Answers2

References