Skip to main content
Version: 3.4.2

Image

Drop-in replacement for the standard React Native Image component that displays images with a placeholder and smooth image load transitioning.

Image Component

Usage

import { ActivityIndicator } from 'react-native';
import { Image } from 'react-native-elements';

// Standard Image
<Image
source={{ uri: image }}
style={{ width: 200, height: 200 }}
/>


// Image with custom placeholder content
<Image
source={{ uri: image }}
style={{ width: 200, height: 200 }}
PlaceholderContent={<ActivityIndicator />}
/>

Props

Also receives all React Native Image props

Contains all React Native Image methods.


Reference

containerStyle

Additional styling for the container (optional)

TypeDefault
View style (object)none

childrenContainerStyle

Additional styling for the children container (optional)

TypeDefault
View style (object)none

ImageComponent

Specify a different component as the Image component.

TypeDefault
React Native ComponentImage

onLongPress

Callback function when long pressing component

TypeDefault
functionnone

onPress

Callback function when pressing component

TypeDefault
functionnone

PlaceholderContent

Content to render when image is loading.

TypeDefault
componentnone

placeholderStyle

Additional styling for the placeholder container (optional)

TypeDefault
View style (object)none

transition

Perform fade transition on image load

TypeDefault
booleantrue

transitionDuration

Perform fade transition on image load

TypeDefault
number360