Comments (15)
mokoshi
commented on June 27, 2024
5
It would be great if we could use libraries like react-native-cached-image to optimize loading.
from react-native-image-viewing.
gerryfletch
commented on June 27, 2024
5
I would also like to see this, particularly for use with react-native-fast-image 😃
from react-native-image-viewing.
gerryfletch
commented on June 27, 2024
1
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 :)
from react-native-image-viewing.
marcelglaeser
commented on June 27, 2024
1
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.
from react-native-image-viewing.
vitzaoral
commented on June 27, 2024
1
So it's some time, still no possibility to use some custom Image component? :(
from react-native-image-viewing.
robwalkerco
commented on June 27, 2024
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.
from react-native-image-viewing.
darron1217
commented on June 27, 2024
Any update on this issue?
from react-native-image-viewing.
huyhai
commented on June 27, 2024
+1
from react-native-image-viewing.
ourfamilygithub
commented on June 27, 2024
+1
from react-native-image-viewing.
pmenabe
commented on June 27, 2024
+1
from react-native-image-viewing.
raphaelmsr
commented on June 27, 2024
+1 😊
from react-native-image-viewing.
tomgreco
commented on June 27, 2024
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.
from react-native-image-viewing.
eminsr
commented on June 27, 2024
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>);
from react-native-image-viewing.
chandumatrix004
commented on June 27, 2024
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!
from react-native-image-viewing.
AmbuSreedharan
commented on June 27, 2024
This is big one for me too. Would love fast-image support.
from react-native-image-viewing.
Related Issues (20)
- Update images while fullscreen is active
- How does ImageView work? HOT 1
- Is this repository dead? HOT 1
- should reset internal imageIndex state after close HOT 1
- It doesnt work on expo 44, react native 64.3
- Type for onLongPress is not correct in readMe
- Second image not loading right away
- Possibility to Save an Image HOT 1
- RTL Fixed but zoom has been broken
- Showing ImageView component in a Modal is not working properly when closing
- 删除关闭闪动 HOT 1
- Please add a prop for single tap its very necessary. HOT 1
- Cant zoom gif image
- Inconsistent double tap to zoom behavior
- Incorrect usage of Animated.Value causing gestures and state to be reset
- Update currentImageIndex on images array changes
- image style
- Not working in IOS HOT 5
- How to pagination indicator in this?
- Expo v49: Unexpected Application Shutdown when using
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-image-viewing.