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	-	Image width
height	DimensionValue	-	Image height
aspectRatio	'1:1' | '16:9' | '9:16'	-	Aspect ratio constraint
borderRadius	BorderRadiusProps	-	Corner radius
margin	SpacingProps	-	Margin spacing
isLoading	boolean	false	Show loading skeleton
placeholder	ReactNode	-	Placeholder content when no image

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}
/>