MultinaireImage

Image component built on expo-image with loading states and placeholders.

Basic Usage

import { MultinaireImage } from '@multinaire/multinaire-design';

<MultinaireImage source={{ uri: 'https://example.com/image.jpg' }} />

Props

Prop	Type	Default	Description
source	ImageSource	—	Image source (same as expo-image)
width	DimensionValue	—	Fixed width of the image
height	DimensionValue	—	Fixed height of the image
aspectRatio	'1:1' | '16:9' | '9:16'	—	Predefined aspect ratio shorthand
borderRadius	BorderRadiusProps	—	Corner radius. Accepts a number or per-corner object
margin	SpacingProps	—	Outer margin
isLoading	boolean	false	Show a loading skeleton in place of the image
placeholder	ReactNode	—	Placeholder rendered while the image loads or on error

All expo-image props are also supported.

Examples

Fixed Size Image

<MultinaireImage
  source={{ uri: 'https://example.com/image.jpg' }}
  width={200}
  height={150}
/>

With Aspect Ratio

<MultinaireImage
  source={{ uri: 'https://example.com/image.jpg' }}
  width="100%"
  aspectRatio="16:9"
/>

Rounded Image

<MultinaireImage
  source={{ uri: 'https://example.com/avatar.jpg' }}
  width={80}
  height={80}
  borderRadius={40}
/>

With Placeholder

<MultinaireImage
  source={{ uri: user.avatarUrl }}
  width={64}
  height={64}
  placeholder={<MultinaireIcon icon="User" size={32} />}
/>

Loading State

<MultinaireImage
  isLoading
  width={200}
  height={150}
/>

Local Image

<MultinaireImage
  source={require('../assets/logo.png')}
  width={100}
  height={100}
/>