@gyjshow/react-native-image-viewing 1.0.6 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/ImageViewing.js +8 -11
  2. package/dist/components/ImageItem/ImageItem.android.js +1 -1
  3. package/dist/components/ImageItem/ImageItem.ios.js +1 -1
  4. package/dist/components/ImageItem/ImageLoading.js +1 -1
  5. package/dist/hooks/usePanResponder.js +1 -1
  6. package/package.json +1 -1
package/dist/ImageViewing.js CHANGED
@@ -6,7 +6,7 @@
6
6
  *
7
7
  */
8
8
  import React, { useCallback, useRef, useEffect } from "react";
9
- import { Animated, Dimensions, StyleSheet, View, VirtualizedList, Modal, } from "react-native";
9
+ import { Animated, Dimensions, StyleSheet, View, FlatList, Modal, } from "react-native";
10
10
  import ImageItem from "./components/ImageItem/ImageItem";
11
11
  import ImageDefaultHeader from "./components/ImageDefaultHeader";
12
12
  import StatusBarManager from "./components/StatusBarManager";
@@ -16,7 +16,7 @@ import useRequestClose from "./hooks/useRequestClose";
16
16
  const DEFAULT_ANIMATION_TYPE = "fade";
17
17
  const DEFAULT_BG_COLOR = "#000";
18
18
  const DEFAULT_DELAY_LONG_PRESS = 800;
19
- const SCREEN = Dimensions.get("window");
19
+ const SCREEN = Dimensions.get("screen");
20
20
  const SCREEN_WIDTH = SCREEN.width;
21
21
  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, modalProps, }) {
22
22
  const imageList = useRef(null);
@@ -45,17 +45,14 @@ function ImageViewing({ images, keyExtractor, imageIndex, visible, onRequestClos
45
45
  imageIndex: currentImageIndex,
46
46
  })) : (<ImageDefaultHeader onRequestClose={onRequestCloseEnhanced}/>)}
47
47
  </Animated.View>
48
- <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) => ({
48
+ <FlatList ref={imageList} data={images} horizontal pagingEnabled windowSize={2} initialNumToRender={1} maxToRenderPerBatch={1} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} initialScrollIndex={imageIndex} getItemLayout={(_, index) => ({
49
49
  length: SCREEN_WIDTH,
50
50
  offset: SCREEN_WIDTH * index,
51
51
  index,
52
- })} renderItem={({ item: imageSrc }) => (<ImageItem onZoom={onZoom} imageSrc={imageSrc} onRequestClose={onRequestCloseEnhanced} onLongPress={onLongPress} delayLongPress={delayLongPress} swipeToCloseEnabled={swipeToCloseEnabled} doubleTapToZoomEnabled={doubleTapToZoomEnabled}/>)} onMomentumScrollEnd={onScroll}
53
- //@ts-ignore
54
- keyExtractor={(imageSrc, index) => keyExtractor
55
- ? keyExtractor(imageSrc, index)
56
- : typeof imageSrc === "number"
57
- ? `${imageSrc}`
58
- : imageSrc.uri}/>
52
+ })} renderItem={({ item: imageSrc }) => (<ImageItem onZoom={onZoom} imageSrc={imageSrc} onRequestClose={onRequestCloseEnhanced} onLongPress={onLongPress} delayLongPress={delayLongPress} swipeToCloseEnabled={swipeToCloseEnabled} doubleTapToZoomEnabled={doubleTapToZoomEnabled}/>)} onMomentumScrollEnd={onScroll} keyExtractor={(imageSrc, index) => {
53
+ var _a, _b;
54
+ return (_a = keyExtractor === null || keyExtractor === void 0 ? void 0 : keyExtractor(imageSrc, index)) !== null && _a !== void 0 ? _a : (typeof imageSrc === "number" ? `${imageSrc}` : (_b = imageSrc.uri) !== null && _b !== void 0 ? _b : `${index}`);
55
+ }}/>
59
56
  {typeof FooterComponent !== "undefined" && (<Animated.View style={[styles.footer, { transform: footerTransform }]}>
60
57
  {React.createElement(FooterComponent, {
61
58
  imageIndex: currentImageIndex,
@@ -82,5 +79,5 @@ const styles = StyleSheet.create({
82
79
  bottom: 0,
83
80
  },
84
81
  });
85
- const EnhancedImageViewing = (props) => (<ImageViewing key={props.imageIndex} {...props}/>);
82
+ const EnhancedImageViewing = (props) => (<ImageViewing {...props}/>);
86
83
  export default EnhancedImageViewing;
package/dist/components/ImageItem/ImageItem.android.js CHANGED
@@ -13,7 +13,7 @@ import { getImageStyles, getImageTransform } from "../../utils";
13
13
  import { ImageLoading } from "./ImageLoading";
14
14
  const SWIPE_CLOSE_OFFSET = 75;
15
15
  const SWIPE_CLOSE_VELOCITY = 1.75;
16
- const SCREEN = Dimensions.get("window");
16
+ const SCREEN = Dimensions.get("screen");
17
17
  const SCREEN_WIDTH = SCREEN.width;
18
18
  const SCREEN_HEIGHT = SCREEN.height;
19
19
  const ImageItem = ({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPress, swipeToCloseEnabled = true, doubleTapToZoomEnabled = true, }) => {
package/dist/components/ImageItem/ImageItem.ios.js CHANGED
@@ -13,7 +13,7 @@ import { getImageStyles, getImageTransform } from "../../utils";
13
13
  import { ImageLoading } from "./ImageLoading";
14
14
  const SWIPE_CLOSE_OFFSET = 75;
15
15
  const SWIPE_CLOSE_VELOCITY = 1.55;
16
- const SCREEN = Dimensions.get("window");
16
+ const SCREEN = Dimensions.get("screen");
17
17
  const SCREEN_WIDTH = SCREEN.width;
18
18
  const SCREEN_HEIGHT = SCREEN.height;
19
19
  const ImageItem = ({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPress, swipeToCloseEnabled = true, doubleTapToZoomEnabled = true, }) => {
package/dist/components/ImageItem/ImageLoading.js CHANGED
@@ -7,7 +7,7 @@
7
7
  */
8
8
  import React from "react";
9
9
  import { ActivityIndicator, Dimensions, StyleSheet, View } from "react-native";
10
- const SCREEN = Dimensions.get("window");
10
+ const SCREEN = Dimensions.get("screen");
11
11
  const SCREEN_WIDTH = SCREEN.width;
12
12
  const SCREEN_HEIGHT = SCREEN.height;
13
13
  export const ImageLoading = () => (<View style={styles.loading}>
package/dist/hooks/usePanResponder.js CHANGED
@@ -8,7 +8,7 @@
8
8
  import { useMemo, useEffect } from "react";
9
9
  import { Animated, Dimensions, } from "react-native";
10
10
  import { createPanResponder, getDistanceBetweenTouches, getImageTranslate, getImageDimensionsByTranslate, } from "../utils";
11
- const SCREEN = Dimensions.get("window");
11
+ const SCREEN = Dimensions.get("screen");
12
12
  const SCREEN_WIDTH = SCREEN.width;
13
13
  const SCREEN_HEIGHT = SCREEN.height;
14
14
  const MIN_DIMENSION = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gyjshow/react-native-image-viewing",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "description": "\"Enhanced image viewing component for React Native (Fork of react-native-image-viewing)",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",