@ngenux/react-native-pinch-zoom-view

Interactive Zoom Component for React Native

@ngenux/react-native-pinch-zoom-view is a React Native component designed for easy implementation of pinch-to-zoom functionality. It enables smooth and responsive zooming and panning on images or any content within a defined area in your React Native applications.

Installation

To install @ngenux/react-native-pinch-zoom-view, run the following command in your project directory:

1npm install @ngenux/react-native-pinch-zoom-view

Usage

Import the ZoomWrapper component from @ngenux/react-native-pinch-zoom-view and use them to wrap your content.

Props

• minZoom: Minimum zoom level (default: 1).
• maxZoom: Maximum zoom level (default: 5).
• Additional standard View props.

Tips

• Responsiveness: The component adapts to orientation changes. Use the Dimensions API from React Native to adjust the dimensions of the zoom element dynamically.
• Zoom Boundaries: Ensure your zoom levels and boundaries are set according to the content size to prevent excessive zooming out or in which might degrade the user experience.

Example

1import React, { useState, useEffect } from 'react';
2import { Dimensions, View } from 'react-native';
3import ZoomWrapper  from '@ngenux/react-native-pinch-zoom-view';
4
5export default function App() {
6  const [windowDimensions, setWindowDimensions] = useState(Dimensions.get('window'));
7
8  useEffect(() => {
9    const onChange = ({ window }) => {
10      setWindowDimensions(window);
11    };
12
13    Dimensions.addEventListener('change', onChange);
14    return () => Dimensions.removeEventListener('change', onChange);
15  }, []);
16
17  const zoomElementStyle = {
18    width: windowDimensions.width,
19    height: windowDimensions.height,
20    position: 'absolute',
21  };
22
23  return (
24    <View style={{ flex: 1 }}>
25      <ZoomWrapper
26        style={zoomElementStyle}
27        minZoom={1}
28        maxZoom={5}
29      >
30        <Image
31          src={'https://d27vkvqvvwyzde.cloudfront.net/Test_Image.JPEG'}
32          width={windowDimensions.width}
33        />
34        {/* Or any other content*/}
35      </ZoomWrapper>
36    </View>
37  );
38}
39

---

License

MIT

Author

Developed by ng-sushil of @ngenux