What are the benefits and uses of the AspectRatio property for flexible cards and images?

Short answer

aspectRatio automatically controls the width-to-height ratio of any visible element (such as 16/9 or 1/1), allowing its height to adapt precisely when the screen width changes.

Explanation

Instead of calculating image and video-card heights programmatically with dimension equations, aspectRatio lets you specify a fixed geometric ratio. The Yoga engine calculates the other dimension based on available space, preventing media distortion and ensuring layouts work across device sizes.

Code example

const styles = StyleSheet.create({
  videoThumbnail: {
    width: '100%',
    aspectRatio: 16 / 9, // Always preserves the cinematic video aspect ratio
    borderRadius: 8,
  },
  squareAvatar: {
    width: '30%',
    aspectRatio: 1, // Perfect square
    borderRadius: 50,
  }
});

Common mistakes

• Setting fixed width and height together with aspectRatio, which removes the ratio's flexibility and constrains the calculations.

Follow-up questions

• What are the main differences between browser CSS and the styling system in React Native?

Sources

• React Native docs — Layout Props
• React Native docs — Image Style Props