Enhance your app with the Image component from gluestack-ui. Build seamless UI component images in React & React Native with ease. Explore the docs now! This is an illustration of Image component.

size

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.

Platform	Output
Web	<img />
Native	<Image />

Props

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

Prop	Type	Default	Description
source	ImageSourcePropType	-	The source of the image
alt	string	-	The alt text for the image
size	2xs \| xs \| sm \| md \| lg \| xl \| 2xl \| full	md	The size of the 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';

Edit this page on GitHub