Image | NativeBase | Universal Components for React and React Native

Data Display
Typography
Disclosure
Media and Icons
Others
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 event there was 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<InterfaceTextProps>
fallbackElement
In event there was 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