Package Exports

react-native-reanimated-zoomable
react-native-reanimated-zoomable/lib/commonjs/index.js
react-native-reanimated-zoomable/lib/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-reanimated-zoomable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Native Reanimated Zoomable 🌟

This Pure TypeScript component offers optimized performance and full customization capabilities, allowing for zooming and dragging functionalities for its child components. 🚀 It seamlessly operates on both Android and iOS platforms. 📱

Features ✨

Optimized Performance: Built with performance in mind to ensure smooth zooming and dragging even with complex UI components.
Full Customization: Highly customizable to fit your application's specific requirements.
Cross-Platform Compatibility: Works flawlessly on both Android and iOS platforms.
Responsive: Provides a responsive user experience, adapting to various screen sizes and orientations.
Programmatic Control: Offers methods to programmatically control the zooming and dragging behavior of the view.

Installation 📦

npm install react-native-reanimated-zoomable

yarn add react-native-reanimated-zoomable

Preview 🦋

Requirements 📚

Name	version
`react-native-reanimated`	>= 2.0.0

Interfaces and Types 🛠️

ZoomableRef: An interface defining the methods available on the ref for controlling the zoomable view.
ZoomableProps: A set of props that can be passed to the Zoomable component. 📝

Ref 🔍

react-native-reanimated-zoomable exposes a ref that allows you to programmatically control the zooming and dragging behavior of the view.

Methods 🛠️

setValues(values: { scale?: number, translate?: { x: number, y: number } }): void

Sets the scale and translation values of the view.

scale: (Optional) New scale value for the view.
translate: (Optional) New translation values (x, y) for the view. 🖼️

Usage 🚀

import { Zoomable, ZoomableRef } from 'react-native-reanimated-zoomable';
import { View, Text, Button } from 'react-native';
import React, { createRef } from 'react';

const zoomableRef = createRef<ZoomableRef>();
const INITIAL_ZOOM = 1.5; // Initial zoom scale value

export const setToInitialZoomableSetup = () => {
  zoomableRef.current?.setValues({ scale: INITIAL_ZOOM, translate: { x: 0, y: 0 } });
};

const App = () => {
  const handleResetZoom = () => {
    setToInitialZoomableSetup();
  };

  return (
    <View style={{ flex: 1 }}>
      <Zoomable
        ref={zoomableRef}
        style={{ flex: 1 }}
        initialScale={INITIAL_ZOOM}
        disablePanResponderReleaseAction={true}
      >
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Zoomable and Draggable View</Text>
        </View>
      </Zoomable>
      <Button title="Reset Zoom" onPress={handleResetZoom} />
    </View>
  );
};

export default App;

Props 🎨

Name	Description	Type	Default Value
`ref`	A reference to the `Zoomable` component instance. This reference allows you to programmatically control the zooming and dragging behavior of the view. Using this reference, you can call methods such as setValues() to update the scale and translation of the view dynamically.	`React.Ref<ZoomableRef>`	{ }
`style`	Style object for the container view.	ViewStyle	{ }
`initialScale`	Initial scale value for the view.	number	1
`maxScale`	Maximum allowed scale for the view.	number	*initialScale 2**
`threshold`	The threshold value specifies the threshold for panning gestures to take effect. This functionality works only when disablePanResponderReleaseAction is set to false(default). If the user attempts to pan the view beyond the specified threshold, the view is translated back to the threshold position with a spring animation.	number	560
`disabled`	Disables the zooming and dragging functionality.	boolean	false
`disablePanResponderReleaseAction`	Disables the pan responder release action.	boolean	false

Contributions 🤝

Contributions are welcome! If you have any suggestions, feature requests, or bug reports, feel free to open an issue or submit a pull request. Let's make this component even better together! 😃

License

MIT

Made with create-react-native-library