REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Layout

AspectRatio

Maintains a consistent width-to-height ratio for its child content.

Example

Preview

Code

Props

AspectRatio Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes to apply to the aspect ratio container.

ratio

number

1

The width-to-height ratio (e.g. 16/9 for widescreen).

Usage Guidelines

When to use

Use AspectRatio to enforce a fixed aspect ratio on images, videos, or card previews.

Best practices

•

Use common ratios like 16/9, 4/3, or 1 for consistency across your app.

•

Wrap images inside AspectRatio to prevent layout shifts during loading.

•

Ensure the child fills the container with width and height set to 100%.

Accessibility

AspectRatio is a layout utility and is transparent to screen readers. Ensure child content has appropriate labels.

Related Components

Box

A styled View wrapper that accepts className for NativeWind utility classes.

Image

A styled image component with built-in size presets and border-radius options, requiring an accessible alt label.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License