API reference
Zoom Component Props
| Name | Type | Required | Description |
|---|---|---|---|
| style | StyleProp<ViewStyle> | No | Container style |
| contentContainerStyle | StyleProp<ViewStyle> | No | Content container style |
| minScale | number | No | Minimum allowed zoom scale. Default is 1. Set to 1 to prevent zooming out smaller than initial size. Set to a value < 1 (e.g., 0.5) to allow zooming out to 50% |
| maxScale | number | No | Maximum allowed zoom scale. Default is 4 |
| onZoomStateChange | (isZoomed: boolean) => void | No | Callback fired when zoom state changes. Called with true when zoomed in, false when zoomed out to initial scale |
| onZoomChange | (scale: number) => void | No | Callback fired during zoom gesture with current scale value. Called continuously while pinching, useful for UI updates (e.g., showing zoom percentage). For performance-critical use cases, use useZoomGesture hook with scale SharedValue instead |
| enableGallerySwipe | boolean | No | Enable Apple Photos-style seamless gallery navigation. When zoomed and panning hits horizontal boundary, continued swipe allows scrolling to adjacent images. Default is false |
| parentScrollRef | RefObject<ScrollableRef> | No | Reference to parent FlatList/ScrollView for seamless edge scrolling. When provided with enableGallerySwipe, enables Apple Photos-style continuous swipe: zoomed image pans to edge, then seamlessly scrolls parent list. Compatible with FlatList/ScrollView from react-native, react-native-gesture-handler, and react-native-reanimated |
| currentIndex | number | No | Current index in the parent list (for calculating scroll offset). Required when using parentScrollRef |
| itemWidth | number | No | Width of each item in the parent list (for calculating scroll offset). Required when using parentScrollRef. Usually equals deviceWidth + imageGap |
| animationFunction | function | No | Animation function from react-native-reanimated. Default: withTiming. For example, you can use withSpring instead: https://docs.swmansion.com/react-native-reanimated/docs/api/animations/withSpring |
| animationConfig | object | No | Config for animation function from react-native-reanimated. For example, avaiable options for withSpring animation: https://docs.swmansion.com/react-native-reanimated/docs/api/animations/withSpring#options-object |
| doubleTapConfig | DoubleTapConfig | No | Config for zoom on double tap. See below for details |
| gestureApi | 'v2' | 'v3' | 'auto' | No | Which react-native-gesture-handler API to build the gesture with. Default is 'auto', or whatever was passed to setGestureApiVersion(). See Gesture Handler v2 / v3 API |
DoubleTapConfig
| Name | Type | Required | Description |
|---|---|---|---|
| defaultScale | number | No | Fixed zoom scale on double tap. If not set, calculated based on dimensions |
| minZoomScale | number | No | Minimum zoom scale for double tap |
| maxZoomScale | number | No | Maximum zoom scale for double tap |
ScrollableRef
Type for parentScrollRef. Compatible with FlatList/ScrollView from multiple libraries:
interface ScrollableRef {
scrollToOffset?: (params: { offset: number; animated?: boolean }) => void // FlatList
scrollTo?: (params: { x?: number; y?: number; animated?: boolean }) => void // ScrollView
}