Image processing

Learn to process and display selected images.

Image processing

You take the uri value of the picked image and show it on the screen. The source prop of the Image component takes an object: { uri: photoUri }. This object carries the local file path of the image. All images picked from the gallery or taken with the camera are shown this way.

When the image is loaded you know its size: result.assets[0].width and result.assets[0].height. You can use these values for styling. To show high-resolution images small you use the resizeMode prop. cover crops the image to fill the container, contain fits the image inside the container.

resizeMode

The resizeMode prop sets how the image is sized. cover spreads the image over the whole container; overflowing parts are cropped. contain keeps the image size; the parts that do not fit stay empty. stretch forces the image to the container size; the ratio breaks.

The most common choice is cover; the image spreads over the whole container, no empty space. For square images like avatars cover works well. For gallery images contain is more suitable; the image size is preserved. resizeMode can also be added to styles: resizeMode: 'cover'.

Exercise Show the picked image

Complete the empty showImage function. It takes uri as a parameter. Return <Image source={{{ uri }}} style={{{ width: 200, height: 200, resizeMode: 'cover' }}}} />.

Show example solution

return (
  <Image
    source={{ uri }}
    style={{ width: 200, height: 200, resizeMode: 'cover' }}
  />
);

Test yourself

Write the Image source

<Image source={____} style={{ width: 200, height: 200 }} />

Show answer

<Image source={{ uri: photoUri }} style={{ width: 200, height: 200 }} />

Which resizeMode fills the container with a high-resolution image?
```
<Image resizeMode={??} />
```
- repeat
- stretch
- cover
- center
Show answer

cover — cover fills the container; overflow is cropped.
Match each field to its meaning

uri

Image path
width

Image width
height

Image height
canceled

Cancel state

Next lesson: Summary - Image picker

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies