Image size

Learn width, height and aspectRatio.

width and height

You decide how much space an image takes with width and height. These go inside style and are in pixels.

For example style={'{ width: 200, height: 200 }'} makes a square image. If you only set width, the image gets no height and stays invisible; both are required.

You can also use percentages: width: '100%' stretches the image to the parent width. This is handy in responsive layouts.

Using aspectRatio

aspectRatio keeps the aspect ratio of the image fixed. If you only set width and write aspectRatio: 1, the image becomes a square; height is computed for you.

For example style={'{ width: 200, aspectRatio: 16 / 9 }'} sets the width to 200 and computes the height as 200 * 9 / 16 = 112.5. This is the cleanest way to display an image without distortion.

Especially for remote images whose ratio you do not know in advance, aspectRatio is a safe pick; the box gets the correct size before the image even loads.

Exercise Square image with aspectRatio

Write an <Image>. Give it source={'{ uri: 'https://example.com/pic.png' }'}. In style set only width: 200 and aspectRatio: 1. Export the App function.

Show example solution

function App() {
  return (
    <Image
      source={{ uri: 'https://example.com/pic.png' }}
      style={{ width: 200, aspectRatio: 1 }}
    />
  );
}
export default App;

Test yourself

Add image size

import { Image } from 'react-native';

function App() {
  return (
    <Image
      source={{ uri: 'cat.png' }}
      style={{ ____: 200, height: 200 }}
    />
  );
}

Show answer

import { Image } from 'react-native';

function App() {
  return (
    <Image
      source={{ uri: 'cat.png' }}
      style={{ width: 200, height: 200 }}
    />
  );
}

When is aspectRatio useful?
- Blurring an image
- Hiding an image
- Rotating an image
- Sizing an image without breaking its ratio
Show answer

Sizing an image without breaking its ratio — aspectRatio computes the height automatically.
Match the size props

width

Horizontal size
height

Vertical size
aspectRatio

Locks the ratio
'100%'

Stretches to parent

Next lesson: Summary - Images

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies