react-native-image-zoom-viewer vs react-native-image-crop-picker vs react-native-image-resizer
React Native Image Handling Libraries Comparison
1 Year
react-native-image-zoom-viewerreact-native-image-crop-pickerreact-native-image-resizerSimilar Packages:
What's React Native Image Handling Libraries?

These libraries provide functionalities for managing images in React Native applications, each serving distinct purposes. 'react-native-image-crop-picker' allows users to select images from the gallery or take new photos, with the ability to crop them. 'react-native-image-resizer' focuses on resizing images to specified dimensions or quality, which is useful for optimizing images before uploading. 'react-native-image-zoom-viewer' provides a zoomable image viewer, enhancing the user experience when displaying images in a gallery format. Together, they offer a comprehensive toolkit for image manipulation and display in mobile applications.

Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-native-image-zoom-viewer136,7522,452117 kB195-MIT
react-native-image-crop-picker125,3216,2412.78 MB60625 days agoMIT
react-native-image-resizer44,3621,642-54 years agoMIT
Feature Comparison: react-native-image-zoom-viewer vs react-native-image-crop-picker vs react-native-image-resizer

Image Selection

  • react-native-image-zoom-viewer:

    This package does not handle image selection; it is designed to display images that have already been selected or captured, allowing users to zoom in on them for a better view.

  • react-native-image-crop-picker:

    This package allows users to select images from the device's gallery or capture new photos directly from the camera. It offers a user-friendly interface and supports multiple image selection, making it suitable for applications that require user-generated content.

  • react-native-image-resizer:

    This package does not provide image selection capabilities; its focus is solely on resizing images that have already been selected or captured. It is intended to be used in conjunction with other libraries that handle image selection.

Image Cropping

  • react-native-image-zoom-viewer:

    This library does not offer cropping capabilities; its purpose is to display images in a zoomable format, enhancing the viewing experience without modifying the images themselves.

  • react-native-image-crop-picker:

    This library includes built-in cropping functionality, allowing users to crop images after selection. It provides customizable cropping options, making it versatile for various use cases where image dimensions need to be adjusted.

  • react-native-image-resizer:

    This package does not include cropping features; it focuses on resizing images without altering their aspect ratio unless specified. It is best used when cropping is not required, and only resizing is needed.

Performance Optimization

  • react-native-image-zoom-viewer:

    While this package focuses on providing a smooth zooming experience, performance can be impacted by the size and number of images being displayed. It is optimized for rendering images quickly but may require careful management of image assets.

  • react-native-image-crop-picker:

    This package is optimized for performance, allowing for quick image selection and cropping without significant lag. However, the performance may vary depending on the size of the images being processed.

  • react-native-image-resizer:

    This library is specifically designed for performance, allowing images to be resized efficiently, which is crucial for applications that need to handle large images without causing delays or crashes.

User Experience

  • react-native-image-zoom-viewer:

    This library significantly enhances user experience by allowing users to interact with images in a more engaging way, providing pinch-to-zoom functionality and a smooth transition between images.

  • react-native-image-crop-picker:

    This library enhances user experience by providing a seamless interface for selecting and cropping images, making it easy for users to interact with images in the app.

  • react-native-image-resizer:

    This package does not directly impact user experience as it operates in the background to resize images. However, it contributes to a better overall experience by ensuring images load quickly and efficiently.

Integration

  • react-native-image-zoom-viewer:

    This package is designed to work with images that have been selected or processed by other libraries, making it a flexible choice for enhancing image display in React Native applications.

  • react-native-image-crop-picker:

    This package integrates well with other React Native libraries, making it easy to combine with image upload functionalities or other media handling libraries.

  • react-native-image-resizer:

    This library can be easily integrated into existing workflows where image processing is necessary, complementing libraries that handle image selection or display.

How to Choose: react-native-image-zoom-viewer vs react-native-image-crop-picker vs react-native-image-resizer
  • react-native-image-zoom-viewer:

    Select this package if your application displays images in a gallery format and you want to provide users with an intuitive way to zoom in and out on images. This enhances the viewing experience, especially for detailed images.

  • react-native-image-crop-picker:

    Choose this package if you need a robust solution for selecting and cropping images from the device's gallery or camera. It is ideal for applications that require user interaction with images, such as profile picture uploads or image editing features.

  • react-native-image-resizer:

    Opt for this package when your primary need is to resize images for performance optimization or to meet specific size requirements before uploading to a server. This is particularly useful for applications that handle large images and need to reduce bandwidth usage.

README for react-native-image-zoom-viewer

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&s=460',

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

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

export default class App extends React.Component {
    render: function() {
        return (
            <Modal visible={true} transparent={true}>
                <ImageViewer imageUrls={images}/>
            </Modal>
        )
    }
}

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 | 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 | | 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:

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