expo-image-viewer v0.4.3

Expo Image Viewer

‼️ Do not use in production yet. See prerequisites below. ‼️

This is a simple image viewer built with React Native Reanimated and React Native Gesture Handler. Images use Expo Image, which is highly performant and allows for the prefetching of images to display in the image viewer.

This package is fully compatible with Expo Go.

Prerequisites

• Expo SDK 49
• Expo Image - Currently this package uses an unreleased version of Expo Image while waiting for Expo to publish changes fixing a memory leak while scaling images.
• Expo Haptics
• Reanimated 3.3.0+
• React Native Gesture Handler 2.12.0+

Installation

yarn add expo-image-viewer

Usage

First, you will want to wrap your app inside a <GestureHandlerRootView> component. You should place this somewhere near the root of your app, such as in your App.tsx file.

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

export default function App() {
    return (
        <GestureHandlerRootView>
          <App />
        </GestureHandlerRootView>
    );
}

Next, you should additionally wrap your app inside of ImageViewerProvider.

import { ImageViewerProvider } from 'expo-image-viewer';

export default function App() {
    return (
        <GestureHandlerRootView>
          <ImageViewerProvider>
            <App />
          </ImageViewerProvider>
        </GestureHandlerRootView>
    );
}

Finally, you can use the ViewerImage component to display images in the image viewer.

import { ViewerImage } from 'expo-image-viewer';

export default function MyScreen() {
    return (
        <View style={{flex: 1}}>
            <ViewerImage
              source="https://images.unsplash.com/photo-1634179127707-4b8b9b5b2b0b?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzNnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
              initialDimensions={{
                height: 500,
                width: 500
              }}
              heightModifier={0.6}
              title="My Image"
            />
        </View>
    );
}

Whenever the ViewerImage component is pressed, the image viewer will open and display the image.

Props

ImageViewerProvider

ImageViewerOptions

ViewerImage

useImageViewer()

If you need to get any of the current values (such as the current index of the displayed image or the image source) or if you wish to create your own implementation of ViewerImage, you can use the useImageViewer hook.

IImageViewerState

IImageViewerParams

IAction

IAction is an object that takes a type and a payload. These are the possible actions.