AspectRatio
Wraps children in a container with a fixed width-to-height ratio.
433 Bgzipped
- Use to constrain images, videos, maps, or any media to a known ratio.
- Works identically on web and native — React Native's
aspectRatio style
property maps to the CSS aspect-ratio property via react-native-web.
import { AspectRatio } from '@nori-ui/core';
// 16:9 video thumbnail
<AspectRatio ratio={16 / 9}>
<Image source={thumbnail} style={{ width: '100%', height: '100%' }} />
</AspectRatio>
// Square avatar placeholder
<AspectRatio ratio={1} style={{ width: 80 }}>
<View style={{ flex: 1, backgroundColor: '#e2e8f0' }} />
</AspectRatio>
| Ratio | Value | Use |
|---|
16 / 9 | 1.777 | Video, banners |
4 / 3 | 1.333 | Classic photo |
1 | 1.0 | Square avatar, card |
2 / 3 | 0.667 | Portrait photo, poster |
21 / 9 | 2.333 | Ultrawide cinema |
| Prop | Type | Default | Description |
|---|
ratio* | number | — | The ratio expressed as width / height. Common values:
- `16 / 9` (1.777…) — widescreen video
- `4 / 3` (1.333…) — classic photo
- `1` — square
- `2 / 3` (0.666…) — portrait |
className | string | — | — |
testID | string | — | — |