Image

With the Image component, you can enhance the look and feel of your app or website by incorporating compelling imagery.
Installation
API Reference
Spec Doc
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",
}}
/>

Installation

Step 1: Install the following dependencies:

npm i @gluestack-ui/image

Step 2: Copy and paste the following code into your project.

import { createImage } from "@gluestack-ui/image"
import { Image as RNImage } from "react-native"
import { styled } from "@gluestack-style/react"
const StyledRoot = styled(
RNImage,
{
maxWidth: "$full",
variants: {
size: {
"2xs": {
w: "$6",
h: "$6",
},
xs: {
w: "$10",
h: "$10",
},
sm: {
w: "$16",
h: "$16",
},
md: {
w: "$20",
h: "$20",
},
lg: {
w: "$24",
h: "$24",
},
xl: {
w: "$32",
h: "$32",
},
"2xl": {
w: "$64",
h: "$64",
},
full: {
w: "$full",
h: "$full",
},
},
},
defaultProps: {
size: "md",
},
},
{}
)
export const Image = createImage({ Root: StyledRoot })

Step 3: Update the import paths to match your project setup.

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, utility props and the props mentioned below.

Image

Name
Value
Default
size
2xs | xs | sm | md | lg | xl | 2xl | full
md
Edit this page on GitHub