Skip to main content

Documentation Index

Fetch the complete documentation index at: https://copylabs.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

​
AspectRatio

AspectRatio is a utility component for maintaining consistent width-to-height ratios for content.

​
Import

import { AspectRatio } from 'radix-native-ui';

​
Usage

import { AspectRatio, Image } from 'radix-native-ui';

<AspectRatio ratio={16 / 9}>
  <Image
    source={{ uri: 'https://example.com/image.jpg' }}
    style={{ width: '100%', height: '100%' }}
  />
</AspectRatio>

​
Props

​
Examples

​
Common Aspect Ratios

<Flex direction="column" gap={3}>
  {/* 16:9 - Video */}
  <AspectRatio ratio={16 / 9}>
    <Image source={{ uri: 'https://example.com/video-thumb.jpg' }} />
  </AspectRatio>

  {/* 4:3 - Standard photo */}
  <AspectRatio ratio={4 / 3}>
    <Image source={{ uri: 'https://example.com/photo.jpg' }} />
  </AspectRatio>

  {/* 1:1 - Square */}
  <AspectRatio ratio={1}>
    <Image source={{ uri: 'https://example.com/square.jpg' }} />
  </AspectRatio>
</Flex>

​
Square Avatar

<AspectRatio ratio={1}>
  <Avatar
    src="https://i.pravatar.cc/300"
    fallback="JD"
    style={{ width: '100%', height: '100%' }}
  />
</AspectRatio>

​
Video Thumbnail

<Card>
  <AspectRatio ratio={16 / 9}>
    <Image
      source={{ uri: 'https://example.com/thumbnail.jpg' }}
      style={{ width: '100%', height: '100%' }}
    />
    <Flex
      style={{ position: 'absolute', inset: 0 }}
      justify="center"
      align="center"
    >
      <IconButton size={3}>
        <Icon name="play" />
      </IconButton>
    </Flex>
  </AspectRatio>
</Card>

<Flex direction="row" gap={2}>
  <AspectRatio ratio={1} flex={1}>
    <Image source={{ uri: 'https://example.com/img1.jpg' }} />
  </AspectRatio>
  <AspectRatio ratio={1} flex={1}>
    <Image source={{ uri: 'https://example.com/img2.jpg' }} />
  </AspectRatio>
  <AspectRatio ratio={1} flex={1}>
    <Image source={{ uri: 'https://example.com/img3.jpg' }} />
  </AspectRatio>
</Flex>

​
Product Card

<Card>
  <AspectRatio ratio={4 / 3}>
    <Image
      source={{ uri: 'https://example.com/product.jpg' }}
      style={{ width: '100%', height: '100%' }}
    />
  </AspectRatio>
  <Flex direction="column" gap={2} padding={3}>
    <Text weight="medium">Product Name</Text>
    <Text color="gray" size={2}>Product description</Text>
    <Text weight="bold">$29.99</Text>
  </Flex>
</Card>

​
Profile Cover

<Flex direction="column">
  <AspectRatio ratio={3}>
    <Image
      source={{ uri: 'https://example.com/cover.jpg' }}
      width="100%"
      height="100%"
    />
  </AspectRatio>
  <Flex padding={3}>
    <Avatar
      src="https://i.pravatar.cc/150"
      fallback="JD"
      size={6}
      marginTop={-7}
    />
  </Flex>
</Flex>

​
Responsive Grid

<Grid columns={2} gap={2}>
  <AspectRatio ratio={1} flex={1} minWidth="45%">
    <Card>
      <Flex justify="center" align="center" height="100%">
        <Icon name="image" size={3} />
      </Flex>
    </Card>
  </AspectRatio>
  <AspectRatio ratio={1} flex={1} minWidth="45%">
    <Card>
      <Flex justify="center" align="center" height="100%">
        <Icon name="video" size={3} />
      </Flex>
    </Card>
  </AspectRatio>
  <AspectRatio ratio={1} flex={1} minWidth="45%">
    <Card>
      <Flex justify="center" align="center" height="100%">
        <Icon name="music" size={3} />
      </Flex>
    </Card>
  </AspectRatio>
  <AspectRatio ratio={1} flex={1} minWidth="45%">
    <Card>
      <Flex justify="center" align="center" height="100%">
        <Icon name="file" size={3} />
      </Flex>
    </Card>
  </AspectRatio>
</Grid>
  • Box - Box component
  • Flex - Flexbox layout
  • Grid - Grid layout