Image | NativeBase | Universal Components for React and React Native

Search
K
Hire us
Data Display
Typography
Disclosure
Media and Icons
Others
Please opt in to our enterprise plan (coming soon) for priority support with NativeBase. If you are starting a new project, we recommend using gluestack-ui. For your existing projects, you can utilize @gluestack-ui/themed-native-base (beta).
Image
The Image component allows one to display images.
Show Code
Playground
Implements
You can use all props of React native Image.
Examples
Basic
Playground
Sizes
Playground
Border Radius
Playground
Fallback
Playground
Basic (With Ref)
Playground
Props
source
specify a source for image.
alt
The alt text that describes the image. This will be added as accessibilityLabel in android/iOS and alt on web.
Type: string
fallbackSource
In the event of an error loading the src, specify a fallback source.
ignoreFallback
Opt out of the fallbackSource logic and show alternative text.
Type: boolean
_alt
Text styling for alt.
Type: Partial<ITextProps>
fallbackElement
In the event of an error loading the src, specify a fallback JSX Element.
Type: Element | Element[]
src
specify a source for image.
Type: string
Note
With Next's require statement
When using require statement from next for image, keep this in mind.
Copy
const img = require('/public/me.jpg');
// DO ✔
<Image
source={{ uri: img.default.src }}
width={500}
height={500}
/>
// DON'T ✘
<Image
source={img}
width={500}
height={500}
/>
Nativebase logo
MadeWithNativeBase