For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt, and this page is available as Markdown at /guide/getting-started/installation.md.
v3 is stable. See what changed
React Native Gesture Image Viewer
  • English
  • 3.x

      • Installation

      React Native Reanimated v3 Users

      If you're using React Native Reanimated v3, version 1.x of this library is recommended for the best experience.

      👉 Go to v1.x Documentation

      Version 3.x supports React Native Reanimated v4.

      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>=4.0.0
      react-native-worklets>=0.5.0

      React Native Reanimated Setup

      Install react-native-reanimated and react-native-worklets packages:

      npm
      yarn
      pnpm
      bun
      deno
      npm install react-native-reanimated
      • react-native-worklets was separated from react-native-reanimated for better modularity and must be installed separately.
      npm
      yarn
      pnpm
      bun
      deno
      npm install react-native-worklets

      Configure Babel

      Expo

      Use Expo's Reanimated installation guide to install versions compatible with your Expo SDK:

      npm
      yarn
      pnpm
      bun
      deno
      npm expo install react-native-reanimated react-native-worklets

      The Babel plugin is configured automatically by babel-preset-expo. For Expo Go, use an Expo SDK that includes Reanimated 4.

      React Native CLI

      When using React Native Community CLI, you also need to manually add the react-native-worklets/plugin plugin to your babel.config.js.

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

      React Native Gesture Handler Setup

      npm
      yarn
      pnpm
      bun
      deno
      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 the stable release of react-native-gesture-image-viewer

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