AniUI

Aspect Ratio

Constrain content to a fixed width/height ratio.

16 : 9
Web preview — components render natively on iOS & Android
import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Image } from "react-native";

export function MyScreen() {
return (
  <AspectRatio ratio={16 / 9}>
    <Image source={{ uri: "https://example.com/cover.jpg" }} className="h-full w-full" />
  </AspectRatio>
);
}

Installation

npx @aniui/cli add aspect-ratio

Usage

import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Image } from "react-native";

export function MyScreen() {
  return (
    <AspectRatio ratio={16 / 9}>
      <Image source={{ uri: "https://example.com/cover.jpg" }} className="h-full w-full" />
    </AspectRatio>
  );
}

Ratios

1 : 1
16 : 9
Web preview — components render natively on iOS & Android
<AspectRatio ratio={1} />
<AspectRatio ratio={16 / 9} />

Props

PropTypeDefault
ratio
number
1
children
React.ReactNode
—
className
string
—

Also accepts all View props from React Native.

Accessibility

  • Purely a layout wrapper — it adds no interaction of its own.
  • Interactive children keep their own accessibility roles.
Previous← Alert DialogNextAvatar →