Custom Image Component

[archieherbias]

Is it possible that in the future there would be a feature for supporting custom image component?

[mokoshi]

It would be great if we could use libraries like react-native-cached-image to optimize loading.

[gerryfletch]

I would also like to see this, particularly for use with react-native-fast-image 😃

[robwalkerco]

I currently use use the renderImage render prop on react-native-image-zoom-viewer to display a video instead of an image. A custom Image component would hopefully allow for use case.

[gerryfletch]

I have also built a full featured image + video gallery using react-native-gallery-swiper. I had issues on Android using react-native-image-zoom-viewer, so it's worth evaluating all three libraries before choosing :)

[darron1217]

Any update on this issue?

[huyhai]

+1

[SecretKeeper]

+1

[pmenabe]

+1

[raphaelmsr]

+1 😊

[tomgreco]

https://github.com/tomgreco/react-native-image-viewing

I have forked this and switched it to use react-native-fast-image by default. If interested.

[eminsr]

I implemented this future in a rush so probably it needs some improvements. Here patch-package patch. Feedbacks are appreciated.

react-native-image-viewing+0.2.1.patch

diff --git a/node_modules/react-native-image-viewing/dist/ImageViewing.d.ts b/node_modules/react-native-image-viewing/dist/ImageViewing.d.ts
index b279504..51b386c 100644
--- a/node_modules/react-native-image-viewing/dist/ImageViewing.d.ts
+++ b/node_modules/react-native-image-viewing/dist/ImageViewing.d.ts
@@ -5,10 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ComponentType } from "react";
+import { ComponentType, ReactElement } from "react";
 import { ModalProps } from "react-native";
 import { ImageSource } from "./@types";
 declare type Props = {
+    ImageComponent?: ReactElement;
     images: ImageSource[];
     keyExtractor?: (imageSrc: ImageSource, index: number) => string;
     imageIndex: number;
diff --git a/node_modules/react-native-image-viewing/dist/ImageViewing.js b/node_modules/react-native-image-viewing/dist/ImageViewing.js
index b7cd1c0..6b65465 100644
--- a/node_modules/react-native-image-viewing/dist/ImageViewing.js
+++ b/node_modules/react-native-image-viewing/dist/ImageViewing.js
@@ -6,7 +6,7 @@
  *
  */
 import React, { useCallback, useEffect } from "react";
-import { Animated, Dimensions, StyleSheet, View, VirtualizedList, Modal, } from "react-native";
+import { Animated, Dimensions, Image, StyleSheet, View, VirtualizedList, Modal, } from "react-native";
 import ImageItem from "./components/ImageItem/ImageItem";
 import ImageDefaultHeader from "./components/ImageDefaultHeader";
 import StatusBarManager from "./components/StatusBarManager";
@@ -18,7 +18,7 @@ const DEFAULT_BG_COLOR = "#000";
 const DEFAULT_DELAY_LONG_PRESS = 800;
 const SCREEN = Dimensions.get("screen");
 const SCREEN_WIDTH = SCREEN.width;
-function ImageViewing({ images, keyExtractor, imageIndex, visible, onRequestClose, onLongPress = () => { }, onImageIndexChange, animationType = DEFAULT_ANIMATION_TYPE, backgroundColor = DEFAULT_BG_COLOR, presentationStyle, swipeToCloseEnabled, doubleTapToZoomEnabled, delayLongPress = DEFAULT_DELAY_LONG_PRESS, HeaderComponent, FooterComponent, }) {
+function ImageViewing({ ImageComponent = Image, images, keyExtractor, imageIndex, visible, onRequestClose, onLongPress = () => { }, onImageIndexChange, animationType = DEFAULT_ANIMATION_TYPE, backgroundColor = DEFAULT_BG_COLOR, presentationStyle, swipeToCloseEnabled, doubleTapToZoomEnabled, delayLongPress = DEFAULT_DELAY_LONG_PRESS, HeaderComponent, FooterComponent, }) {
     const imageList = React.createRef();
     const [opacity, onRequestCloseEnhanced] = useRequestClose(onRequestClose);
     const [currentImageIndex, onScroll] = useImageIndexChange(imageIndex, SCREEN);
@@ -51,7 +51,7 @@ function ImageViewing({ images, keyExtractor, imageIndex, visible, onRequestClos
         length: SCREEN_WIDTH,
         offset: SCREEN_WIDTH * index,
         index,
-    })} renderItem={({ item: imageSrc }) => (<ImageItem onZoom={onZoom} imageSrc={imageSrc} onRequestClose={onRequestCloseEnhanced} onLongPress={onLongPress} delayLongPress={delayLongPress} swipeToCloseEnabled={swipeToCloseEnabled} doubleTapToZoomEnabled={doubleTapToZoomEnabled}/>)} onMomentumScrollEnd={onScroll} 
+    })} renderItem={({ item: imageSrc }) => (<ImageItem ImageComponent={ImageComponent} onZoom={onZoom} imageSrc={imageSrc} onRequestClose={onRequestCloseEnhanced} onLongPress={onLongPress} delayLongPress={delayLongPress} swipeToCloseEnabled={swipeToCloseEnabled} doubleTapToZoomEnabled={doubleTapToZoomEnabled}/>)} onMomentumScrollEnd={onScroll} 
     //@ts-ignore
     keyExtractor={(imageSrc, index) => keyExtractor ? keyExtractor(imageSrc, index) : imageSrc.uri || `${imageSrc}`}/>
         {typeof FooterComponent !== "undefined" && (<Animated.View style={[styles.footer, { transform: footerTransform }]}>
diff --git a/node_modules/react-native-image-viewing/dist/components/ImageItem/ImageItem.android.js b/node_modules/react-native-image-viewing/dist/components/ImageItem/ImageItem.android.js
index 7099ccb..a37c024 100644
--- a/node_modules/react-native-image-viewing/dist/components/ImageItem/ImageItem.android.js
+++ b/node_modules/react-native-image-viewing/dist/components/ImageItem/ImageItem.android.js
@@ -16,7 +16,7 @@ const SWIPE_CLOSE_VELOCITY = 1.75;
 const SCREEN = Dimensions.get("window");
 const SCREEN_WIDTH = SCREEN.width;
 const SCREEN_HEIGHT = SCREEN.height;
-const ImageItem = ({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPress, swipeToCloseEnabled = true, doubleTapToZoomEnabled = true, }) => {
+const ImageItem = ({ ImageComponent, imageSrc, onZoom, onRequestClose, onLongPress, delayLongPress, swipeToCloseEnabled = true, doubleTapToZoomEnabled = true, }) => {
     const imageContainer = React.createRef();
     const imageDimensions = useImageDimensions(imageSrc);
     const [translate, scale] = getImageTransform(imageDimensions, SCREEN);
@@ -69,7 +69,9 @@ const ImageItem = ({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPre
         onScroll,
         onScrollEndDrag,
     })}>
-      <Animated.Image {...panHandlers} source={imageSrc} style={imageStylesWithOpacity} onLoad={onLoaded}/>
+      <Animated.View {...panHandlers} source={imageSrc} style={imageStylesWithOpacity}>
+          <ImageComponent source={imageSrc} style={{width: imageStylesWithOpacity.width, height: imageStylesWithOpacity.height}} onLoad={onLoaded} />
+      </Animated.View>
       {(!isLoaded || !imageDimensions) && <ImageLoading />}
     </Animated.ScrollView>);
 };
diff --git a/node_modules/react-native-image-viewing/dist/components/ImageItem/ImageItem.ios.js b/node_modules/react-native-image-viewing/dist/components/ImageItem/ImageItem.ios.js
index c87e88c..332a096 100644
--- a/node_modules/react-native-image-viewing/dist/components/ImageItem/ImageItem.ios.js
+++ b/node_modules/react-native-image-viewing/dist/components/ImageItem/ImageItem.ios.js
@@ -16,7 +16,7 @@ const SWIPE_CLOSE_VELOCITY = 1.55;
 const SCREEN = Dimensions.get("screen");
 const SCREEN_WIDTH = SCREEN.width;
 const SCREEN_HEIGHT = SCREEN.height;
-const ImageItem = ({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPress, swipeToCloseEnabled = true, doubleTapToZoomEnabled = true, }) => {
+const ImageItem = ({ ImageComponent, imageSrc, onZoom, onRequestClose, onLongPress, delayLongPress, swipeToCloseEnabled = true, doubleTapToZoomEnabled = true, }) => {
     const scrollViewRef = useRef(null);
     const [loaded, setLoaded] = useState(false);
     const [scaled, setScaled] = useState(false);
@@ -62,7 +62,9 @@ const ImageItem = ({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPre
     })}>
         {(!loaded || !imageDimensions) && <ImageLoading />}
         <TouchableWithoutFeedback onPress={doubleTapToZoomEnabled ? handleDoubleTap : undefined} onLongPress={onLongPressHandler} delayLongPress={delayLongPress}>
-          <Animated.Image source={imageSrc} style={imageStylesWithOpacity} onLoad={() => setLoaded(true)}/>
+            <Animated.View style={imageStylesWithOpacity}>
+                <ImageComponent source={imageSrc} style={{width: imageStylesWithOpacity.width, height: imageStylesWithOpacity.height}} onLoad={() => setLoaded(true)} />
+            </Animated.View>
         </TouchableWithoutFeedback>
       </ScrollView>
     </View>);

[chandumatrix004]

https://github.com/tomgreco/react-native-image-viewing

I have forked this and switched it to use react-native-fast-image by default. If interested.

This Github link isn't working. Care to repost the correct link please!

[AmbuSreedharan]

This is big one for me too. Would love fast-image support.

[marcelglaeser]

That is my solution for an own image component: https://github.com/marcelglaeser/react-native-image-viewing Please try and give me a feedback. PR is running.

[vitzaoral]

So it's some time, still no possibility to use some custom Image component? :(