diff --git a/src/ImageViewing.tsx b/src/ImageViewing.tsx
index 3782ee0e..5f536a49 100644
--- a/src/ImageViewing.tsx
+++ b/src/ImageViewing.tsx
@@ -42,6 +42,7 @@ type Props = {
   delayLongPress?: number;
   HeaderComponent?: ComponentType<{ imageIndex: number }>;
   FooterComponent?: ComponentType<{ imageIndex: number }>;
+  CustomImageComponent?: ComponentType;
 };
 
 const DEFAULT_ANIMATION_TYPE = "fade";
@@ -66,6 +67,7 @@ function ImageViewing({
   delayLongPress = DEFAULT_DELAY_LONG_PRESS,
   HeaderComponent,
   FooterComponent,
+  CustomImageComponent,
 }: Props) {
   const imageList = useRef<VirtualizedList<ImageSource>>(null);
   const [opacity, onRequestCloseEnhanced] = useRequestClose(onRequestClose);
@@ -140,6 +142,7 @@ function ImageViewing({
               delayLongPress={delayLongPress}
               swipeToCloseEnabled={swipeToCloseEnabled}
               doubleTapToZoomEnabled={doubleTapToZoomEnabled}
+              CustomImageComponent={CustomImageComponent}
             />
           )}
           onMomentumScrollEnd={onScroll}
diff --git a/src/components/ImageItem/ImageItem.android.tsx b/src/components/ImageItem/ImageItem.android.tsx
index f463b0b1..cfb2fc95 100644
--- a/src/components/ImageItem/ImageItem.android.tsx
+++ b/src/components/ImageItem/ImageItem.android.tsx
@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useRef, useState, ComponentType } from "react";
 
 import {
   Animated,
@@ -39,6 +39,7 @@ type Props = {
   delayLongPress: number;
   swipeToCloseEnabled?: boolean;
   doubleTapToZoomEnabled?: boolean;
+  CustomImageComponent?: ComponentType;
 };
 
 const ImageItem = ({
@@ -49,6 +50,7 @@ const ImageItem = ({
   delayLongPress,
   swipeToCloseEnabled = true,
   doubleTapToZoomEnabled = true,
+  CustomImageComponent = null
 }: Props) => {
   const imageContainer = useRef<ScrollView & NativeMethodsMixin>(null);
   const imageDimensions = useImageDimensions(imageSrc);
@@ -131,13 +133,8 @@ const ImageItem = ({
         onScrollEndDrag,
       })}
     >
-      <Animated.Image
-        {...panHandlers}
-        source={imageSrc}
-        style={imageStylesWithOpacity}
-        onLoad={onLoaded}
-      />
-      {(!isLoaded || !imageDimensions) && <ImageLoading />}
+      {CustomImageComponent ? (React.createElement(CustomImageComponent, {panHandlers:{...panHandlers}, source:{imageSrc}, style: {imageStylesWithOpacity}, onLoad:{onLoaded}, loadingImage: <ImageLoading />})) : (<Animated.Image {...panHandlers} source={imageSrc} style={imageStylesWithOpacity} onLoad={onLoaded}/>)}
+      {(!isLoaded || !imageDimensions || !CustomImageComponent) && <ImageLoading />}
     </ScrollView>
   );
 };
diff --git a/src/components/ImageItem/ImageItem.d.ts b/src/components/ImageItem/ImageItem.d.ts
index 57a902e9..2533dd2d 100644
--- a/src/components/ImageItem/ImageItem.d.ts
+++ b/src/components/ImageItem/ImageItem.d.ts
@@ -6,7 +6,7 @@
  *
  */
 
-import React from "react";
+import React, {ComponentType} from "react";
 import { GestureResponderEvent } from "react-native";
 import { ImageSource } from "../../@types";
 
@@ -18,6 +18,7 @@ declare type Props = {
   delayLongPress: number;
   swipeToCloseEnabled?: boolean;
   doubleTapToZoomEnabled?: boolean;
+  CustomImageComponent?: ComponentType;
 };
 
 declare const _default: React.MemoExoticComponent<({
@@ -27,6 +28,7 @@ declare const _default: React.MemoExoticComponent<({
   onLongPress,
   delayLongPress,
   swipeToCloseEnabled,
+  CustomImageComponent,
 }: Props) => JSX.Element>;
 
 export default _default;
diff --git a/src/components/ImageItem/ImageItem.ios.tsx b/src/components/ImageItem/ImageItem.ios.tsx
index de85a146..e3564042 100644
--- a/src/components/ImageItem/ImageItem.ios.tsx
+++ b/src/components/ImageItem/ImageItem.ios.tsx
@@ -6,7 +6,7 @@
  *
  */
 
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useRef, useState, ComponentType } from "react";
 
 import {
   Animated,
@@ -41,6 +41,7 @@ type Props = {
   delayLongPress: number;
   swipeToCloseEnabled?: boolean;
   doubleTapToZoomEnabled?: boolean;
+  CustomImageComponent?: ComponentType;
 };
 
 const ImageItem = ({
@@ -51,6 +52,7 @@ const ImageItem = ({
   delayLongPress,
   swipeToCloseEnabled = true,
   doubleTapToZoomEnabled = true,
+  CustomImageComponent = null
 }: Props) => {
   const scrollViewRef = useRef<ScrollView>(null);
   const [loaded, setLoaded] = useState(false);
@@ -130,17 +132,9 @@ const ImageItem = ({
           onScroll,
         })}
       >
-        {(!loaded || !imageDimensions) && <ImageLoading />}
-        <TouchableWithoutFeedback
-          onPress={doubleTapToZoomEnabled ? handleDoubleTap : undefined}
-          onLongPress={onLongPressHandler}
-          delayLongPress={delayLongPress}
-        >
-          <Animated.Image
-            source={imageSrc}
-            style={imageStylesWithOpacity}
-            onLoad={() => setLoaded(true)}
-          />
+        {(!loaded || !imageDimensions || !CustomImageComponent) && <ImageLoading />}
+        <TouchableWithoutFeedback onPress={doubleTapToZoomEnabled ? handleDoubleTap : undefined} onLongPress={onLongPressHandler} delayLongPress={delayLongPress}>
+            {CustomImageComponent ? (React.createElement(CustomImageComponent, {source:{imageSrc}, style: {imageStylesWithOpacity}, onLoad:() => setLoaded(true), loadingImage: <ImageLoading />})) : (<Animated.Image source={imageSrc} style={imageStylesWithOpacity} onLoad={() => setLoaded(true)}/>)}
         </TouchableWithoutFeedback>
       </ScrollView>
     </View>