@gyjshow/react-native-image-viewing 1.0.0 → 1.0.2
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 +16 -75
- package/package.json +45 -45
package/README.md
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
# react-native-image-viewing
|
|
1
|
+
# @gyjshow/react-native-image-viewing
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
React Native modal component for viewing images as a sliding gallery.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
This project is a maintained fork of:
|
|
6
|
+
https://github.com/AllenGe/react-native-image-viewing
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
- 🔥Double tap to zoom for both iOS and Android
|
|
10
|
-
- 🔥Supports swipe-to-close animation
|
|
11
|
-
- 🔥Custom header and footer components
|
|
12
|
-
- 🔥Uses VirtualizedList to optimize image loading and rendering
|
|
8
|
+
## Features
|
|
13
9
|
|
|
14
|
-
|
|
10
|
+
- Pinch zoom (iOS / Android)
|
|
11
|
+
- Double tap zoom
|
|
12
|
+
- Swipe to close
|
|
13
|
+
- Custom header / footer
|
|
14
|
+
- VirtualizedList image rendering
|
|
15
15
|
|
|
16
16
|
<p align="center">
|
|
17
17
|
<img src="https://github.com/jobtoday/react-native-image-viewing/blob/master/demo.gif?raw=true" height="480" />
|
|
@@ -19,83 +19,24 @@ Try with Expo: https://expo.io/@antonkalinin/react-native-image-viewing
|
|
|
19
19
|
|
|
20
20
|
## Installation
|
|
21
21
|
|
|
22
|
-
|
|
23
|
-
yarn add react-native-image-viewing
|
|
24
|
-
```
|
|
22
|
+
pnpm add @gyjshow/react-native-image-viewing
|
|
25
23
|
|
|
26
24
|
or
|
|
27
25
|
|
|
28
|
-
|
|
29
|
-
npm install --save react-native-image-viewing
|
|
30
|
-
```
|
|
26
|
+
npm install @gyjshow/react-native-image-viewing
|
|
31
27
|
|
|
32
28
|
## Usage
|
|
33
29
|
|
|
34
|
-
|
|
35
|
-
import ImageView from "react-native-image-viewing";
|
|
30
|
+
import ImageView from "@gyjshow/react-native-image-viewing";
|
|
36
31
|
|
|
37
32
|
const images = [
|
|
38
|
-
{
|
|
39
|
-
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
uri: "https://images.unsplash.com/photo-1573273787173-0eb81a833b34",
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
uri: "https://images.unsplash.com/photo-1569569970363-df7b6160d111",
|
|
46
|
-
},
|
|
33
|
+
{ uri: "https://images.unsplash.com/photo-1571501679680-de32f1e7aad4" },
|
|
34
|
+
{ uri: "https://images.unsplash.com/photo-1573273787173-0eb81a833b34" },
|
|
47
35
|
];
|
|
48
36
|
|
|
49
|
-
const [visible, setIsVisible] = useState(false);
|
|
50
|
-
|
|
51
37
|
<ImageView
|
|
52
38
|
images={images}
|
|
53
39
|
imageIndex={0}
|
|
54
40
|
visible={visible}
|
|
55
41
|
onRequestClose={() => setIsVisible(false)}
|
|
56
|
-
/>
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
#### [See Example](https://github.com/jobtoday/react-native-image-viewing/blob/master/example/App.tsx#L62-L80)
|
|
60
|
-
|
|
61
|
-
## Props
|
|
62
|
-
|
|
63
|
-
| Prop name | Description | Type | Required |
|
|
64
|
-
| ------------------------ | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | -------- |
|
|
65
|
-
| `images` | Array of images to display | ImageSource[] | true |
|
|
66
|
-
| `keyExtractor` | Uniqely identifying each image | (imageSrc: ImageSource, index: number) => string | false |
|
|
67
|
-
| `imageIndex` | Current index of image to display | number | true |
|
|
68
|
-
| `visible` | Is modal shown or not | boolean | true |
|
|
69
|
-
| `onRequestClose` | Function called to close the modal | function | true |
|
|
70
|
-
| `onImageIndexChange` | Function called when image index has been changed | function | false |
|
|
71
|
-
| `onLongPress` | Function called when image long pressed | function (event: GestureResponderEvent, image: ImageSource) | false |
|
|
72
|
-
| `delayLongPress` | Delay in ms, before onLongPress is called: default `800` | number | false |
|
|
73
|
-
| `animationType` | Animation modal presented with: default `fade` | `none`, `fade`, `slide` | false |
|
|
74
|
-
| `presentationStyle` | Modal presentation style: default: `fullScreen` **Android:** Use `overFullScreen` to hide StatusBar | `fullScreen`, `pageSheet`, `formSheet`, `overFullScreen` | false |
|
|
75
|
-
| `backgroundColor` | Background color of the modal in HEX (#000000EE) | string | false |
|
|
76
|
-
| `swipeToCloseEnabled` | Close modal with swipe up or down: default `true` | boolean | false |
|
|
77
|
-
| `doubleTapToZoomEnabled` | Zoom image by double tap on it: default `true` | boolean | false |
|
|
78
|
-
| `HeaderComponent` | Header component, gets current `imageIndex` as a prop | component, function | false |
|
|
79
|
-
| `FooterComponent` | Footer component, gets current `imageIndex` as a prop | component, function | false |
|
|
80
|
-
|
|
81
|
-
- type ImageSource = ImageURISource | ImageRequireSource
|
|
82
|
-
|
|
83
|
-
## Contributing
|
|
84
|
-
|
|
85
|
-
To start contributing clone this repo and then run inside `react-native-image-viewing` folder:
|
|
86
|
-
|
|
87
|
-
```bash
|
|
88
|
-
yarn
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
Then go inside `example` folder and run:
|
|
92
|
-
|
|
93
|
-
```bash
|
|
94
|
-
yarn & yarn start
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
This will start packager for expo so you can change `/src/ImageViewing` and see changes in expo example app.
|
|
98
|
-
|
|
99
|
-
## License
|
|
100
|
-
|
|
101
|
-
[MIT](LICENSE)
|
|
42
|
+
/>
|
package/package.json
CHANGED
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@gyjshow/react-native-image-viewing",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"description": "\"Enhanced image viewing component for React Native (Fork of react-native-image-viewing)",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"types": "dist/index.d.ts",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/AllenGe/react-native-image-viewing.git"
|
|
10
|
+
},
|
|
11
|
+
"keywords": [
|
|
12
|
+
"react",
|
|
13
|
+
"react-native",
|
|
14
|
+
"image",
|
|
15
|
+
"gallery",
|
|
16
|
+
"image-gallery",
|
|
17
|
+
"image-viewer"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"build": "tsc",
|
|
21
|
+
"postversion": "npm build"
|
|
22
|
+
},
|
|
23
|
+
"peerDependencies": {
|
|
24
|
+
"react": ">=18.0.0",
|
|
25
|
+
"react-native": ">=0.72.0"
|
|
26
|
+
},
|
|
27
|
+
"files": [
|
|
28
|
+
"dist",
|
|
29
|
+
"readme.md",
|
|
30
|
+
"package.json"
|
|
31
|
+
],
|
|
32
|
+
"author": "Anton Kalinin",
|
|
33
|
+
"license": "MIT",
|
|
34
|
+
"bugs": {
|
|
35
|
+
"url": "https://github.com/AllenGe/react-native-image-viewing/issues"
|
|
36
|
+
},
|
|
37
|
+
"homepage": "https://github.com/AllenGe/react-native-image-viewing#readme",
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@babel/runtime": "^7.25.0",
|
|
40
|
+
"@types/react": "19.2.0",
|
|
41
|
+
"react": "19.2.0",
|
|
42
|
+
"react-native": "0.83.1",
|
|
43
|
+
"typescript": "^5.8.3"
|
|
44
|
+
}
|
|
45
|
+
}
|