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.

Source

components/ui/aspect-ratio.tsx

import React from "react";
import { View } from "react-native";
import { cn } from "@/lib/utils";

export interface AspectRatioProps extends React.ComponentPropsWithoutRef<typeof View> {
  className?: string;
  ratio?: number;
  children?: React.ReactNode;
}

// `aspectRatio` is a dynamic numeric layout value, so it goes through the style
// prop — NativeWind/Uniwind only expose static `aspect-*` utility classes.
export function AspectRatio({ ratio = 1, className, style, children, ...props }: AspectRatioProps) {
  return (
    <View
      className={cn("w-full overflow-hidden", className)}
      style={[{ aspectRatio: ratio }, style]}
      {...props}
    >
      {children}
    </View>
  );
}

Previous← Animate NextBadge →