React Native Photo View

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:

1. Add necessary lines to android/settings.gradle and android/app/build.gradle.
2. 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

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

iOS

1. Add a line to your podfile.
2. 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.