Image

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

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.

• containerStyle
• childrenContainerStyle
• ImageComponent
• onLongPress
• onPress
• PlaceholderContent
• placeholderStyle
• transition

---

Reference

containerStyle

Additional styling for the container (optional)

Type	Default
View style (object)	none

---

childrenContainerStyle

Additional styling for the children container (optional)

Type	Default
View style (object)	none

---

ImageComponent

Specify a different component as the Image component.

Type	Default
React Native Component	Image

---

onLongPress

Callback function when long pressing component

Type	Default
function	none

---

onPress

Callback function when pressing component

Type	Default
function	none

---

PlaceholderContent

Content to render when image is loading.

Type	Default
component	none

---

placeholderStyle

Additional styling for the placeholder container (optional)

Type	Default
View style (object)	none

---

transition

Perform fade transition on image load

Type	Default
boolean	true

---

transitionDuration

Perform fade transition on image load

Type	Default
number	360

---