Home
Components
Hooks
Apps
Guides

Image

Enhance your app or website with captivating visuals using our Image feature.
Installation
API Reference
This is an illustration of Image component.
size
<Image
  size="md"
  source={{
    uri: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80",
  }}
  alt="image"
/>

Installation

Run the following command:

npx gluestack-ui add image

API Reference

To use this component in your project, include the following import statement in your file.
import { Image } from "@/components/ui/image"
export default () => <Image source={source} />

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Image

It inherits all the properties of React Native's Image component.

Props

Image component is created using Image component from react-native. It extends all the props supported by React Native Image.

Examples

The Examples section offers visual previews of the component, letting you quickly identify the best fit for your needs. Just copy the code and use it in your project.

Basic Unitools Image

The below example will run for both Expo and Next.js projects. For installation steps, refer to the Installation section of @unitools/image.
import Image from "@unitools/image"
<Image
  source={{
    uri: "https://gluestack.github.io/public-blog-video-assets/mountains.png",
  }}
  alt="Logo"
  size="none"
  className="aspect-[320/208] w-full max-w-[320px]"
/>