Overview

react-native-photo-view is a custom Image view for React Native that allows users to perform pinch-to-zoom on images. This component is compatible with both iOS and Android platforms, leveraging PhotoDraweeView for Android and MWPhotobrowser for iOS.

Features

Source: Similar to source for other React images
Loading Indicator Source: Source for loading indicator
Fade Duration: Duration of image fade (in ms)
Minimum Zoom Scale: The minimum allowed zoom scale
Maximum Zoom Scale: The maximum allowed zoom scale
Shows Horizontal Scroll Indicator: iOS only: Shows a horizontal scroll indicator
Shows Vertical Scroll Indicator: iOS only: Shows a vertical scroll indicator
Scale: Set zoom scale programmatically
Android Zoom Transition Duration: Android only: Double-tap zoom transition duration
Android Scale Type: Android only: One of the default Android scale types

Automatic Installation

For automatic installation, follow these two simple steps:

Add necessary lines to android/settings.gradle and android/app/build.gradle.
Register PhotoViewPackage by making changes to MainActivity.java for RN < 0.29 and MainApplication.java for RN >= 0.29 in your React Native app.

Manual Installation

Android

Add required lines to android/settings.gradle and android/app/build.gradle.
Include an additional dependency to android/app/build.gradle.
Update MainActivity.java for RN < 0.29 and MainApplication.java for RN >= 0.29.

iOS

Add a line to your podfile.
Run pod install.

Summary

In summary, react-native-photo-view provides a versatile Image view for React Native, allowing users to easily implement pinch-to-zoom functionality on images across iOS and Android platforms. With essential features like zoom scale control, fade duration settings, and platform-specific indicators, this component offers a comprehensive solution for image manipulation within React Native applications. Whether automatically installing or following manual steps for Android and iOS platforms, integrating react-native-photo-view enhances the image viewing experience for users.

Alwx

Luno React Native

React Native Photo View