### Start Example App Packager Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/CONTRIBUTING.md Starts the Metro server for the example application. Changes to JavaScript code will be reflected without a rebuild. ```sh yarn example start ``` -------------------------------- ### Run Example App on Web Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/CONTRIBUTING.md Builds and runs the example application on the web platform. ```sh yarn example web ``` -------------------------------- ### Run Example App on iOS Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/CONTRIBUTING.md Builds and runs the example application on an iOS simulator or device. ```sh yarn example ios ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/CONTRIBUTING.md Run this command in the root directory to install all necessary dependencies for the project. ```sh yarn ``` -------------------------------- ### Run Example App on Android Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/CONTRIBUTING.md Builds and runs the example application on an Android device or emulator. ```sh yarn example android ``` -------------------------------- ### OnPinchStartCallback Usage Example Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/types.md Example of how to implement the `onPinchStart` callback to log the focal point of the pinch gesture. ```typescript onPinchStart={(event) => { console.log('Pinch started at:', event.focalX, event.focalY); }} ``` -------------------------------- ### Install react-native-image-zoom with yarn Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/README.md Use this command to install the package using yarn. ```sh yarn add @likashefqet/react-native-image-zoom ``` -------------------------------- ### Install React Native Image Zoom and Peers Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/00-START-HERE.md Install the library using npm. Ensure peer dependencies like react-native-gesture-handler and react-native-reanimated are also installed. ```bash npm install @likashefqet/react-native-image-zoom npm install react-native-gesture-handler react-native-reanimated # Peers ``` -------------------------------- ### Install react-native-image-zoom with npm Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/README.md Use this command to install the package using npm. ```sh npm install @likashefqet/react-native-image-zoom ``` -------------------------------- ### Install Dependencies for Image Zoom Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/README.md Install the necessary gesture handler and animation libraries before using the image zoom component. ```bash npm install react-native-gesture-handler react-native-reanimated ``` -------------------------------- ### ProgrammaticZoomCallback Usage Example Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/types.md Example demonstrating how to use the `zoom()` ref method to programmatically set the image scale and focal point. ```typescript const ref = useRef(null); ref.current?.zoom({ scale: 3, x: 100, y: 200 }); ``` -------------------------------- ### Bootstrap Project Dependencies Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/CONTRIBUTING.md Installs all project dependencies and pods, setting up the development environment. ```sh yarn bootstrap ``` -------------------------------- ### Install Peer Dependencies Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/module-overview.md Install the required peer dependencies before using the library. These are essential for gesture handling and animations. ```bash npm install react-native-gesture-handler react-native-reanimated # or yarn add react-native-gesture-handler react-native-reanimated ``` -------------------------------- ### Install react-native-image-zoom Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/module-overview.md Use npm or yarn to add the package to your project dependencies. ```bash npm install @likashefqet/react-native-image-zoom # or yarn add @likashefqet/react-native-image-zoom ``` -------------------------------- ### Full Featured Zoomable Example with Event Handling and Controls Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/Zoomable.md A comprehensive example showcasing advanced features like manual zoom controls, various event listeners (interaction, pinch, double tap, single tap), and state management for UI feedback. Requires Expo Image and StyleSheet. ```typescript import React, { useRef, useState } from 'react'; import { View, Pressable, Text, StyleSheet } from 'react-native'; import { Image } from 'expo-image'; import { Zoomable, ZoomableRef, ZOOM_TYPE } from '@likashefqet/react-native-image-zoom'; export const FullFeaturedZoomableExample = () => { const ref = useRef(null); const [isZoomed, setIsZoomed] = useState(false); const [zoomLog, setZoomLog] = useState(''); const handleZoomIn = () => { ref.current?.zoom({ scale: 2.5, x: 100, y: 150 }); }; const handleReset = () => { ref.current?.reset(); }; const logZoomEvent = (event: string) => { setZoomLog((prev) => `${prev}\n${new Date().toLocaleTimeString()}: ${event}`); }; return ( { setIsZoomed(true); logZoomEvent('Interaction started'); }} onInteractionEnd={() => { setIsZoomed(false); logZoomEvent('Interaction ended'); }} onPinchStart={() => { logZoomEvent('Pinch started'); }} onPinchEnd={() => { logZoomEvent('Pinch ended'); }} onDoubleTap={(zoomType) => { logZoomEvent(`Double tap: ${zoomType}`); }} onSingleTap={() => { logZoomEvent('Single tap detected'); }} > {isZoomed && ( <> Reset Zoom In )} ); }; const styles = StyleSheet.create({ container: { flex: 1 }, image: { flex: 1 }, button: { position: 'absolute', paddingHorizontal: 16, paddingVertical: 8, backgroundColor: 'rgba(0, 0, 0, 0.5)', borderRadius: 8, }, resetButton: { top: 16, right: 16 }, zoomButton: { bottom: 16, right: 16 }, buttonText: { color: 'white', fontWeight: 'bold' }, }); ``` -------------------------------- ### OnDoubleTapCallback Usage Example Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/types.md Example of implementing the `onDoubleTap` callback to handle zoom in/out actions based on the provided `zoomType`. ```typescript onDoubleTap={(zoomType) => { if (zoomType === ZOOM_TYPE.ZOOM_IN) { console.log('User double-tapped to zoom in'); } else { console.log('User double-tapped to zoom out'); } }} ``` -------------------------------- ### ImageZoom Component Usage Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/README.md Example of how to use the ImageZoom component with basic configuration and a ref for programmatic control. ```typescript (null)} minScale={1} maxScale={5} doubleTapScale={3} // ... zoom config props // ... Image props // ... Reanimated animated props /> ``` -------------------------------- ### Full Featured ImageZoom Example Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/ImageZoom.md Demonstrates advanced ImageZoom features including programmatic zoom, reset functionality, and event callbacks for interaction tracking. Use the ref to access methods like zoom() and getInfo(). ```typescript import React, { useRef, useState } from 'react'; import { View, Pressable, Text } from 'react-native'; import { ImageZoom, ImageZoomRef, ZOOM_TYPE } from '@likashefqet/react-native-image-zoom'; export const FullFeaturedExample = () => { const ref = useRef(null); const [isZoomed, setIsZoomed] = useState(false); const handleZoomIn = () => { ref.current?.zoom({ scale: 3, x: 100, y: 150 }); }; const handleReset = () => { ref.current?.reset(); }; const handleGetInfo = () => { const info = ref.current?.getInfo(); console.log('Zoom info:', info); }; return ( { console.log('Interaction started'); setIsZoomed(true); }} onInteractionEnd={() => { console.log('Interaction ended'); setIsZoomed(false); }} onDoubleTap={(zoomType) => { console.log('Double tap:', zoomType); }} onResetAnimationEnd={(finished, values) => { if (finished) { console.log('Reset animation completed'); console.log('Last scale:', values?.SCALE.lastValue); } }} /> {isZoomed && ( <> Reset Info )} ); }; ``` -------------------------------- ### TypeScript Usage Example Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/module-overview.md Demonstrates how to use the ImageZoom component with TypeScript, including refs and props. The ref allows programmatic control over zoom actions. ```typescript import React, { useRef } from 'react'; import { ImageZoom, ImageZoomRef, ImageZoomProps, ZOOM_TYPE } from '@likashefqet/react-native-image-zoom'; const MyComponent: React.FC = (props) => { const ref = useRef(null); const handleZoom = () => { ref.current?.zoom({ scale: 3, x: 100, y: 150 }); }; return ; }; ``` -------------------------------- ### Basic Zoomable with Expo Image Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/Zoomable.md Demonstrates the basic usage of Zoomable with Expo's Image component. Ensure Expo Image is installed and configured. ```typescript import React, { useRef } from 'react'; import { Image } from 'expo-image'; import { Zoomable, ZoomableRef } from '@likashefqet/react-native-image-zoom'; export const ExpoImageZoomExample = () => { const ref = useRef(null); return ( ); }; ``` -------------------------------- ### OnResetAnimationEndCallback Usage Example Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/types.md Example of implementing `onResetAnimationEnd` to log whether the reset animation completed successfully and to access the final scale value. ```typescript onResetAnimationEnd={(finished, values) => { if (finished) { console.log('Reset animation completed'); console.log('Last scale:', values?.SCALE.lastValue); } else { console.log('Reset animation interrupted'); } }} ``` -------------------------------- ### Zoomable Component Usage Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/README.md Example of using the generic Zoomable component to wrap any content, with similar configuration and ref capabilities as ImageZoom. ```typescript (null)} minScale={1} maxScale={5} // ... zoom config props // ... View props // ... Reanimated animated props > {children} ``` -------------------------------- ### Example Usage of Pan Limits Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/utilities.md Demonstrates how to use the pan limit utility functions to constrain content translation within calculated boundaries during gestures. It involves checking if the total translation exceeds the limits and animating the translation back if it does. ```typescript const { scale, width, height, translate, focal } = /* ... */; // Get boundaries for current zoom level const rightLimit = limits.right(width, scale); const leftLimit = -rightLimit; const bottomLimit = limits.bottom(height, scale); const topLimit = -bottomLimit; // Check if panned beyond bounds const totalTranslateX = translate.x.value + focal.x.value; if (totalTranslateX > rightLimit) { translate.x.value = withTiming(rightLimit, config); focal.x.value = withTiming(0, config); } ``` -------------------------------- ### Zoomable with Fast Image and Customization Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/Zoomable.md Shows how to use Zoomable with react-native-fast-image, enabling pinch and pan gestures with custom scale limits. Requires react-native-fast-image installation. ```typescript import React, { useRef } from 'react'; import FastImage from 'react-native-fast-image'; import { Zoomable, ZoomableRef } from '@likashefqet/react-native-image-zoom'; export const FastImageZoomExample = () => { const ref = useRef(null); return ( ); }; ``` -------------------------------- ### Generate and Update Interaction ID Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/architecture.md Use `useInteractionId` to get functions for generating and updating a unique ID for each interaction sequence. Call `updateInteractionId()` to set a new ID, typically at the start of a new interaction. ```typescript const { getInteractionId, updateInteractionId } = useInteractionId(); // New interaction starts updateInteractionId(); // Sets to Date.now().toString() ``` -------------------------------- ### Import Main Components Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/module-overview.md Import the primary ImageZoom and Zoomable components from the library. ```typescript // Main components import { ImageZoom, Zoomable } from '@likashefqet/react-native-image-zoom'; ``` -------------------------------- ### Main Entry Point Exports Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/module-overview.md Exports the main components and types from the library's entry point. ```typescript // src/index.ts export { default as ImageZoom } from './components/ImageZoom'; export { default as Zoomable } from './components/Zoomable'; export * from './types'; ``` -------------------------------- ### Accessing Animation Values in Callback Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/types.md Example of how to access specific animation values, such as the last scale value, within the onResetAnimationEnd callback. ```typescript onResetAnimationEnd={(finished, values) => { console.log('Last scale value:', values?.[ANIMATION_VALUE.SCALE].lastValue); }} ``` -------------------------------- ### OnPinchStartCallback Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/types.md Callback fired when a pinch gesture begins. It receives a gesture event containing focal point coordinates and scale information. ```APIDOC ## OnPinchStartCallback ### Description Callback fired when a pinch gesture begins. ### Parameters - `event` (GestureStateChangeEvent) - The gesture event object containing `focalX`, `focalY`, `scale`, and gesture state. ### Usage Example ```typescript onPinchStart={(event) => { console.log('Pinch started at:', event.focalX, event.focalY); }} ``` ``` -------------------------------- ### Project File Structure Overview Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/00-START-HERE.md This outlines the directory structure of the React Native Image Zoom project, detailing the location of documentation files, source code, and API references. ```tree documentation/ ├── 00-START-HERE.md (you are here) ├── INDEX.md (navigation guide) ├── README.md (main overview) ├── architecture.md (design & internals) ├── configuration.md (configuration guide) ├── types.md (type reference) └── api-reference/ ├── module-overview.md (exports & modules) ├── ImageZoom.md (component API) ├── Zoomable.md (component API) ├── hooks.md (internal hooks) └── utilities.md (utility functions) ``` -------------------------------- ### ZoomableRef Interface Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/types.md Defines the ref handle for the Zoomable component, providing methods to reset zoom, programmatically zoom, and get current zoom state. ```typescript type ZoomableRef = { reset: () => void; zoom: ProgrammaticZoomCallback; getInfo: GetInfoCallback; } ``` -------------------------------- ### useGestures Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/hooks.md Core gesture handler management. Creates and configures all pinch, pan, tap, and double-tap gestures with proper state management and animation callbacks. ```APIDOC ## useGestures ### Description Core gesture handler management. Creates and configures all pinch, pan, tap, and double-tap gestures with proper state management and animation callbacks. ### Signature ```typescript const useGestures = (props: ZoomableUseGesturesProps): { gestures: Gesture; animatedStyle: Animated.AnimatedStyleProp; zoom: ProgrammaticZoomCallback; reset: () => void; getInfo: GetInfoCallback; } ``` ### Parameters #### Path Parameters N/A #### Query Parameters N/A #### Request Body N/A #### Gesture Handler Parameters | Parameter | Type | Description | |---|---|---| | width | number | Container width from layout | | height | number | Container height from layout | | center | {x: number, y: number} | Container center point | | minScale | number | Minimum scale limit | | maxScale | number | Maximum scale limit | | scale | SharedValue | Shared value tracking current scale | | doubleTapScale | number | Scale applied on double tap | | maxPanPointers | number | Max simultaneous pan pointers | | isPanEnabled | boolean | Enable/disable pan gestures | | isPinchEnabled | boolean | Enable/disable pinch gestures | | isSingleTapEnabled | boolean | Enable/disable single tap | | isDoubleTapEnabled | boolean | Enable/disable double tap | | onInteractionStart | () => void | Called when interaction begins | | onInteractionEnd | () => void | Called when all interactions end | | onPinchStart | OnPinchStartCallback | Called when pinch begins | | onPinchEnd | OnPinchEndCallback | Called when pinch ends | | onPanStart | OnPanStartCallback | Called when pan begins | | onPanEnd | OnPanEndCallback | Called when pan ends | | onSingleTap | OnSingleTapCallback | Called on single tap | | onDoubleTap | OnDoubleTapCallback | Called on double tap | | onProgrammaticZoom | OnProgrammaticZoomCallback | Called on programmatic zoom | | onResetAnimationEnd | OnResetAnimationEndCallback | Called when reset animation ends | ### Returns - `gestures`: Composed Gesture object with all tap, pan, and pinch handlers - `animatedStyle`: Animated style with transform values - `zoom`: Function to programmatically zoom to (x, y, scale) - `reset`: Function to reset zoom and pan - `getInfo`: Function to retrieve current state info ### Shared Values Managed - `scale`: Current zoom scale (1 = no zoom) - `translate.x/y`: Pan translation values - `focal.x/y`: Focal point translation for pinch origin - `savedScale`, `savedFocal`, `savedTranslate`: Snapshot values during gesture ### Gesture Composition - `pinchGesture`: Pinch-to-zoom (when enabled) - `panWhilePinchingGesture`: Multi-finger pan during pinch (2+ fingers, configurable) - `panOnlyGesture`: Single-finger pan when zoomed (when enabled) - `doubleTapGesture`: Double-tap zoom toggle (when enabled) - `singleTapGesture`: Single-tap detection (when enabled) - Final gesture is `Race` or `Simultaneous` depending on tap gestures enabled ### Animation Config ```typescript { easing: Easing.inOut(Easing.quad) } ``` ``` -------------------------------- ### Type-Safe ImageZoom Configuration Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/configuration.md Demonstrates type-safe configuration for ImageZoom using TypeScript interfaces. Shows how to define props and handle typed callbacks. ```typescript import type { ImageZoomProps, ZoomableProps, ZoomableRef } from '@likashefqet/react-native-image-zoom'; const MyComponent: React.FC<{ uri: string }> = ({ uri }) => { const config: ImageZoomProps = { uri, minScale: 1, maxScale: 5, doubleTapScale: 3, isPinchEnabled: true, onDoubleTap: (zoomType) => { // zoomType is strongly typed as ZOOM_TYPE enum }, }; return ; }; ``` -------------------------------- ### Create Dependent Animations with Animated Style Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/README.md Define animated styles that depend on shared values like zoom scale. This example adjusts border-radius based on the scale. ```typescript const borderRadiusStyle = useAnimatedStyle(() => ({ borderRadius: 30 / scale.value, }), [scale]); ``` -------------------------------- ### Import Zoomable Component Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/module-overview.md Shows how to import the generic Zoomable component, which offers zoom and pan capabilities for any content. It accepts children and forwards refs. ```typescript import { Zoomable } from '@likashefqet/react-native-image-zoom'; // or import Zoomable from '@likashefqet/react-native-image-zoom/lib/module/components/Zoomable'; ``` -------------------------------- ### Zoomable Component with Expo Image Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/README.md Integrate zoom functionality with Expo's Image component using the Zoomable wrapper. This example demonstrates advanced customization and event handling. ```javascript { console.log('onInteractionStart'); onZoom(); }} onInteractionEnd={() => console.log('onInteractionEnd')} onPanStart={() => console.log('onPanStart')} onPanEnd={() => console.log('onPanEnd')} onPinchStart={() => console.log('onPinchStart')} onPinchEnd={() => console.log('onPinchEnd')} onSingleTap={() => console.log('onSingleTap')} onDoubleTap={(zoomType) => { console.log('onDoubleTap', zoomType); onZoom(zoomType); }} onProgrammaticZoom={(zoomType) => { console.log('onZoom', zoomType); onZoom(zoomType); }} style={styles.image} onResetAnimationEnd={(finished, values) => { console.log('onResetAnimationEnd', finished); console.log('lastScaleValue:', values?.SCALE.lastValue); onAnimationEnd(finished); }} > ``` -------------------------------- ### JS Thread Operations with runOnJS Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/architecture.md This example shows how necessary JavaScript operations, such as callbacks and state updates, are handled on the JS thread. The `runOnJS` function is used to explicitly cross the bridge when needed. ```typescript // JS thread callbacks const onPinchStarted: OnPinchStartCallback = (event) => { onInteractionStarted(); // JS isPinching.current = true; // JS ref onPinchStart?.(event); // JS callback }; // Gesture state wrapped with runOnJS .onStart((event) => { runOnJS(onPinchStarted)(event); // Explicit bridge crossing savedScale.value = scale.value; // No bridge needed }) ``` -------------------------------- ### Publish New Versions Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/CONTRIBUTING.md Uses release-it to automate the process of publishing new versions to npm, including version bumping and tag creation. ```sh yarn release ``` -------------------------------- ### Zoomable with Custom View and Reanimated Scale Tracking Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/Zoomable.md Integrates Zoomable with a custom animated view using react-native-reanimated for scale tracking. This example demonstrates controlling component properties based on zoom scale. ```typescript import React, { useRef } from 'react'; import { View } from 'react-native'; import { useSharedValue, useAnimatedStyle } from 'react-native-reanimated'; import Animated from 'react-native-reanimated'; import { Zoomable, ZoomableRef } from '@likashefqet/react-native-image-zoom'; export const CustomViewZoomExample = () => { const ref = useRef(null); const scale = useSharedValue(1); const opacityStyle = useAnimatedStyle(() => ({ opacity: Math.min(1, scale.value), })); return ( ); }; ``` -------------------------------- ### getInfo() Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/Zoomable.md Retrieves detailed information about the current zoom state, container dimensions, and transformations. ```APIDOC ## getInfo() ### Description Retrieves detailed information about the current zoom state, container dimensions, and transformations. ### Method ```typescript getInfo(): { container: { width: number; height: number; center: { x: number; y: number } }; scaledSize: { width: number; height: number }; visibleArea: { x: number; y: number; width: number; height: number }; transformations: { translateX: number; translateY: number; scale: number }; } ``` ### Returns - **container** (object) - Original container dimensions and center point - **scaledSize** (object) - Dimensions after applying current scale - **visibleArea** (object) - Visible region of the zoomed content - **transformations** (object) - Current transformation values (scale and translation) See [`ImageZoom.getInfo()`](./ImageZoom.md#getinfo) for detailed field descriptions. ### Usage ```typescript const ref = useRef(null); const handleGetInfo = () => { const info = ref.current?.getInfo(); console.log('Visible content:', info?.visibleArea); }; ``` ``` -------------------------------- ### getInfo() Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/ImageZoom.md Retrieves detailed information about the current zoom state, container dimensions, and transformations. ```APIDOC ## getInfo() ### Description Retrieves detailed information about the current zoom state, container dimensions, and transformations. ### Method ```typescript getInfo(): { container: { width: number; height: number; center: { x: number; y: number } }; scaledSize: { width: number; height: number }; visibleArea: { x: number; y: number; width: number; height: number }; transformations: { translateX: number; translateY: number; scale: number }; } ``` ### Returns - **container** (object) - Original container dimensions and center point - **width** (number) - Container width in pixels - **height** (number) - Container height in pixels - **center** (object) - {x, y} coordinates of the container's center - **x** (number) - **y** (number) - **scaledSize** (object) - Dimensions after applying current scale - **width** (number) - width * current scale - **height** (number) - height * current scale - **visibleArea** (object) - Visible region of the zoomed content - **x** (number) - Left edge of visible area (relative to scaled content) - **y** (number) - Top edge of visible area (relative to scaled content) - **width** (number) - Visible area width (matches container width) - **height** (number) - Visible area height (matches container height) - **transformations** (object) - Current transformation values - **translateX** (number) - Horizontal translation (combines pan and focal adjustments) - **translateY** (number) - Vertical translation (combines pan and focal adjustments) - **scale** (number) - Current scale factor ### Usage ```typescript const ref = useRef(null); const handleGetInfo = () => { const info = ref.current?.getInfo(); console.log('Current scale:', info?.transformations.scale); console.log('Container size:', info?.container.width, info?.container.height); console.log('Visible area:', info?.visibleArea); }; ``` ``` -------------------------------- ### ImageZoom with Custom Callbacks Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/ImageZoom.md Configure ImageZoom to enable pinch and pan gestures, and define custom callback functions for pinch start/end and pan start/end events. This allows for fine-grained control and logging of user interactions. ```typescript import React, { useRef } from 'react'; import { ImageZoom, ImageZoomRef, ZOOM_TYPE } from '@likashefqet/react-native-image-zoom'; export const CallbacksExample = () => { const ref = useRef(null); return ( { console.log('Pinch started at:', event.focalX, event.focalY); }} onPinchEnd={(event, success) => { console.log('Pinch ended, success:', success); }} onPanStart={(event) => { console.log('Pan started'); }} onPanEnd={(event, success) => { console.log('Pan ended, success:', success); }} onProgrammaticZoom={(zoomType) => { console.log('Programmatic zoom:', zoomType === ZOOM_TYPE.ZOOM_IN ? 'zoomed in' : 'zoomed out'); }} /> ); }; ``` -------------------------------- ### Track Interaction ID in Animations Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/architecture.md Animations should use the current interaction ID to ensure completion callbacks are associated with the correct gesture. This prevents race conditions when new gestures start before previous animations finish. ```typescript // Animations track this ID scale.value = withTiming(1, config, (...args) => onAnimationEnd(getInteractionId(), ANIMATION_VALUE.SCALE, lastValue, ...args) ); // Completion only fires when all animations finish for THAT ID ``` -------------------------------- ### Run Unit Tests Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/CONTRIBUTING.md Executes the unit tests for the project using Jest. ```sh yarn test ``` -------------------------------- ### Get Zoomable Component State Information Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/Zoomable.md Retrieve detailed information about the current zoom state, including container dimensions, scaled content size, visible area, and transformation values, using the getInfo method. ```typescript const ref = useRef(null); const handleGetInfo = () => { const info = ref.current?.getInfo(); console.log('Visible content:', info?.visibleArea); }; ``` -------------------------------- ### ProgrammaticZoomCallback Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/types.md Function signature for the `zoom()` ref method, used to programmatically control zoom. It takes target scale and focal point coordinates. ```APIDOC ## ProgrammaticZoomCallback ### Description Function signature for the `zoom()` ref method. ### Parameters - `scale` (number) - Target scale (if ≤ 1, triggers reset). - `x` (number) - Focal point X coordinate. - `y` (number) - Focal point Y coordinate. ### Usage Example ```typescript const ref = useRef(null); ref.current?.zoom({ scale: 3, x: 100, y: 200 }); ``` ``` -------------------------------- ### Get Current ImageZoom State Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/ImageZoom.md Call getInfo() to retrieve detailed information about the image's current zoom level, container dimensions, visible area, and transformations. This is helpful for debugging or implementing custom UI elements based on zoom state. ```typescript const ref = useRef(null); const handleGetInfo = () => { const info = ref.current?.getInfo(); console.log('Current scale:', info?.transformations.scale); console.log('Container size:', info?.container.width, info?.container.height); console.log('Visible area:', info?.visibleArea); }; ``` -------------------------------- ### Import ImageZoom Component Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/README.md Import the ImageZoom component from the library before using it in your application. ```javascript import { ImageZoom } from '@likashefqet/react-native-image-zoom'; ``` -------------------------------- ### Advanced Image Zoom Configuration Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/module-overview.md Configure advanced zoom properties like min/max scale, double-tap behavior, and event handlers using a ref. ```typescript import { useRef } from 'react'; import { ImageZoom, ImageZoomRef, ZOOM_TYPE } from '@likashefqet/react-native-image-zoom'; export const AdvancedExample = () => { const ref = useRef(null); return ( { console.log('Double tap:', zoomType === ZOOM_TYPE.ZOOM_IN ? 'in' : 'out'); }} onResetAnimationEnd={(finished, values) => { console.log('Reset complete:', finished); }} /> ); }; ``` -------------------------------- ### useZoomableHandle Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/hooks.md Creates a ref handle that exposes `reset()`, `zoom()`, and `getInfo()` methods to consumers, allowing programmatic control over the zoomable component. ```APIDOC ## useZoomableHandle ### Description Creates the ref handle that exposes `reset()`, `zoom()`, and `getInfo()` methods to consumers. ### Parameters - `ref` (Ref | undefined): ForwardedRef from component - `reset` ( () => void ): Reset function from `useGestures` - `zoom` ( ProgrammaticZoomCallback ): Programmatic zoom function from `useGestures` - `getInfo` ( GetInfoCallback ): Info retrieval function from `useGestures` ### Effect Uses `useImperativeHandle` to expose methods on the ref. ``` -------------------------------- ### Basic ImageZoom Component Usage Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/00-START-HERE.md Import and use the ImageZoom component with a basic URI prop for displaying a zoomable image. ```typescript import { ImageZoom } from '@likashefqet/react-native-image-zoom'; export const App = () => ( ); ``` -------------------------------- ### Verify TypeScript and ESLint Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/CONTRIBUTING.md Runs TypeScript for type checking and ESLint for code linting to ensure code quality. ```sh yarn typecheck ``` ```sh yarn lint ``` -------------------------------- ### OnPinchStartCallback Type Definition Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/types.md Defines the callback signature for when a pinch gesture begins. It receives a gesture event containing focal X and Y coordinates, and the current scale. ```typescript type OnPinchStartCallback = ( event: GestureStateChangeEvent ) => void ``` -------------------------------- ### OnPanStartCallback Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/types.md Callback fired when a pan gesture begins. It receives a gesture event containing translation and velocity information. ```APIDOC ## OnPanStartCallback ### Description Callback fired when a pan gesture begins. ### Parameters - `event` (GestureStateChangeEvent) - The gesture event object containing `translationX`, `translationY`, and velocity. ``` -------------------------------- ### OnDoubleTapCallback Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/types.md Callback fired when a double tap is detected. It receives a `zoomType` indicating whether to zoom in or out. ```APIDOC ## OnDoubleTapCallback ### Description Callback fired when a double tap is detected. ### Parameters - `zoomType` (ZOOM_TYPE) - Either `ZOOM_TYPE.ZOOM_IN` or `ZOOM_TYPE.ZOOM_OUT`. ### Usage Example ```typescript onDoubleTap={(zoomType) => { if (zoomType === ZOOM_TYPE.ZOOM_IN) { console.log('User double-tapped to zoom in'); } else { console.log('User double-tapped to zoom out'); } }} ``` ``` -------------------------------- ### Document Viewer Configuration Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/configuration.md Configure ImageZoom for a document viewer. Allows for a wider zoom range and enables single-tap gestures, disabling pan. ```typescript ``` -------------------------------- ### Reanimated Integration Patterns Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/architecture.md Illustrates common patterns for integrating with Reanimated v2+ and v3, including shared values, animations, animated styles, and work scheduling. ```typescript // Shared values useSharedValue(1) ``` ```typescript // Animations withTiming(targetValue, config, callback) withDecay(config, callback) ``` ```typescript // Styles useAnimatedStyle(() => ({ /* ... */ })) ``` ```typescript // Work scheduling runOnJS(callback) ``` ```typescript // Type system AnimateProps SharedValue ``` -------------------------------- ### Customized ImageZoom Component Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/README.md Configure ImageZoom with various props for scale control, tap gestures, and event handlers. Ensure 'ref' is properly managed if used. ```javascript { console.log('onInteractionStart'); onZoom(); }} onInteractionEnd={() => console.log('onInteractionEnd')} onPanStart={() => console.log('onPanStart')} onPanEnd={() => console.log('onPanEnd')} onPinchStart={() => console.log('onPinchStart')} onPinchEnd={() => console.log('onPinchEnd')} onSingleTap={() => console.log('onSingleTap')} onDoubleTap={(zoomType) => { console.log('onDoubleTap', zoomType); onZoom(zoomType); }} onProgrammaticZoom={(zoomType) => { console.log('onZoom', zoomType); onZoom(zoomType); }} style={styles.image} onResetAnimationEnd={(finished, values) => { console.log('onResetAnimationEnd', finished); console.log('lastScaleValue:', values?.SCALE.lastValue); onAnimationEnd(finished); }} resizeMode="cover" /> ``` -------------------------------- ### OnProgrammaticZoomCallback Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/types.md Callback fired when zoom is triggered programmatically via ref methods. It receives a `zoomType` indicating the zoom direction. ```APIDOC ## OnProgrammaticZoomCallback ### Description Callback fired when zoom is triggered programmatically via ref methods. ### Parameters - `zoomType` (ZOOM_TYPE) - Either `ZOOM_TYPE.ZOOM_IN` (scale > 1) or `ZOOM_TYPE.ZOOM_OUT` (scale <= 1). ``` -------------------------------- ### Basic ImageZoom Usage Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/README.md Render the ImageZoom component with a required 'uri' prop to display a zoomable image. ```javascript ``` -------------------------------- ### Import TypeScript Types for Image Zoom Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/README.md Import all necessary types for the ImageZoom component and its related functionalities from the package root. ```typescript import type { ImageZoomProps, ImageZoomRef, ZoomableProps, ZoomableRef, ZOOM_TYPE, ANIMATION_VALUE, } from '@likashefqet/react-native-image-zoom'; ``` -------------------------------- ### Configuration Props Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/README.md These props configure the zoom behavior and gestures for both ImageZoom and Zoomable components. ```APIDOC ## Configuration Props | Prop | Type | Default | Purpose | |---|---|---|---| | minScale | number | 1 | Minimum zoom level | | maxScale | number | 5 | Maximum zoom level | | doubleTapScale | number | 3 | Double-tap zoom target | | maxPanPointers | number | 2 | Max fingers for pan during pinch | | isPanEnabled | boolean | true | Enable pan gestures | | isPinchEnabled | boolean | true | Enable pinch gestures | | isSingleTapEnabled | boolean | false | Enable single-tap detection | | isDoubleTapEnabled | boolean | false | Enable double-tap zoom | | scale | SharedValue | (internal) | External scale tracking | ``` -------------------------------- ### Configuration Props Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/MANIFEST.txt These props control the behavior and limits of the zoom and pan functionality. ```APIDOC ## Configuration Props ### Description These props allow customization of the zoom and pan behavior for both `ImageZoom` and `Zoomable` components. ### Props - **minScale** (number) - Optional - Minimum zoom level. Defaults to 1. - **maxScale** (number) - Optional - Maximum zoom level. Defaults to 5. - **doubleTapScale** (number) - Optional - The scale level to zoom to on a double tap. Defaults to 3. - **maxPanPointers** (number) - Optional - Maximum number of pointers allowed for panning. Defaults to 2. - **isPanEnabled** (boolean) - Optional - Enables or disables panning. Defaults to true. - **isPinchEnabled** (boolean) - Optional - Enables or disables pinch-to-zoom. Defaults to true. - **isSingleTapEnabled** (boolean) - Optional - Enables or disables single tap gestures. Defaults to false. - **isDoubleTapEnabled** (boolean) - Optional - Enables or disables double tap gestures. Defaults to false. ``` -------------------------------- ### Photo Viewer Configuration Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/configuration.md Configure ImageZoom for a photo viewer similar to Instagram. Enables pinch and pan gestures, with a specific double-tap zoom scale. ```typescript { // Hide UI on reset }} /> ``` -------------------------------- ### useZoomable Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/hooks.md Orchestrates all zoom and pan gesture handling. Combines layout tracking, gesture management, and ref handle creation. ```APIDOC ## useZoomable ### Description Orchestrates all zoom and pan gesture handling. Combines layout tracking, gesture management, and ref handle creation. ### Signature ```typescript const useZoomable = (props: UseZoomableProps): { animatedStyle: Animated.AnimatedStyleProp; gestures: Gesture; onZoomableLayout: (event: LayoutChangeEvent) => void; } ``` ### Parameters Accepts all props from `UseZoomableProps` which includes `ZoomProps`, `onLayout`, and `ref`. ### Returns - `animatedStyle`: Animated style object with transform values (translateX, translateY, scale) - `gestures`: Composed gesture object from `useGestures` - `onZoomableLayout`: Layout event handler ### Usage Pattern Called once per component by `ImageZoom` and `Zoomable` components. ``` -------------------------------- ### Import Callback Types Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/module-overview.md Import types for callbacks, such as on double tap or animation end events. ```typescript // Callback types import { OnDoubleTapCallback, OnResetAnimationEndCallback } from '@likashefqet/react-native-image-zoom'; ``` -------------------------------- ### ImageZoom Component with Configuration Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/00-START-HERE.md Utilize the ImageZoom component with advanced configuration options such as minScale, maxScale, doubleTapScale, and event handlers like onDoubleTap. A ref can be used to control the component programmatically. ```typescript import { useRef } from 'react'; import { ImageZoom, ImageZoomRef } from '@likashefqet/react-native-image-zoom'; export const App = () => { const ref = useRef(null); return ( { console.log('User zoomed:', zoomType); }} /> ); }; ``` -------------------------------- ### useAnimationEnd Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/api-reference/hooks.md Tracks animation completion for reset operations, aggregating the completion status across all animated values to ensure synchronized resets. ```APIDOC ## useAnimationEnd ### Description Tracks animation completion for reset operation, aggregating completion status across all animation values. ### Parameters - `onResetAnimationEnd` (OnResetAnimationEndCallback | undefined): Callback to fire when all animations complete. ### Returns - `onAnimationEnd` (OnAnimationEndCallback): Callback to pass to individual animation values. ### Tracked Values - SCALE - FOCAL_X - FOCAL_Y - TRANSLATE_X - TRANSLATE_Y ### Behavior - Aggregates completion status across all five animation values. - Only calls `onResetAnimationEnd` once all values have completed. - Cleans up stored state after callback fires. - Groups animations by interaction ID to handle overlapping interactions. ``` -------------------------------- ### OnPinchEndCallback Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/_autodocs/types.md Callback fired when a pinch gesture ends. It receives the gesture event and a boolean indicating success. ```APIDOC ## OnPinchEndCallback ### Description Callback fired when a pinch gesture ends. ### Parameters - `event` (GestureStateChangeEvent) - The gesture event object. - `success` (boolean) - Boolean indicating if the gesture completed successfully. ``` -------------------------------- ### ImageZoom Props Source: https://github.com/likashefqet/react-native-image-zoom/blob/main/README.md Configuration options for the ImageZoom component. ```APIDOC ## ImageZoom Props ### Description Configuration options for the ImageZoom component. ### Props - **isDoubleTapEnabled** (Boolean) - Optional - Enables or disables the double tap feature. When enabled, this feature prevents automatic reset of the image zoom to its initial position, allowing continuous zooming. To return to the initial position, double tap again or zoom out to a scale level less than 1. - **onInteractionStart** (Function) - Optional - A callback triggered when the image interaction starts. - **onInteractionEnd** (Function) - Optional - A callback triggered when the image interaction ends. - **onPinchStart** (Function) - Optional - A callback triggered when the image pinching starts. - **onPinchEnd** (Function) - Optional - A callback triggered when the image pinching ends. - **onPanStart** (Function) - Optional - A callback triggered when the image panning starts. - **onPanEnd** (Function) - Optional - A callback triggered when the image panning ends. - **onSingleTap** (Function) - Optional - A callback triggered when a single tap is detected. - **onDoubleTap** (Function) - Optional - A callback triggered when a double tap gesture is detected. - **onProgrammaticZoom** (Function) - Optional - A callback function that is invoked when a programmatic zoom event occurs. ```