Gathering detailed insights and metrics for @react-native-oh-tpl/react-native-image-zoom-viewer
Gathering detailed insights and metrics for @react-native-oh-tpl/react-native-image-zoom-viewer
🚀 tiny & fast lib for react native image viewer pan and zoom
Installations
npm install @react-native-oh-tpl/react-native-image-zoom-viewerDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
18.20.4
NPM Version
10.7.0
Score
44.2
Supply Chain
57.9
Quality
75.8
Maintenance
50
Vulnerability
93.6
License
Languages
1
TypeScript
TypeScript (100%)
Developer
ascoders
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
MIT License
2,451 Stars
324 Commits
582 Forks
22 Watchers
23 Branches
32 Contributors
Updated on Jul 03, 2025
Maintainers
20
Package Meta Information
Latest Version
3.0.1-0.0.1
Package Id
@react-native-oh-tpl/react-native-image-zoom-viewer@3.0.1-0.0.1
Unpacked Size
117.48 kB
Size
24.35 kB
File Count
23
NPM Version
10.7.0
Node Version
18.20.4
Published on
Nov 12, 2024
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
2
Show Cases
Swiper image
Zoom while sliding
Swipe down
Getting Started
Installation
1npm i react-native-image-zoom-viewer --save
Basic Usage
- Install create-react-native-app first
1$ npm install -g create-react-native-app
- Initialization of a react-native project
1$ create-react-native-app AwesomeProject
- Then, edit
AwesomeProject/App.js, like this:
1import { Modal } from 'react-native'; 2import ImageViewer from 'react-native-image-zoom-viewer'; 3 4const images = [{ 5 // Simplest usage. 6 url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460', 7 8 // width: number 9 // height: number 10 // Optional, if you know the image size, you can set the optimization performance 11 12 // You can pass props to <Image />. 13 props: { 14 // headers: ... 15 } 16}, { 17 url: '', 18 props: { 19 // Or you can set source directory. 20 source: require('../background.png') 21 } 22}] 23 24export default class App extends React.Component { 25 render: function() { 26 return ( 27 <Modal visible={true} transparent={true}> 28 <ImageViewer imageUrls={images}/> 29 </Modal> 30 ) 31 } 32}
Props
| parameter | type | required | description | default |
|---|---|---|---|---|
| imageUrls | array | yes | Image Source | |
| enableImageZoom | boolean | no | Enable image zoom | true |
| onShowModal | function(content?: JSX.Element) => void | no | The callback for show modal | () => {} |
| onCancel | function() => void | no | The callback for cancel modal | () => {} |
| flipThreshold | number | no | Swipe threshold of the next page | 80 |
| maxOverflow | number | no | The X position maximum, that current page can slide to the next page | 300 |
| index | number | no | Init index of images | 0 |
| failImageSource | string, object{url: string} | no | placeholder for fail | '' |
| loadingRender | function() => React.ReactElement<any> | no | placeholder for loading | () => null |
| onSaveToCamera | function(index?: number => void | no | The callback for save to camera | () => {} |
| onChange | function(index?: number => void | no | When the image changed | () => {} |
| onMove | ( position: IOnMove )=>void | reports movement position data (helpful to build overlays) | ()=> {} | |
| saveToLocalByLongPress | boolean | no | Enable save to camera when long press | true |
| onClick | function(onCancel?: function) => void | no | Onclick | (onCancel) => {onCancel()} |
| onDoubleClick | function(onCancel?: function) => void | no | OnDoubleClick | (onCancel) => {onCancel()} |
| onSave | function(url: string) => void | no | The picture is saved to the local method, if you write this method will not call the system default method for Android does not support saveToCameraRoll remote picture, you can call this callback in Android call native interface | |
| renderHeader | function(currentIndex?: number) => React.ReactElement<any> | no | Custom header | () => null |
| renderFooter | function(currentIndex?: number) => React.ReactElement<any> | no | Custom footer | () => null |
| renderIndicator | function(currentIndex?: number, allSize?) => React.ReactElement<any>: number | no | Custom indicator | (currentIndex, allSize) => currentIndex + "/" + allSize |
| renderImage | function(props: any) => React.ReactElement<any> | no | Custom image component | (props) => <Image {...props} /> |
| renderArrowLeft | function() => React.ReactElement<any> | no | Custom left arrow | () => null |
| renderArrowRight | function() => React.ReactElement<any> | no | Custom right arrow | () => null |
| onSwipeDown | function() => void | no | Callback for swipe down | () => null |
| footerContainerStyle | object{someStyle: someValue} | no | custom style props for container that will be holding your footer that you pass | bottom: 0, position: "absolute", zIndex: 9999 |
| backgroundColor | stringwhite | no | Component background color | black |
| enableSwipeDown | boolean | no | Enable swipe down to close image viewer. When swipe down, will trigger onCancel. | false |
| swipeDownThreshold | number | no | Threshold for firing swipe down function | |
| doubleClickInterval | number | no | Double click interval. | |
| pageAnimateTime | number | no | Set the animation time for page flipping. | 100 |
| enablePreload | boolean | no | Preload the next image | false |
| useNativeDriver | boolean | no | Whether to animate using useNativeDriver | false |
| menus | function({cancel,saveToLocal}) => React.ReactElement<any> | no | Custom menus, with 2 methods:cancel to hide menus and saveToLocal to save image to camera | |
| menuContext | object{someKey: someValue} | no | Custom menu context. | { saveToLocal: 'save to the album', cancel: 'cancel' } |
Development pattern
Step 1, run TS listener
After clone this repo, then:
1npm install 2npm start
Step 2, run demo
1cd demo 2npm install 3npm start
Then, scan the QR, use your expo app.
Dependence
Depend on react-native-image-pan-zoom: https://github.com/ascoders/react-native-image-zoom
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 10/17 approved changesets -- score normalized to 5
Reason
project is archived
Details
- Warn: Repository is archived.
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 23 are checked with a SAST tool
Reason
97 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
- Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx
- Warn: Project is vulnerable to: GHSA-7f53-fmmv-mfjv
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv
- Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q
- Warn: Project is vulnerable to: GHSA-crh6-fp67-6883
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
- Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h
- Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
- Warn: Project is vulnerable to: GHSA-gwg9-rgvj-4h5j
- Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
- Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
- Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
- Warn: Project is vulnerable to: GHSA-22h7-7wwg-qmgg
- Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
- Warn: Project is vulnerable to: GHSA-f5x2-xv93-4p23
- Warn: Project is vulnerable to: GHSA-gmpm-xp43-f7g6
- Warn: Project is vulnerable to: GHSA-pf27-929j-9pmm
- Warn: Project is vulnerable to: GHSA-327c-qx3v-h673
- Warn: Project is vulnerable to: GHSA-x4cf-6jr3-3qvp
- Warn: Project is vulnerable to: GHSA-mph8-6787-r8hw
- Warn: Project is vulnerable to: GHSA-7mhc-prgv-r3q4
- Warn: Project is vulnerable to: GHSA-v8v8-6859-qxm4
Score
2.4
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More