Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
react-native-image-zoomando
Advanced tools
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.
import PhotoView from 'react-native-photo-view';
Basics:
<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}} />
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 |
react-native-image-zoom functionality is similar, but there are several major differencies:
Just two simple steps:
npm install --save react-native-photo-view
react-native link react-native-photo-view
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')
android/app/build.gradle
dependencies {
compile project(':react-native-photo-view')
}
MainActivity.java
for RN < 0.29 and to your MainApplication.java
for RN >=0.29To 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
);
}
// ...
}
pod 'react-native-photo-view', path: './node_modules/react-native-photo-view'
pod install
FAQs
Displaying photos with pinch-to-zoom
The npm package react-native-image-zoomando receives a total of 13 weekly downloads. As such, react-native-image-zoomando popularity was classified as not popular.
We found that react-native-image-zoomando demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.