Version: 2.3.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#

onLongPress#

Callback function when long pressing component

TypeDefault
functionnone

onPress#

Callback function when pressing component

TypeDefault
functionnone

containerStyle#

Additional styling for the container (optional)

TypeDefault
View style (object)none

placeholderStyle#

Additional styling for the placeholder container (optional)

TypeDefault
View style (object)none

transition#

Perform fade transition on image load

TypeDefault
booleantrue

ImageComponent#

Specify a different component as the Image component.

TypeDefault
React Native ComponentImage

PlaceholderContent#

Content to render when image is loading.

TypeDefault
componentnone