trabricks-react / react-native-photo-zoom

react-native-photo-zoom

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

• Android: PhotoDraweeView
• iOS : MWPhotobrowser, SDWebImage

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

react-native-photo-zoom's Issues

scale prop doesn't seem to be working in iOS

The default scale for a given image seems to only work for me on android, but not iOS. I maybe misunderstanding something though:

<PhotoZoom
  source={{ uri: media.url }}
  minimumZoomScale={1}
  maximumZoomScale={2}
  scale={1}
  androidScaleType='fitXY'
  onLoad={noop}
  style={this.fullSizeStyle}
/>

Let me know if I need to provide more thorough repro steps and I'll be happy to do it. Thanks!

Is it possible to add headers in addition to the url

This is a great plugin!
I really liked him.
But there is not enough opportunity to connect images with the necessary titles. Sometimes just a link to an image is not enough...

Mark react and react-native as peer dependencies

Having them as dependencies can cause issues. I.e. I updated RN with Yarn, and because this package listed RN as a dependency and Yarn didn't want to update your dependency, it copied RN twice. I had to remove and re-add this package.

React Native 0.70 throws error in iOS and Android

I tried updating my app to React Native 0.70 and received errors in both iOS and Android. I guess it needs an update before moving to 0.70.

iOS

 ERROR  Invariant Violation: View config getter callback for component `RNPhotoZoom` must be a function (received `undefined`).

This error is located at:
    in RNPhotoZoom (at PhotoZoom.ios.js:70)
    ....

Android

 ERROR  Invariant Violation: View config getter callback for component `PhotoZoomAndroid` must be a function (received `undefined`).

This error is located at:
    in PhotoZoomAndroid (at PhotoZoom.android.js:69)
    ....

RNPhototZoom was not found in the UIManager

i am facing the requireNativeComponent RNPhototZoom was not found in the UIManager

Failed build for Android

Could not resolve all files for configuration ':app:debugRuntimeClasspath'.

Could not find me.relex:photodraweeview:1.0.0.
Searched in the following locations:
- https://repo.maven.apache.org/maven2/me/relex/photodraweeview/1.0.0/photodraweeview-1.0.0.pom

use_frameworks! 사용 시 View config를 찾을 수 없음.

아래는 제가 테스트 해본 환경입니다.
System:
OS: macOS 10.15
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Memory: 218.00 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.11.1 - /usr/local/bin/node
Yarn: 1.19.1 - /usr/local/bin/yarn
npm: 6.11.3 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
Android SDK:
API Levels: 23, 28, 29
Build Tools: 28.0.3, 29.0.2
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5900203
Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.1 => 16.8.1
react-native: 0.61.1 => 0.61.1
npmGlobalPackages:
react-native-cli: 2.0.1

Images uploaded from Iphone 11 are blurry

In some cases if the source image is uploaded from an Iphone 11, it will show a bit blurred. If i get the same source URL and display it inside an image component it renders perfectly.
The issue is happening on iPhones, on android they render perfectly