@likashefqet/react-native-image-zoom

A performant zoomable image written in Reanimated v2 🚀

Usage no npm install needed!

<script type="module">
  import likashefqetReactNativeImageZoom from 'https://cdn.skypack.dev/@likashefqet/react-native-image-zoom';
</script>

README

React Native Image Zoom

Reanimated npm npm

A performant zoomable image written in Reanimated v2 🚀

React Native Image Zoom

Photo by Walling on Unsplash

Features

  • Zoom (pinch and/or pan) the image using gestures.
  • Reset zoom and snap back to initial position on gesture end.
  • Smooth gesture interactions & snapping animations.
  • Loading state while image is loading.
  • Customize the default loader.
  • Provide custom loader to override/remove the default one.
  • Configure maximum zoom value.
  • Compatible with Reanimated v2.
  • Written in TypeScript.

Getting Started

npm install @likashefqet/react-native-image-zoom or yarn add @likashefqet/react-native-image-zoom

This library been written in React Native Reanimated v2, make sure to follow installation instructions if you haven't installed Reanimated yet.

This library uses React Native Gesture Handler, make sure to follow installation instructions if you haven't installed Gesture Handler yet.

Usage

import { ImageZoom } from '@likashefqet/react-native-image-zoom';

Basics:

<ImageZoom uri={imageUri} />

Properties

All React Native Image Props &

Property Type Default Description
uri String '' (empty string) Image uri. Can be overridden by source prop.
minScale Number 1 The minimum allowed zoom scale.
maxScale Number 5 The maximum allowed zoom scale.
containerStyle Object {} Style object to be applied to the container.
imageContainerStyle Object {} Style object to be applied to the image container.
activityIndicatorProps Object {} Activity Indicator Props to customize the default loader.
renderLoader Function undefined Function that renders a custom loading component. Render null to disable loader.

Changelog

Read the changelog.

Author


Shefqet Lika
💻

Support

If you are looking for a private support or help in customizing the experience, then reach out to me by email @likashefi.

License

MIT