React-Native Zoom Anything

A lightweight pinch-to-zoom, pan, and double-tap zoom view for React Native using react-native-gesture-handler + Animated (no Reanimated required).

🧑‍💻 Online example on Snack.

Requirements

• React Native >= 0.69
• react-native-gesture-handler >= 2.0

Install

Install dependency packages:

yarn add react-native-zoom-anything

Or

npm i -S react-native-zoom-anything

Follow the react-native-gesture-handler installation guide according to your RN version.

Basic usage

import { Image, useWindowDimensions } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

import Zoom from 'react-native-zoom-anything';

export default function Example() {
  const { width } = useWindowDimensions();
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Zoom minZoom={1} maxZoom={5}>
        <Image
          source={{ uri: 'https://picsum.photos/1920/1080' }}
          style={{ width: width, height: width * 9 / 16 }}
          resizeMode="contain"
          />
      </Zoom>
    </GestureHandlerRootView>
  );
}

PS: Probably on your project you are already using react-native-gesture-handler, so you don't need GestureHandlerRootView.

Props

• children: React single element that accepts onLayout (e.g., View, Image).
• minZoom (optional, default 1)
• maxZoom (optional, default 5)
• style (optional): Style for the container view.

Contribute

New features, bug fixes, and improvements are welcome! For questions and suggestions use the issues.

Star History

License

The MIT License (MIT)

Copyright (c) 2025 Douglas Nassif Roma Junior

See the full license file at LICENSE.