react-native-image-zoom-viewer-fix

v2.2.31

react native image viewer,大图浏览 For more information about how to use this package see README

Latest version published 5 years ago

License: MIT

NPM

GitHub

Package Health Score

51 / 100

security
No known security issues
popularity
Small
maintenance
Inactive
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
2.2.30	\|	04/2020		0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.2.31	\|	04/2020	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Small

Weekly Downloads (2)

GitHub Stars: 2.45K
Forks: 581
Contributors: 40

Direct Usage Popularity

The npm package react-native-image-zoom-viewer-fix receives a total of 2 downloads a week. As such, we scored react-native-image-zoom-viewer-fix popularity level to be Small.

Based on project statistics from the GitHub repository for the npm package react-native-image-zoom-viewer-fix, we found that it has been starred 2,451 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 40
Funding: No

With more than 10 contributors for the react-native-image-zoom-viewer-fix repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like react-native-image-zoom-viewer-fix is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Inactive

archived

Commit Frequency

No Recent Commits

Open Issues: 154
Open PR: 41
Last Release: 5 years ago
Last Commit: 5 years ago

Further analysis of the maintenance status of react-native-image-zoom-viewer-fix based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

An important project maintenance signal to consider for react-native-image-zoom-viewer-fix is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 5 years
Dependencies: 1 Direct
Versions: 5
Install Size: 116 kB
Dist-tags: 1
# of Files: 22
Maintainers: 1
TS Typings: Yes

react-native-image-zoom-viewer-fix has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

Show Cases

Swiper image

Zoom while sliding

Swipe down

Getting Started

Installation

npm i react-native-image-zoom-viewer --save

Basic Usage

Install create-react-native-app first

$ npm install -g create-react-native-app

Initialization of a react-native project

$ create-react-native-app AwesomeProject

Then, edit AwesomeProject/App.js, like this:

import { Modal } from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';

const images = [{
    // Simplest usage.
    url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&amp;s=460',

    // width: number
    // height: number
    // Optional, if you know the image size, you can set the optimization performance

    // You can pass props to <img>.
    props: {
        // headers: ...
    }
}, {
    url: '',
    props: {
        // Or you can set source directory.
        source: require('../background.png')
    }
}]

export default class App extends React.Component {
    render: function() {
        return (
            
                
            
        )
    }
}

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`	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`	no	Custom header	`() => null`
renderFooter	function `(currentIndex?: number) => React.ReactElement`	no	Custom footer	`() => null`
renderIndicator	function `(currentIndex?: number, allSize?) => React.ReactElement`: number	no	Custom indicator	`(currentIndex, allSize) => currentIndex + "/" + allSize`
renderImage	function `(props: any) => React.ReactElement`	no	Custom image component	`(props) => <img>`
renderArrowLeft	function `() => React.ReactElement`	no	Custom left arrow	`() => null`
renderArrowRight	function `() => React.ReactElement`	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	string `white`	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`
menus	function `({cancel,saveToLocal}) => React.ReactElement`	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:

npm install
npm start

Step 2, run demo

cd demo
npm install
npm 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

react-native-image-zoom-viewer-fix dependencies

react-native-image-pan-zoom-fix

react-native-image-zoom-viewer-fix development dependencies

@types/react @types/react-native ascoders-tslint-config react react-native tslint tslint-config-prettier typescript

FAQs

What is react-native-image-zoom-viewer-fix?

react native image viewer,大图浏览. Visit Snyk Advisor to see a full health score report for react-native-image-zoom-viewer-fix, including popularity, security, maintenance & community analysis.

Is react-native-image-zoom-viewer-fix popular?

The npm package react-native-image-zoom-viewer-fix receives a total of 2 weekly downloads. As such, react-native-image-zoom-viewer-fix popularity was classified as small. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is react-native-image-zoom-viewer-fix well maintained?

We found indications that react-native-image-zoom-viewer-fix is an Inactive project. See the full package health analysis to learn more about the package maintenance status.

Is react-native-image-zoom-viewer-fix safe to use?

The npm package react-native-image-zoom-viewer-fix was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 4 December-2024, at 08:21 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP