Neutrino Packing Machine

    react-native-photo-zoom
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.5 • Public • Published

    react-native-photo-zoom

    platforms npm npm github issues github closed issues Issue Stats

    Provides custom Image view for React Native that allows to perform pinch-to-zoom on images. Works on both iOS and Android.

    This component uses

    Usage

    import PhotoZoom from 'react-native-photo-zoom';

    Basics:

    <PhotoZoom
      source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
      minimumZoomScale={0.5}
      maximumZoomScale={3}
      androidScaleType="center"
      onLoad={() => console.log("Image loaded!")}
      style={{width: 300, height: 300}} />

    ###Compared to react-native-photo-view react-native-photo-view functionality is similar, but there are several major differencies:

    • PhotoZoom used SDWebImage (Fast)
    • New version of MWPhotobrowser

    Properties

    Property Type Description
    source Object, number same as source for other React images
    loadingIndicatorSource Object source for loading indicator
    fadeDuration number duration of image fade (in ms)
    minimumZoomScale number The minimum allowed zoom scale. The default value is 1.0
    maximumZoomScale number The maximum allowed zoom scale. The default value is 3.0
    showsHorizontalScrollIndicator boolean iOS only: When true, shows a horizontal scroll indicator. The default value is true.
    showsVerticalScrollIndicator boolean iOS only: When true, shows a vertical scroll indicator. The default value is true.
    scale number Set zoom scale programmatically
    androidZoomTransitionDuration number Android only: Double-tap zoom transition duration
    androidScaleType string Android only: One of the default Android scale types: "center", "centerCrop", "centerInside", "fitCenter", "fitStart", "fitEnd", "fitXY"
    onLoadStart function Callback function
    onLoad function Callback function
    onLoadEnd function Callback function
    onProgress function iOS only: Callback function, invoked on download progress with {nativeEvent: {loaded, total}}.
    onTap function Callback function (called on image tap)
    onViewTap function Callback function (called on tap outside of image)
    onScale function Callback function

    Automatic installation

    Just simple steps:

    npm install --save react-native-photo-zoom

    Link ( RN <= 0.59 )

    react-native link react-native-photo-zoom

    Install

    npm i react-native-photo-zoom

    DownloadsWeekly Downloads

    38

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    585 kB

    Total Files

    66

    Last publish

    Collaborators

    • lunyx