Pinch-to-zoom view for React Native (both iOS and Android)

Overview

react-native-photo-view

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 PhotoDraweeView for Android and MWPhotobrowser on iOS.

Usage

import PhotoView from 'react-native-photo-view';

Basics:

console.log("Image loaded!")} style={{width: 300, height: 300}} /> ">
<PhotoView
  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}} />

Properties

Property Type Description
source Object same as source for other React images
loadingIndicatorSource Object source for loading indicator
fadeDuration int duration of image fade (in ms)
minimumZoomScale float The minimum allowed zoom scale. The default value is 1.0
maximumZoomScale float The maximum allowed zoom scale. The default value is 3.0
showsHorizontalScrollIndicator bool iOS only: When true, shows a horizontal scroll indicator. The default value is true.
showsVerticalScrollIndicator bool iOS only: When true, shows a vertical scroll indicator. The default value is true.
scale float Set zoom scale programmatically
androidZoomTransitionDuration int 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 func Callback function
onLoad func Callback function
onLoadEnd func Callback function
onProgress func iOS only: Callback function, invoked on download progress with {nativeEvent: {loaded, total}}.
onTap func Callback function (called on image tap)
onViewTap func Callback function (called on tap outside of image)
onScale func Callback function

Compared to react-native-image-zoom

react-native-image-zoom functionality is similar, but there are several major differencies:

  • PhotoView is based on PhotoDraweeView which is the "PhotoView For Fresco". It works better, it supports several important callbacks out-of-box and it is, actually, recommended by Chris Banes, because his PhotoView (base for react-native-image-zoom) doesn't completely support Facebook Fresco;
  • PhotoView has more options like fadeDuration and minimumZoomScale/maximumZoomScale and more important callbacks;
  • PhotoView is written in the same manner as default React Image, and it supports most of the features Image has (the goal is to be fully compaitable with Image and support absolutely everything);
  • It is possible to use PhotoView as a container (currently iOS only)!

Automatic installation

Just two simple steps:

npm install --save react-native-photo-view
react-native link react-native-photo-view

Manual installation

Android

  1. Add these lines to android/settings.gradle
include ':react-native-photo-view'
project(':react-native-photo-view').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-photo-view/android')
  1. Add one more dependency to android/app/build.gradle
dependencies {
    compile project(':react-native-photo-view')
}
  1. Add it to your MainActivity.java for RN < 0.29 and to your MainApplication.java for RN >=0.29

To register PhotoViewPackage, you need to change the MainActivity or MainApplication depending on React Native version of your app:

import com.reactnative.photoview.PhotoViewPackage;

// ...

public class MainActivity extends ReactActivity {
    // ...

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new PhotoViewPackage() // add this manager
      );
    }

    // ...
}

IOS

  1. Add this line to your podfile
  pod 'react-native-photo-view', path: './node_modules/react-native-photo-view'
  1. Run pod install
