# React Native Gesture Image Viewer ## Guide - [Overview](/1.x/guide/getting-started/overview.md): Have you ever struggled with implementing complex gesture handling and animations when building image galleries or content viewers in React Native? Existing libraries often have limited customization options or performance issues. react-native-gesture-image-viewer is a high-performance universal gesture viewer library built on React Native Reanimated and Gesture Handler, providing complete customization and intuitive gesture support for not only images but also videos, custom components, and any other content. - [Installation](/1.x/guide/getting-started/installation.md): Minimum Requirements - [Quick Start](/1.x/guide/getting-started/quick-start.md) - [AI](/1.x/guide/getting-started/ai.md): To help AI better understand this library's 1.x behavior, documentation, and project conventions so it can provide more accurate help during development and troubleshooting, this project provides the following capabilities: ## Others - [Performance Optimization Tips](/1.x/guide/performance-optimization-tips.md): Wrap the renderItem function with useCallback to prevent unnecessary re-renders. For large images, we recommend using expo-image or FastImage. For handling many images, we recommend using FlashList. FlashList Performance Guide Test on actual devices (performance may be limited in simulators). - [Basic Usage](/1.x/guide/usage/basic-usage.md) - [Custom Components](/1.x/guide/usage/custom-components.md): react-native-gesture-image-viewer offers powerful complete component customization. You can create gesture-supported items with not only images but any component you want. - [Gesture Features](/1.x/guide/usage/gesture-features.md): react-native-gesture-image-viewer supports various gestures essential for viewers. Please refer to the examples below for default gesture actions. - [GestureViewer Props](/1.x/guide/usage/gesture-viewer-props.md): enableLoop (default: false) Enables loop mode. When true, navigating next from the last item goes to the first item, and navigating previous from the first item goes to the last item. onIndexChange The onIndexChange callback function is called when the index value changes. useSnap (default: false) Sets the scroll behavior mode. false (default) uses paging mode, true uses snap mode. itemSpacing (default: 0) Sets the spacing between items in pixels. Only applied when useSnap is true. autoPlay (default: false) Enables auto play mode. When true, the viewer will automatically play the next item after the specified interval. When enableLoop is enabled, the viewer will loop back to the first item after the last item.When enableLoop is disabled, the viewer will stop at the last item.When there is only one item, auto-play is disabled.When zoom or rotate gestures are detected, the auto-play will be paused. autoPlayInterval (default: 3000) Sets the interval between auto play in milliseconds.Must be a positive integer. Values below 250ms are clamped to 250ms at runtime. initialIndex (default: 0) Sets the initial index value. dismissThreshold (default: 80) dismissThreshold controls when onDismiss is called by applying a threshold value during vertical gestures. resistance (default: 2) resistance controls the range of vertical movement by applying resistance during vertical gestures. maxZoomScale (default: 2) Controls the maximum zoom scale multiplier. - [Handling Viewer Events](/1.x/guide/usage/handling-viewer-events.md): You can subscribe to specific events from GestureViewer using the useGestureViewerEvent hook. This allows you to respond to real-time gesture changes like zoom and rotation. Event Types - [Multi-Instance Management](/1.x/guide/usage/multi-instance-management.md): When you want to efficiently manage multiple GestureViewer instances, you can use the id prop to use multiple GestureViewer components. GestureViewer automatically removes instances from memory when components are unmounted, so no manual memory management is required. - [Programmatic Control](/1.x/guide/usage/programmatic-control.md): You can programmatically control the GestureViewer using the useGestureViewerController hook. - [Style Customization](/1.x/guide/usage/style-customization.md): You can customize the styling of GestureViewer. - [Trigger-Based Modal Animations](/1.x/guide/usage/trigger-based-animations.md): GestureTrigger supports smooth trigger-based animations that create seamless transitions from trigger elements (like thumbnails) to the full modal view. This feature enhances user experience by maintaining visual continuity between the trigger and modal content.