Skip to main content

​
Overview

The ImageBackground component displays an image as a background with children rendered on top. 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.
​
imageClassName
string
Maps to the imageStyle prop. Use regular Tailwind classes (no accent- prefix needed).
​
tintColorClassName
string
Maps to the tintColor prop. Requires accent- prefix for color values.

​
Usage Example

import { ImageBackground, Text } from 'react-native'

<ImageBackground
  source={{ uri: 'https://example.com/bg.jpg' }}
  className="flex-1 justify-center items-center"
  imageClassName="opacity-50"
  tintColorClassName="accent-blue-500 dark:accent-blue-700"
>
  <Text className="text-white text-2xl font-bold">
    Content here
  </Text>
</ImageBackground>