Issues
  • Change background color

    Change background color

    Is there a way to change the background color of the photo view for iOS? Currently it is black.

    opened by MunazR 16
  • Doesnot work.

    Doesnot work.

    I have set up correctly , but doesnot perform any task. whats my problem is? Link to my file is: https://gist.github.com/susylPearl/1ea70bcdff41e3f4bfaf0fca20ea2ecd

    opened by susylPearl 15
  • Cannot see image on iOS after upgrade to v1.4.0

    Cannot see image on iOS after upgrade to v1.4.0

    Unfortunately, the image is not visible after upgrading to latest version(1.4.0) and bounds of the photo view are being marked as red.

    edited

    opened by Sam1301 13
  • Doesn't work on android with react-native@0.42.3

    Doesn't work on android with [email protected]

    On android simulator i have an error message : "Unable to resolve module react-native/Libraries/Components/View/ViewPropTypes"

    I guess this is because of the following import in PhotoView.android.js. import ViewPropTypes from 'react-native/Libraries/Components/View/ViewPropTypes';

    opened by TomPradat 7
  • Nothing gets render.

    Nothing gets render.

    when i implemented photo view library as:

    <Image style={{flex:1}}> <PhotoView source={{ uri: "http://c1.staticflickr.com/8/7412/27488731000_96ad0b9740_k.jpg" }} minimumZoomScale={0.5} maximumZoomScale={3} androidScaleType="center" onLoad={() => console.log("Image loaded!")}/> </Image>

    Nothing gets render what had happened, or my syntax are wrong.

    opened by susylPearl 6
  • Image pinch error.

    Image pinch error.

    when i pinch in , app gets crasched in android studio monitor error shows as: java.lang.ArrayIndexOutOfBoundsException: length=1; index=1 at android.support.v4.widget.ViewDragHelper.shouldInterceptTouchEvent(ViewDragHelper.java:1014) at android.support.v4.widget.DrawerLayout.onInterceptTouchEvent(DrawerLayout.java:1282) at com.facebook.react.views.drawer.ReactDrawerLayout.onInterceptTouchEvent(ReactDrawerLayout.java:37) at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2107) at android.view.ViewGroup.dispatchTransformedTouchEvent(ViewGroup.java:2581) at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:2254) at a

    opened by susylPearl 6
  • Image source bigger than screen

    Image source bigger than screen

    Hello,

    On Android, using react-native 0.37. The pacage works great but I'm trying to display an image that is bigger than the screen. I want to resize the image for it to fit, so I can zoom/dezoom on the whole image ; now, we can only zoom on a part of the image.

    I set display: flex on PhotoView, but I want to set width: SCREEN_WIDTH on the Image behind.

    opened by yachaka 5
  • is ios pinch to zoom function not working ?

    is ios pinch to zoom function not working ?

    Hi there, thanks for providing this great module firstly. it is working on my android devices. when I try on my ios 9.3, I found it is not zooming at all. How can I zoom in fullscreen mode ? what is the trick for ios ?

    Here is my code: <PhotoView source={{uri: uri}} minimumZoomScale={0.5} maximumZoomScale={3} androidScaleType="center" onTap={this.closeZoom} style={{width: DEVICE_WIDTH, height: DEVICE_HEIGHT}} />

    question 
    opened by weixingsun 5
  • Support specified headers

    Support specified headers

    opened by ITJesse 5
  • Could you provide an example?

    Could you provide an example?

    No example provided..And your sample codes have errors.

    opened by flyingzl 4
  • Gif isn't shown on iOS

    Gif isn't shown on iOS

    This is a good package for image pinch/double tap to zoom. I implemented the new feature to show gif in v1.5.3 and it worked well on Android. But gif isn't shown on iOS. It is an important issue on my project. Please let me know how to show the gif in iOS.

    opened by curest0x1021 0
  • Support SDWebImage

    Support SDWebImage

    This PR provide support for SDWebImage

    opened by r0b0t3d 1
  • Image caching

    Image caching

    This is a great package for what it does i.e., Pinch/double tab to zoom. The performance of the animations is amazing because of the native implementation. But it can't be used in production in this state because there is no provision for caching support. Would be great to have something like what react-native-fast-image implements for caching. I really don't have the time or I would have looked into it and submitted a PR. Hope the maintainers can look into this. Thanks

    opened by salhotra 1
  • AndroidX Support

    AndroidX Support

    This PR includes:

    • Migrate to AndroidX.
    • Update Android build tools.
    • Refactor podsec.
    opened by thanhcuong1990 0
  • WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.

    WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.

    I get the following warning when upgrading from React Native 0.59.10 to 0.62.2:

    WARNING: Configuration 'compile' is obsolete and has been replaced with 'implementation' and 'api'.
    It will be removed soon. For more information see: http://d.android.com/r/tools/update-dependency-configurations.html
    ...
    Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
    

    I useimplementation project(':react-native-photo-view') in my Gradle file and still get this error. Do you have an idea what might cause this warning?

    opened by Jarzka 1
  • 'React/RCTImageLoader.h' file not found

    'React/RCTImageLoader.h' file not found

    react-native-photo-view/ios/RNPhotoView.m : 9 : 9 :

    fatal error : 'React/RCTImageLoader.h' file not found

    #import <React/RCTImageLoader.h>

    opened by mmorcc 2
  • Podspec file not beings installed causing issues on iOS

    Podspec file not beings installed causing issues on iOS

    The podspec file, merged recently (#149), is not being installed through the default installation steps, causing an issue on react-native run-ios

    error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.

    I had to put the repository URL in package.json as a temporary fix so I could get the podspec file inside the package folder and be able to run the project: "react-native-photo-view": "https://github.com/alwx/react-native-photo-view"

    I don't know how to solve it but I'd like to know when this is fixed so I could remove the URL from my package.json file. Thanks!

    opened by sharoneh 5
  • Android how can I insert a component in <PhotoView><MyComponent></PhotoView>

    Android how can I insert a component in

    On ios it works well, but on Android I get an error: com.reactnative.photoview.PhotoView cannot be cast to android.view.ViewGroup please give a solution

    opened by shels107 0
  • react-native-photo-view in ios image is not open proper width of the image.

    react-native-photo-view in ios image is not open proper width of the image.

    In ios device, image is not open proper image width format.

    <PhotoView source={{ uri: props.uri }} minimumZoomScale={1} //scale={2.5} //onProgress={()=>console.log("Progress ....")} // loadingIndicatorSource={() => <ActivityIndicator animating={true} // size="large" color="#0000ff" />} maximumZoomScale={10} onLoad={() => props.onLoading()} onLoadEnd={() => props.onLoadingEnd()} style={{ borderWidth:1, borderColor:'red', width:null, height: props.height / props.width * Dimensions.get("window").width //height:props.height }} />

    opened by bishwajeet-billme 1
Owner
Alexander Pantiukhov
Indie maker, writer, runner, cook and food lover. Creator of Telescope (https://telescope.ac), build things at @RasaHQ
Alexander Pantiukhov
react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui.

react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui. While some cod

Mat Sz 55 Nov 21, 2021
🎭 A React Native and Expo library to mask text and inputs

This is a library to mask Text and Input components in React Native and Expo (Android, iOS and Web).

Akinn Rosa 197 Nov 20, 2021
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 73.4k Dec 2, 2021
Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

Mantine 3.1k Nov 27, 2021
Simple, Easy To Use and Customisable ScrollSpy component for react with callback, typescript, auto-update URL hash and throttle support among others.

React UI ScrollSpy ✨ Installation npm install --save react-ui-scrollspy OR yarn add react-ui-scrollspy ?? Demo Try it your self here! ⚙️ Usage In your

Hussain Pettiwala 10 Nov 21, 2021
ClearX is an alternative way to Redux and MobX to maintain the application state and provides a simple interface to bind it to UI components

ClearX is an alternative way to Redux and MobX to maintain the application state and provides a simple interface to bind it to UI components. It has utilities to set or get deep properties of nested data using paths.

Autodesk 18 Nov 10, 2021
Lightweight React Native UI Components inspired on Vant

vant-react-native Install yarn add vant-react-native Or npm install vant-react-native Usage import React

youngjuning 46 Nov 17, 2021
A React Native module that allows you to select a photo/video from the device library or camera.

A React Native module that allows you to use native UI to select media from the device library or directly from the camera.

null 7.4k Nov 26, 2021
React Native Loading Spinner Overlay

React Native Loading Spinner Overlay

Spontaneous 1.4k Nov 24, 2021
A Hyperlink component for react-native that makes urls, fuzzy links, emails etc clickable

A Hyperlink component for react-native that makes urls, fuzzy links, emails etc clickable

Pawan 611 Nov 29, 2021
React Native - FlatList Image Carousel

This project demonstrates a smooth image carousel built with React Native's FlatList component.

newline: sandboxes 3 Oct 1, 2021
TheCodingMachine React Native boilerplate - Typescript Plugin

This plugin allow thecodingmachine react-native-boilerplate ?? users to translate the boilerplate from Javascript ?? to Typescript ??

TheCodingMachine 15 Oct 15, 2021
dataminr-react-components - Collection of reusable React Components and utility functions.

react-components A collection of reusable React components with their own Flux lifecycle. What's inside react-components? Table Component From a simpl

Dataminr 262 Oct 30, 2021
🌈 A UI Design Language and React UI library

Ant Design An enterprise-class UI design language and React UI library. English | Português | 简体中文 ✨ Features ?? Enterprise-class UI designed for web

Ant Design Team 75.8k Nov 24, 2021
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Microsoft 12.5k Nov 24, 2021
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

grommet 7.6k Nov 24, 2021
Modern and minimalist React UI library.

Modern and minimalist React UI library, originating from Vercel's design. Quick Start run yarn add @geist-ui/react or npm i @geist-ui/react install it

Geist 2.5k Nov 23, 2021
The UI design language and React library for Conversational UI

The UI design language and React library for Conversational UI Website:https://chatui.io English | 简体中文 Features ?? Best Practices: The best practice

Alibaba 1.2k Nov 20, 2021
⚛️A beautiful and modern React design system.

Shards React is a free, beautiful and modern React UI kit based on Shards. Documentation & Demo • Official Page Getting Started Getting started with S

DesignRevision 698 Nov 29, 2021