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

package/dist/ImageViewing.js

@@ -6,7 +6,7 @@
  *
  */
 import React, { useCallback, useRef, useEffect } from "react";
-import { Animated, Dimensions, StyleSheet, View, VirtualizedList, Modal, } from "react-native";
+import { Animated, Dimensions, StyleSheet, View, FlatList, Modal, } from "react-native";
 import ImageItem from "./components/ImageItem/ImageItem";
 import ImageDefaultHeader from "./components/ImageDefaultHeader";
 import StatusBarManager from "./components/StatusBarManager";
@@ -16,7 +16,7 @@ import useRequestClose from "./hooks/useRequestClose";
 const DEFAULT_ANIMATION_TYPE = "fade";
 const DEFAULT_BG_COLOR = "#000";
 const DEFAULT_DELAY_LONG_PRESS = 800;
-const SCREEN = Dimensions.get("window");
+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, modalProps, }) {
     const imageList = useRef(null);
@@ -45,17 +45,14 @@ function ImageViewing({ images, keyExtractor, imageIndex, visible, onRequestClos
             imageIndex: currentImageIndex,
         })) : (<ImageDefaultHeader onRequestClose={onRequestCloseEnhanced}/>)}
         </Animated.View>
-        <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) => ({
+        <FlatList ref={imageList} data={images} horizontal pagingEnabled windowSize={2} initialNumToRender={1} maxToRenderPerBatch={1} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} initialScrollIndex={imageIndex} getItemLayout={(_, index) => ({
             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} 
-    //@ts-ignore
-    keyExtractor={(imageSrc, index) => keyExtractor
-            ? keyExtractor(imageSrc, index)
-            : typeof imageSrc === "number"
-                ? `${imageSrc}`
-                : imageSrc.uri}/>
+        })} renderItem={({ item: imageSrc }) => (<ImageItem onZoom={onZoom} imageSrc={imageSrc} onRequestClose={onRequestCloseEnhanced} onLongPress={onLongPress} delayLongPress={delayLongPress} swipeToCloseEnabled={swipeToCloseEnabled} doubleTapToZoomEnabled={doubleTapToZoomEnabled}/>)} onMomentumScrollEnd={onScroll} keyExtractor={(imageSrc, index) => {
+            var _a, _b;
+            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}`);
+        }}/>
         {typeof FooterComponent !== "undefined" && (<Animated.View style={[styles.footer, { transform: footerTransform }]}>
             {React.createElement(FooterComponent, {
                 imageIndex: currentImageIndex,
@@ -67,9 +64,6 @@ function ImageViewing({ images, keyExtractor, imageIndex, visible, onRequestClos
 const styles = StyleSheet.create({
     container: {
         flex: 1,
-        width: SCREEN_WIDTH,
-        justifyContent: "center",
-        alignItems: "center",
         backgroundColor: "#000",
     },
     header: {
@@ -85,5 +79,5 @@ const styles = StyleSheet.create({
         bottom: 0,
     },
 });
-const EnhancedImageViewing = (props) => (<ImageViewing key={props.imageIndex} {...props}/>);
+const EnhancedImageViewing = (props) => (<ImageViewing {...props}/>);
 export default EnhancedImageViewing;

package/dist/components/ImageItem/ImageItem.android.js

@@ -13,7 +13,7 @@ import { getImageStyles, getImageTransform } from "../../utils";
 import { ImageLoading } from "./ImageLoading";
 const SWIPE_CLOSE_OFFSET = 75;
 const SWIPE_CLOSE_VELOCITY = 1.75;
-const SCREEN = Dimensions.get("window");
+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, }) => {

package/dist/hooks/usePanResponder.js

@@ -8,7 +8,7 @@
 import { useMemo, useEffect } from "react";
 import { Animated, Dimensions, } from "react-native";
 import { createPanResponder, getDistanceBetweenTouches, getImageTranslate, getImageDimensionsByTranslate, } from "../utils";
-const SCREEN = Dimensions.get("window");
+const SCREEN = Dimensions.get("screen");
 const SCREEN_WIDTH = SCREEN.width;
 const SCREEN_HEIGHT = SCREEN.height;
 const MIN_DIMENSION = Math.min(SCREEN_WIDTH, SCREEN_HEIGHT);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@gyjshow/react-native-image-viewing",
-	"version": "1.0.5",
+	"version": "1.0.7",
 	"description": "\"Enhanced image viewing component for React Native (Fork of react-native-image-viewing)",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -18,7 +18,7 @@
 	],
 	"scripts": {
 		"build": "tsc",
-		"postversion": "npm build"
+		"postversion": "npm run build"
 	},
 	"peerDependencies": {
 		"react": ">=18.0.0",