Custom ImageComponent for Avatar (#1261)

react-native-elements · Jun 15, 2018 · 3cfc564 · 3cfc564
1 parent cd73615
commit 3cfc564
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/docs/avatar.md b/docs/avatar.md
@@ -155,6 +155,7 @@ title: Avatar
 * [`titleStyle`](#titlestyle)
 * [`placeholderStyle`](#placeholderstyle)
 * [`renderPlaceholderContent`](#renderplaceholdercontent)
+* [`ImageComponent`](#ImageComponent)
 
 ---
 
@@ -325,3 +326,13 @@ Custom placeholder element (by default, it's the title)
 |            Type            | Default |
 | :------------------------: | :-----: |
 | React component or element |  none   |
+
+---
+
+### `ImageComponent`
+
+Custom ImageComponent for Avatar
+
+|            Type            | Default |
+| :------------------------: | :-----: |
+| React component or element |  Image   |
diff --git a/src/avatar/Avatar.js b/src/avatar/Avatar.js
@@ -46,6 +46,7 @@ const Avatar = ({
   imageProps,
   placeholderStyle,
   renderPlaceholderContent,
+  ImageComponent,
   ...attributes
 }) => {
   const width =
@@ -119,6 +120,7 @@ const Avatar = ({
           imageProps && imageProps.style,
           avatarStyle,
         ]}
+        ImageComponent={ImageComponent}
       />
       {Utils}
     </Component>
@@ -209,6 +211,7 @@ Avatar.propTypes = {
   placeholderStyle: ViewPropTypes.style,
   renderPlaceholderContent: nodeType,
   imageProps: PropTypes.object,
+  ImageComponent: PropTypes.element,
 };
 
 Avatar.defaultProps = {
@@ -223,6 +226,7 @@ Avatar.defaultProps = {
     underlayColor: DEFAULT_COLORS[0],
     style: null,
   },
+  ImageComponent: Image,
 };
 
 class FadeInImage extends React.PureComponent {
@@ -242,10 +246,10 @@ class FadeInImage extends React.PureComponent {
   }
 
   render() {
-    const { placeholderStyle, PlaceholderContent, containerStyle, style, ...attributes } = this.props
+    const { placeholderStyle, PlaceholderContent, containerStyle, style, ImageComponent, ...attributes } = this.props
     return Platform.OS === 'ios' ? (
       <View style={[styles.overlayContainer, containerStyle]}>
-        <Image {...attributes} onLoadEnd={this.onLoadEnd} style={[styles.avatar, style]} />
+        <ImageComponent {...attributes} onLoadEnd={this.onLoadEnd} style={[styles.avatar, style]} />
         <Animated.View style={[styles.placeholderContainer, { opacity: this.placeholderContainerOpacity }]}>
           <View style={[style, styles.placeholder, placeholderStyle]}>
             {PlaceholderContent}

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -161,6 +161,13 @@ export interface AvatarProps {
    */
 
   size?: 'small' | 'medium' | 'large' | 'xlarge' | number;
+
+  /**
+   * Image Component of Avatar
+   * @default React Native default Image component
+   */
+
+  ImageComponent?: React.ComponentClass;
 }
 
 /**