React Native Gesture Image Viewer
Guide
Guide
English

Installation

Important

react-native-gesture-image-viewer is a high-performance viewer library built on react-native-reanimated and react-native-gesture-handler.
Therefore, you must install React Native Reanimated and Gesture Handler before using this library. Please refer to the official documentation of these libraries for detailed setup guides.

Minimum Requirements

LibraryMinimum Version
react>=18.0.0
react-native>=0.75.0
react-native-gesture-handler>=2.24.0
react-native-reanimated>=3.0.0

React Native Reanimated Setup

npm
yarn
pnpm
bun
npm install react-native-reanimated

Add the plugin to your babel.config.js:

babel.config.js
module.exports = {
  presets: [
    ... // don't add it here :)
  ],
  plugins: [
    ...
    // for web
    '@babel/plugin-proposal-export-namespace-from',
    // react-native-reanimated/plugin has to be listed last.
    'react-native-reanimated/plugin',
  ],
};

Wrap your Metro config with wrapWithReanimatedMetroConfig in metro.config.js:

metro.config.js
const {
  wrapWithReanimatedMetroConfig,
} = require('react-native-reanimated/metro-config');

const config = {
  // Your existing Metro configuration options
};

module.exports = wrapWithReanimatedMetroConfig(config);

React Native Gesture Handler Setup

npm
yarn
pnpm
bun
npm install react-native-gesture-handler
  • react-native-gesture-handler generally doesn't require additional setup, but please refer to the official documentation for your specific environment.
  • For using gestures in Android modals, you would normally need to wrap modal content with GestureHandlerRootView. However, this library already includes GestureHandlerRootView internally, so no additional wrapping is needed when using modals.

Install React Native Gesture Image Viewer

You’re all set! 🎉
Start by installing react-native-gesture-image-viewer

npm
yarn
pnpm
bun
npm install react-native-gesture-image-viewer