react-native-gesture-image-viewer 0.5.2 → 0.5.4
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.
- package/README.md +4 -0
- package/lib/module/GestureImageViewer.js +14 -11
- package/lib/module/GestureImageViewer.js.map +1 -1
- package/lib/module/WebPagingFixStyle.js +25 -0
- package/lib/module/WebPagingFixStyle.js.map +1 -0
- package/lib/typescript/src/GestureImageViewer.d.ts.map +1 -1
- package/lib/typescript/src/WebPagingFixStyle.d.ts +6 -0
- package/lib/typescript/src/WebPagingFixStyle.d.ts.map +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -27,6 +27,10 @@ Existing libraries often have limited customization options or performance issue
|
|
|
27
27
|
- [📁 Example Project](/example/) - Real implementation code with various use cases
|
|
28
28
|
- [🤖 Expo Go](https://snack.expo.dev/@harang/react-native-gesture-image-viewer) - Try it instantly on Snack Expo
|
|
29
29
|
|
|
30
|
+
<p align="center">
|
|
31
|
+
<img src="./assets/example.gif" width="600" />
|
|
32
|
+
</p>
|
|
33
|
+
|
|
30
34
|
### Prerequisites
|
|
31
35
|
|
|
32
36
|
> [!IMPORTANT]
|
|
@@ -7,15 +7,8 @@ import Animated from 'react-native-reanimated';
|
|
|
7
7
|
import { registry } from "./ImageViewerRegistry.js";
|
|
8
8
|
import { useGestureImageViewer } from "./useGestureImageViewer.js";
|
|
9
9
|
import { isFlashListLike, isFlatListLike, isScrollViewLike } from "./utils.js";
|
|
10
|
+
import WebPagingFixStyle from "./WebPagingFixStyle.js";
|
|
10
11
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
|
-
const WebPagingFix = () => {
|
|
12
|
-
if (Platform.OS !== 'web') {
|
|
13
|
-
return null;
|
|
14
|
-
}
|
|
15
|
-
return /*#__PURE__*/_jsx("style", {
|
|
16
|
-
children: `[data-paging-enabled-fix] > div > div > div {height: 100%;}`
|
|
17
|
-
});
|
|
18
|
-
};
|
|
19
12
|
export function GestureImageViewer({
|
|
20
13
|
id = 'default',
|
|
21
14
|
data,
|
|
@@ -99,6 +92,11 @@ export function GestureImageViewer({
|
|
|
99
92
|
style: [styles.background, backdropStyleProps, backdropStyle]
|
|
100
93
|
}), /*#__PURE__*/_jsx(Animated.View, {
|
|
101
94
|
style: [styles.content, animatedStyle],
|
|
95
|
+
...(Platform.OS === 'web' && isFlashListLike(Component) && {
|
|
96
|
+
dataSet: {
|
|
97
|
+
'flash-list-paging-enabled-fix': true
|
|
98
|
+
}
|
|
99
|
+
}),
|
|
102
100
|
children: isScrollViewLike(Component) ? /*#__PURE__*/_jsx(Component, {
|
|
103
101
|
ref: listRef,
|
|
104
102
|
...commonProps,
|
|
@@ -113,6 +111,9 @@ export function GestureImageViewer({
|
|
|
113
111
|
data: data,
|
|
114
112
|
renderItem: renderItem,
|
|
115
113
|
initialScrollIndex: initialIndex,
|
|
114
|
+
style: {
|
|
115
|
+
height: '100%'
|
|
116
|
+
},
|
|
116
117
|
keyExtractor: keyExtractor,
|
|
117
118
|
windowSize: 3,
|
|
118
119
|
maxToRenderPerBatch: 3,
|
|
@@ -120,14 +121,16 @@ export function GestureImageViewer({
|
|
|
120
121
|
...(isFlashListLike(Component) && {
|
|
121
122
|
estimatedItemSize: width + itemSpacing
|
|
122
123
|
}),
|
|
123
|
-
...(Platform.OS === 'web' && {
|
|
124
|
+
...(Platform.OS === 'web' && isFlatListLike(Component) && {
|
|
124
125
|
dataSet: {
|
|
125
|
-
'paging-enabled-fix': true
|
|
126
|
+
'flat-list-paging-enabled-fix': true
|
|
126
127
|
}
|
|
127
128
|
}),
|
|
128
129
|
...listProps
|
|
129
130
|
})
|
|
130
|
-
}), /*#__PURE__*/_jsx(
|
|
131
|
+
}), /*#__PURE__*/_jsx(WebPagingFixStyle, {
|
|
132
|
+
Component: Component
|
|
133
|
+
})]
|
|
131
134
|
})
|
|
132
135
|
})
|
|
133
136
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useEffect","useMemo","Platform","StyleSheet","useWindowDimensions","View","Gesture","GestureDetector","GestureHandlerRootView","Animated","registry","useGestureImageViewer","isFlashListLike","isFlatListLike","isScrollViewLike","jsx","_jsx","jsxs","_jsxs","
|
|
1
|
+
{"version":3,"names":["useCallback","useEffect","useMemo","Platform","StyleSheet","useWindowDimensions","View","Gesture","GestureDetector","GestureHandlerRootView","Animated","registry","useGestureImageViewer","isFlashListLike","isFlatListLike","isScrollViewLike","WebPagingFixStyle","jsx","_jsx","jsxs","_jsxs","GestureImageViewer","id","data","renderImage","renderContainer","ListComponent","width","customWidth","listProps","backdropStyle","backdropStyleProps","containerStyle","initialIndex","itemSpacing","props","Component","screenWidth","listRef","isZoomed","dismissGesture","zoomGesture","onMomentumScrollEnd","animatedStyle","renderItem","item","index","style","height","justifyContent","alignItems","marginHorizontal","children","getItemLayout","_","length","offset","keyExtractor","gesture","Race","createManager","deleteManager","commonProps","horizontal","scrollEnabled","showsHorizontalScrollIndicator","snapToInterval","snapToAlignment","decelerationRate","scrollEventThrottle","removeClippedSubviews","listComponent","styles","container","background","content","OS","dataSet","ref","map","initialScrollIndex","windowSize","maxToRenderPerBatch","estimatedItemSize","create","flex","position","top","left","right","bottom","backgroundColor"],"sourceRoot":"../../src","sources":["GestureImageViewer.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { Platform } from 'react-native';
|
|
4
|
+
import { isFlashListLike, isFlatListLike } from "./utils.js";
|
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
function WebPagingFixStyle({
|
|
7
|
+
Component
|
|
8
|
+
}) {
|
|
9
|
+
if (Platform.OS !== 'web') {
|
|
10
|
+
return null;
|
|
11
|
+
}
|
|
12
|
+
if (isFlashListLike(Component)) {
|
|
13
|
+
return /*#__PURE__*/_jsx("style", {
|
|
14
|
+
children: `[data-flash-list-paging-enabled-fix] > div {height: 100%;}`
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
if (isFlatListLike(Component)) {
|
|
18
|
+
return /*#__PURE__*/_jsx("style", {
|
|
19
|
+
children: `[data-flat-list-paging-enabled-fix] > div > div > div {height: 100%;}`
|
|
20
|
+
});
|
|
21
|
+
}
|
|
22
|
+
return null;
|
|
23
|
+
}
|
|
24
|
+
export default WebPagingFixStyle;
|
|
25
|
+
//# sourceMappingURL=WebPagingFixStyle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["Platform","isFlashListLike","isFlatListLike","jsx","_jsx","WebPagingFixStyle","Component","OS","children"],"sourceRoot":"../../src","sources":["WebPagingFixStyle.tsx"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AACvC,SAASC,eAAe,EAAEC,cAAc,QAAQ,YAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAM1D,SAASC,iBAAiBA,CAAC;EAAEC;AAAkC,CAAC,EAAE;EAChE,IAAIN,QAAQ,CAACO,EAAE,KAAK,KAAK,EAAE;IACzB,OAAO,IAAI;EACb;EAEA,IAAIN,eAAe,CAACK,SAAS,CAAC,EAAE;IAC9B,oBAAOF,IAAA;MAAAI,QAAA,EAAQ;IAA4D,CAAQ,CAAC;EACtF;EAEA,IAAIN,cAAc,CAACI,SAAS,CAAC,EAAE;IAC7B,oBAAOF,IAAA;MAAAI,QAAA,EAAQ;IAAuE,CAAQ,CAAC;EACjG;EAEA,OAAO,IAAI;AACb;AAEA,eAAeH,iBAAiB","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GestureImageViewer.d.ts","sourceRoot":"","sources":["../../../src/GestureImageViewer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAyE,MAAM,cAAc,CAAC;AAIpH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"GestureImageViewer.d.ts","sourceRoot":"","sources":["../../../src/GestureImageViewer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAyE,MAAM,cAAc,CAAC;AAIpH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAKvD,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,GAAG,OAAO,QAAQ,EAAE,EAChE,EAAc,EACd,IAAI,EACJ,WAAW,EACX,eAAe,EACf,aAAa,EACb,KAAK,EAAE,WAAW,EAClB,SAAS,EACT,aAAa,EAAE,kBAAkB,EACjC,cAAc,EACd,YAAgB,EAChB,WAAe,EACf,GAAG,KAAK,EACT,EAAE,uBAAuB,CAAC,CAAC,EAAE,EAAE,CAAC,2CAyHhC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
type WebPagingFixStyleProps = {
|
|
2
|
+
Component: React.ComponentType<any>;
|
|
3
|
+
};
|
|
4
|
+
declare function WebPagingFixStyle({ Component }: WebPagingFixStyleProps): import("react/jsx-runtime").JSX.Element | null;
|
|
5
|
+
export default WebPagingFixStyle;
|
|
6
|
+
//# sourceMappingURL=WebPagingFixStyle.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WebPagingFixStyle.d.ts","sourceRoot":"","sources":["../../../src/WebPagingFixStyle.tsx"],"names":[],"mappings":"AAGA,KAAK,sBAAsB,GAAG;IAC5B,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;CACrC,CAAC;AAEF,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,EAAE,sBAAsB,kDAc/D;AAED,eAAe,iBAAiB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-gesture-image-viewer",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.4",
|
|
4
4
|
"description": "🖼️ A highly customizable and easy-to-use React Native image viewer with gesture support and external controls",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|