AspectRatio

Beta

Constrains a child to a fixed aspect ratio regardless of available width.

Installation

npm install @xaui/native

Import

import { AspectRatio } from '@xaui/native/view'

Basic Usage

Minimal example showing the component with its default configuration.

import { AspectRatio } from '@xaui/native/view'

export function Example() {
  return <AspectRatio />
}

16:9 Video Thumbnail

Keep an image in a 16:9 ratio regardless of screen width.

import { AspectRatio } from '@xaui/native/view'
import { Image } from 'react-native'

export function VideoThumbnailExample() {
  return (
    <AspectRatio ratio={16 / 9}>
      <Image
        source={{ uri: 'https://picsum.photos/800/450' }}
        style={{ width: '100%', height: '100%' }}
        resizeMode="cover"
      />
    </AspectRatio>
  )
}

Square Avatar

Force a 1:1 ratio for a perfect square.

import { AspectRatio } from '@xaui/native/view'
import { View } from 'react-native'

export function SquareExample() {
  return (
    <AspectRatio ratio={1} style={{ width: 80 }}>
      <View style={{ flex: 1, backgroundColor: '#f59e0b', borderRadius: 8 }} />
    </AspectRatio>
  )
}