React Native Photo View

screenshot of React Native Photo View
react-native

React Native Photo View

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

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

Installation

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.

react-native
React Native

React Native is a framework for building mobile applications using React and JavaScript. It enables developers to write once and deploy to multiple platforms, including iOS, Android, and the web, while providing a native app-like experience to users.