From fbfb1187cbffe53f1ad797d35234ecdd60b85e67 Mon Sep 17 00:00:00 2001
From: Kavanaugh Latiolais <kav@pelo.tech>
Date: Sun, 30 Jan 2022 13:42:34 -0600
Subject: [PATCH] Exposing Image on Avatar

---
 src/components/composites/Avatar/Avatar.tsx |  9 +++++----
 src/components/composites/Avatar/types.tsx  | 12 +++++++++---
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/composites/Avatar/Avatar.tsx b/src/components/composites/Avatar/Avatar.tsx
index f2786f4c0..6adeaacbf 100644
--- a/src/components/composites/Avatar/Avatar.tsx
+++ b/src/components/composites/Avatar/Avatar.tsx
@@ -1,12 +1,12 @@
-import React, { memo, forwardRef } from 'react';
-import { Box, Image, Text } from '../../primitives';
+import React, { forwardRef, memo } from 'react';
+import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 import { usePropsResolution } from '../../../hooks/useThemeProps';
+import { Box, Image, Text } from '../../primitives';
 import type { IAvatarProps } from './types';
-import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
 
 const Avatar = ({ children, ...props }: IAvatarProps, ref: any) => {
   const [error, setError] = React.useState(false);
-  const { _text, source, style, ...resolvedProps } = usePropsResolution(
+  const { _image, _text, source, style, ...resolvedProps } = usePropsResolution(
     'Avatar',
     props
   );
@@ -51,6 +51,7 @@ const Avatar = ({ children, ...props }: IAvatarProps, ref: any) => {
             setError(true);
           }}
           ref={ref}
+          {..._image}
         />
       ) : (
         remainingChildren.length !== 0 && remainingChildren
diff --git a/src/components/composites/Avatar/types.tsx b/src/components/composites/Avatar/types.tsx
index ae94ce69a..30c416248 100644
--- a/src/components/composites/Avatar/types.tsx
+++ b/src/components/composites/Avatar/types.tsx
@@ -1,10 +1,12 @@
-import type { IBoxProps } from '../../primitives/Box';
-import type { ImageSourcePropType } from 'react-native';
 import type { MutableRefObject } from 'react';
+import type { ImageSourcePropType } from 'react-native';
 import type { ResponsiveValue } from '../../../components/types';
 import type { ISizes } from '../../../theme/base/sizes';
+import type { IBoxProps } from '../../primitives/Box';
+import type { IImageProps } from '../../primitives/Image';
 
 export interface IAvatarProps extends IBoxProps<IAvatarProps> {
+
   /**
    * The image source of the avatar.
    */
@@ -14,13 +16,17 @@ export interface IAvatarProps extends IBoxProps<IAvatarProps> {
    * @default md
    */
   size?: ResponsiveValue<ISizes | (string & {}) | number>;
+  /**
+   * Props to be passed to Image
+   */
+  _image?: IImageProps;
   /**
    * ref to be attached to Avatar wrapper
    */
   wrapperRef?: MutableRefObject<any>;
 }
 
-export interface IAvatarBadgeProps extends IBoxProps<IAvatarBadgeProps> {}
+export interface IAvatarBadgeProps extends IBoxProps<IAvatarBadgeProps> { }
 
 export interface IAvatarGroupProps extends IAvatarProps {
   /**