Skip to main content

​
Overview

The Image component displays images from various sources. Uniwind provides className prop support for styling this component.

​
Styling Convention

For style props: Use regular Tailwind classes directly (e.g., className="p-4").For non-style props (like color): Use the accent- prefix (e.g., colorClassName="accent-blue-500").
Since 1.6.2: Passing a className without the accent- prefix to a color prop will log a warning to the development console.

​
Uniwind Bindings

​
className
string
Maps to the style prop. Use any Tailwind utility classes.
​
colorClassName
string
Maps to the color prop (tint color for template images). Requires accent- prefix for color values.

​
Usage Example

import { Image } from 'react-native'

<Image
  source={{ uri: 'https://example.com/image.png' }}
  className="w-24 h-24 rounded-lg"
  colorClassName="accent-blue-500 dark:accent-blue-400"
/>