Aspect Ratio

AspectRatio maintains a fixed aspect ratio for child elements (such as images, videos, or maps).

Usage

AspectRatioExample.tsx

import { Image } from 'react-native';
import { AspectRatio } from '@masumdev/rn-ui';

export function AspectRatioExample() {
  return (
    <AspectRatio ratio={16 / 9}>
      <Image
        source={{ uri: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe' }}
        style={{ width: '100%', height: '100%', borderRadius: 12 }}
      />
    </AspectRatio>
  );
}

Props API

Prop	Type	Default	Description
ratio	number	1	Width-to-height ratio value (e.g. 16/9, 4/3, 1).
children	ReactNode	—	Content rendered inside ratio container.