Aspect Ratio

Installation

npx lovdacn@latest add aspect-ratio

This copies the component source into your project (typically components/ui/aspect-ratio.tsx) and installs any required dependencies.

Registry dependencies: utils

Usage

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

export function Example() {
  return (
    <AspectRatio ratio={16 / 9}>
      <Image
        source={{ uri: "https://picsum.photos/800/450" }}
        className="size-full rounded-md"
        resizeMode="cover"
      />
    </AspectRatio>
  )
}

Styles

lvcn components are available across all style packs:

Style is set at project init via lvcn.json (style + styleEngine).

Platform

These components target Expo / React Native with NativeWind or Uniwind. They use Platform.select where web and native need different behavior.