Aspect Ratio
Displays content within a desired ratio.
Installation
bash npx @moe/cli add aspect-ratio Install the following dependency:
npx expo install @rn-primitives/aspect-ratioCopy/paste the following code to @/components/ui/aspect-ratio.tsx
import * as AspectRatioPrimitive from "@rn-primitives/aspect-ratio";
const AspectRatio = AspectRatioPrimitive.Root;
export { AspectRatio };Usage
import { AspectRatio } from "@moe/registry/ui/aspect-ratio";
import { Image } from "react-native";
export function AspectRatioDemo() {
return (
<AspectRatio ratio={16 / 9}>
<Image
source={{ uri: "https://example.com/image.jpg" }}
style={{ width: "100%", height: "100%" }}
resizeMode="cover"
/>
</AspectRatio>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | number | 1 | The desired aspect ratio |