Open History to see the last commit
6 * LICENSE file in the root directory of this source tree.
7 *
8 */
9-import React, { useCallback, useRef, useEffect } from "react";
10-import { Animated, Dimensions, StyleSheet, View, VirtualizedList, Modal, } from "react-native";
11+import React, { useCallback, useRef, useEffect, useLayoutEffect } from "react";
12+import { Animated, Dimensions, StyleSheet, View, VirtualizedList, Modal, Platform, useWindowDimensions, } from "react-native";
13 import ImageItem from "./components/ImageItem/ImageItem";
14 import ImageDefaultHeader from "./components/ImageDefaultHeader";
15 import StatusBarManager from "./components/StatusBarManager";
17 const DEFAULT_BG_COLOR = "#000";
18 const DEFAULT_DELAY_LONG_PRESS = 800;
19 const SCREEN = Dimensions.get("screen");
20-const SCREEN_WIDTH = SCREEN.width;
21+const useViewingDimensions = Platform.OS === "android" ? useWindowDimensions : () => SCREEN;
22 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, }) {
23+ const viewport = useViewingDimensions();
24+ const SCREEN_WIDTH = viewport.width;
25+ const viewportKey = Platform.OS === "android" ? `${viewport.width}:${viewport.height}` : undefined;
26 const imageList = useRef(null);
27 const [opacity, onRequestCloseEnhanced] = useRequestClose(onRequestClose);
28- const [currentImageIndex, onScroll] = useImageIndexChange(imageIndex, SCREEN);
29- const [headerTransform, footerTransform, toggleBarsVisible] = useAnimatedComponents();
30+ const [currentImageIndex, onScroll] = useImageIndexChange(imageIndex, viewport);
31+ const [headerTransform, footerTransform, toggleBarsVisible] = useAnimatedComponents(viewportKey);
32 useEffect(() => {
33 if (onImageIndexChange) {
34 onImageIndexChange(currentImageIndex);
35 }
36 }, [currentImageIndex]);
37- const onZoom = useCallback((isScaled) => {
38+ const activeZoom = useRef(null);
39+ const onZoom = useCallback(function handleZoom(isScaled) {
40+ if (Platform.OS === "android" && activeZoom.current !== handleZoom) {
41+ return;
42+ }
43 var _a, _b;
44 // @ts-ignore
45 (_b = (_a = imageList) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.setNativeProps({ scrollEnabled: !isScaled });
46 toggleBarsVisible(!isScaled);
47- }, [imageList]);
48+ }, [imageList, toggleBarsVisible]);
49+ useLayoutEffect(() => {
50+ activeZoom.current = onZoom;
51+ return () => { activeZoom.current = null; };
52+ }, [onZoom]);
53 if (!visible) {
54 return null;
55 }
57 imageIndex: currentImageIndex,
58 })) : (<ImageDefaultHeader onRequestClose={onRequestCloseEnhanced}/>)}
59 </Animated.View>
60- <VirtualizedList ref={imageList} data={images} horizontal pagingEnabled windowSize={2} initialNumToRender={1} maxToRenderPerBatch={1} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} initialScrollIndex={imageIndex} getItem={(_, index) => images[index]} getItemCount={() => images.length} getItemLayout={(_, index) => ({
61+ {/* Reset Android image gestures on resize while preserving custom header state. */}
62+ <VirtualizedList key={viewportKey} ref={imageList} onScroll={Platform.OS === "android" ? onScroll : undefined} scrollEventThrottle={Platform.OS === "android" ? 16 : undefined} data={images} horizontal pagingEnabled windowSize={2} initialNumToRender={1} maxToRenderPerBatch={1} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} initialScrollIndex={currentImageIndex} getItem={(_, index) => images[index]} getItemCount={() => images.length} getItemLayout={(_, index) => ({
63 length: SCREEN_WIDTH,
64 offset: SCREEN_WIDTH * index,
65 index,
71 *
72 */
73 import React, { useCallback, useRef, useState } from "react";
74-import { Animated, ScrollView, Dimensions, StyleSheet, } from "react-native";
75+import { Animated, ScrollView, Dimensions, View, } from "react-native";
76 import useImageDimensions from "../../hooks/useImageDimensions";
77 import usePanResponder from "../../hooks/usePanResponder";
78 import { getImageStyles, getImageTransform } from "../../utils";
79 import { ImageLoading } from "./ImageLoading";
80 const SWIPE_CLOSE_OFFSET = 75;
81 const SWIPE_CLOSE_VELOCITY = 1.75;
82-const SCREEN = Dimensions.get("window");
83-const SCREEN_WIDTH = SCREEN.width;
84-const SCREEN_HEIGHT = SCREEN.height;
85 const ImageItem = ({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPress, swipeToCloseEnabled = true, doubleTapToZoomEnabled = true, }) => {
86+ const SCREEN = Dimensions.get("window");
87+ const SCREEN_WIDTH = SCREEN.width;
88+ const SCREEN_HEIGHT = SCREEN.height;
89 const imageContainer = useRef(null);
90 const imageDimensions = useImageDimensions(imageSrc);
91 const [translate, scale] = getImageTransform(imageDimensions, SCREEN);
93 onZoom(isZoomed);
94 if ((_a = imageContainer) === null || _a === void 0 ? void 0 : _a.current) {
95 imageContainer.current.setNativeProps({
96- scrollEnabled: !isZoomed,
97+ scrollEnabled: swipeToCloseEnabled && !isZoomed,
98 });
99 }
100- }, [imageContainer]);
101+ }, [imageContainer, onZoom, swipeToCloseEnabled]);
102 const onLongPressHandler = useCallback(() => {
103 onLongPress(imageSrc);
104 }, [imageSrc, onLongPress]);
106 const offsetY = (_c = (_b = (_a = nativeEvent) === null || _a === void 0 ? void 0 : _a.contentOffset) === null || _b === void 0 ? void 0 : _b.y, (_c !== null && _c !== void 0 ? _c : 0));
107 scrollValueY.setValue(offsetY);
108 };
109- return (<ScrollView ref={imageContainer} style={styles.listItem} pagingEnabled nestedScrollEnabled showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} contentContainerStyle={styles.imageScrollContainer} scrollEnabled={swipeToCloseEnabled} {...(swipeToCloseEnabled && {
110+ return (<ScrollView ref={imageContainer} style={{ width: SCREEN_WIDTH, height: SCREEN_HEIGHT }} pagingEnabled nestedScrollEnabled showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} contentContainerStyle={{ height: SCREEN_HEIGHT * 2 }} scrollEnabled={swipeToCloseEnabled} {...(swipeToCloseEnabled && {
111 onScroll,
112 onScrollEndDrag,
113 })}>
114- <Animated.Image {...panHandlers} source={imageSrc} style={imageStylesWithOpacity} onLoad={onLoaded}/>
115- {(!isLoaded || !imageDimensions) && <ImageLoading />}
116+ {/* Pinch from anywhere on screen, not only on the fitted image. */}
117+ <View {...panHandlers} pointerEvents={isLoaded && imageDimensions ? "auto" : "none"} style={{ width: SCREEN_WIDTH, height: SCREEN_HEIGHT }}>
118+ <Animated.Image source={imageSrc} style={imageStylesWithOpacity} onLoad={onLoaded}/>
119+ {(!isLoaded || !imageDimensions) && <ImageLoading />}
120+ </View>
121 </ScrollView>);
122 };
123-const styles = StyleSheet.create({
124- listItem: {
125- width: SCREEN_WIDTH,
126- height: SCREEN_HEIGHT,
127- },
128- imageScrollContainer: {
129- height: SCREEN_HEIGHT * 2,
130- },
131-});
132 export default React.memo(ImageItem);
138 *
139 */
140 import React from "react";
141-import { ActivityIndicator, Dimensions, StyleSheet, View } from "react-native";
142+import { ActivityIndicator, Dimensions, Platform, StyleSheet, View } from "react-native";
143 const SCREEN = Dimensions.get("screen");
144-const SCREEN_WIDTH = SCREEN.width;
145-const SCREEN_HEIGHT = SCREEN.height;
146-export const ImageLoading = () => (<View style={styles.loading}>
147+export const ImageLoading = () => {
148+ const { width, height } = Platform.OS === "android" ? Dimensions.get("window") : SCREEN;
149+ return (<View style={[styles.loading, { width, height }]}>
150 <ActivityIndicator size="small" color="#FFF"/>
151 </View>);
152+};
153 const styles = StyleSheet.create({
154- listItem: {
155- width: SCREEN_WIDTH,
156- height: SCREEN_HEIGHT,
157- },
158 loading: {
159- width: SCREEN_WIDTH,
160- height: SCREEN_HEIGHT,
161 alignItems: "center",
162 justifyContent: "center",
163 },
164- imageScrollContainer: {
165- height: SCREEN_HEIGHT,
166- },
167 });
173 *
174 */
175 import { Animated } from "react-native";
176-declare const useAnimatedComponents: () => readonly [{
177+declare const useAnimatedComponents: (resetKey?: string) => readonly [{
178 [key: string]: Animated.Value;
179 }[], {
180 [key: string]: Animated.Value;
186 * LICENSE file in the root directory of this source tree.
187 *
188 */
189+import { useCallback, useMemo } from "react";
190 import { Animated } from "react-native";
191 const INITIAL_POSITION = { x: 0, y: 0 };
192 const ANIMATION_CONFIG = {
193 duration: 200,
194 useNativeDriver: true,
195 };
196-const useAnimatedComponents = () => {
197- const headerTranslate = new Animated.ValueXY(INITIAL_POSITION);
198- const footerTranslate = new Animated.ValueXY(INITIAL_POSITION);
199- const toggleVisible = (isVisible) => {
200+const useAnimatedComponents = (resetKey) => {
201+ const [headerTranslate, footerTranslate] = useMemo(() => [
202+ new Animated.ValueXY(INITIAL_POSITION),
203+ new Animated.ValueXY(INITIAL_POSITION),
204+ ], [resetKey]);
205+ const toggleVisible = useCallback((isVisible) => {
206 if (isVisible) {
207 Animated.parallel([
208 Animated.timing(headerTranslate.y, { ...ANIMATION_CONFIG, toValue: 0 }),
210 }),
211 ]).start();
212 }
213- };
214+ }, [headerTranslate, footerTranslate]);
215 const headerTransform = headerTranslate.getTranslateTransform();
216 const footerTransform = footerTranslate.getTranslateTransform();
217 return [headerTransform, footerTransform, toggleVisible];
223 * LICENSE file in the root directory of this source tree.
224 *
225 */
226-import { useState } from "react";
227+import { useCallback, useLayoutEffect, useRef, useState } from "react";
228+import { Platform } from "react-native";
229 const useImageIndexChange = (imageIndex, screen) => {
230 const [currentImageIndex, setImageIndex] = useState(imageIndex);
231- const onScroll = (event) => {
232+ const indexRef = useRef(imageIndex);
233+ const activeScroll = useRef(null);
234+ const onScroll = useCallback(function handleScroll(event) {
235+ if (Platform.OS === "android") {
236+ // Events at this width stay valid until commit; replaced or relaid-out lists do not.
237+ if (activeScroll.current !== handleScroll ||
238+ Math.abs(event.nativeEvent.layoutMeasurement.width - screen.width) > 1) {
239+ return;
240+ }
241+ }
242 const { nativeEvent: { contentOffset: { x: scrollX }, }, } = event;
243 if (screen.width) {
244 const nextIndex = Math.round(scrollX / screen.width);
245- setImageIndex(nextIndex < 0 ? 0 : nextIndex);
246+ const boundedIndex = nextIndex < 0 ? 0 : nextIndex;
247+ if (boundedIndex !== indexRef.current) {
248+ indexRef.current = boundedIndex;
249+ setImageIndex(boundedIndex);
250+ }
251 }
252- };
253+ }, [screen]);
254+ useLayoutEffect(() => {
255+ activeScroll.current = onScroll;
256+ return () => { activeScroll.current = null; };
257+ }, [onScroll]);
258 return [currentImageIndex, onScroll];
259 };
260 export default useImageIndexChange;
266 import { useMemo, useEffect } from "react";
267 import { Animated, Dimensions, } from "react-native";
268 import { createPanResponder, getDistanceBetweenTouches, getImageTranslate, getImageDimensionsByTranslate, } from "../utils";
269-const SCREEN = Dimensions.get("window");
270-const SCREEN_WIDTH = SCREEN.width;
271-const SCREEN_HEIGHT = SCREEN.height;
272-const MIN_DIMENSION = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
273 const SCALE_MAX = 2;
274 const DOUBLE_TAP_DELAY = 300;
275 const OUT_BOUND_MULTIPLIER = 0.75;
276 const usePanResponder = ({ initialScale, initialTranslate, onZoom, doubleTapToZoomEnabled, onLongPress, delayLongPress, }) => {
277+ const SCREEN = Dimensions.get("window");
278+ const SCREEN_WIDTH = SCREEN.width;
279+ const SCREEN_HEIGHT = SCREEN.height;
280+ const MIN_DIMENSION = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
281 let numberInitialTouches = 1;
282 let initialTouches = [];
283 let currentScale = initialScale;
285 tmpTranslate = null;
286 }
287 },
288+ // A gesture taken over mid-pinch must commit like a release, or pans stay
289+ // gated on the pre-pinch scale while the image still shows zoomed.
290+ onTerminate: () => handlers.onRelease(),
291 };
292 const panResponder = useMemo(() => createPanResponder(handlers), [handlers]);
293 return [panResponder.panHandlers, scaleValue, translateValue];