Aspect Ratio
Displays content within a desired ratio.
Usage
import {Image} from "react-native";
import {AspectRatio} from "@/components/ui/aspect-ratio";
<AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
<Image
source={{
uri: "https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80",
}}
resizeMode="cover"
className="h-full w-full"
/>
</AspectRatio>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Required. The content to be constrained to the aspect ratio. |
ratio | number | 1 / 1 | Desired width/height ratio. A value of 16/9 represents a 16 × 9 ratio. |
asChild | boolean | false | If true clones the child and passes the aspect ratio style to it instead of rendering a wrapping View. |
baseClassName | string | - | Custom tailwind classes to apply to the base component. Takes priority over the className prop. |
Also extends all React Native View component props.