Aspect Ratio

Preview

"use client";

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

export default function AspectRatioPreview() {
  return (
    <View className="w-[300px]">
      <AspectRatio ratio={16 / 9}>
        <Image
          alt="Mountain landscape"
          source={{
            uri: "/media/preview-landscape.svg",
          }}
          style={{ width: "100%", height: "100%", borderRadius: 8 }}
          resizeMode="cover"
        />
      </AspectRatio>
    </View>
  );
}

Usage

The CLI installs editable source into your application. Import the component from your configured UI directory:

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

Variants and composition

Compound parts and variants remain regular source in your project, so you can change them without wrapping a package API.

Public API

The canonical source panel below lists every public export, dependency, and the complete implementation shipped by the registry.

Keyboard and accessibility

Provide meaningful alternative text for informative media and an empty alternative for decorative media.

Browser support

This beta is release-tested in Chromium, Firefox, and WebKit in light and dark themes. See the web compatibility matrix for the current gate.