Expo Media Preview

A lightweight media viewer that allows full-screen (image/video/GIF).

You can pinch zoom-in/out, double-tap zoom-in/out, move and swipe-to-dismiss.

Note: This library is only compatible with Expo 52 and above

Note: If media is of big quality it will take time to render hence spinner

Features

• Single Tap to open an media full-screen.
• Pinch to Zoom.
• Drag to Dismiss.
• Supports Images, GIFs, and Videos out of the box.

Installation

Using npm:

npm install expo-media-preview

Using yarn:

yarn add expo-media-preview

Additionally, install required peer dependencies:

expo install expo-image expo-video expo-blur

Demo

Quick Start

• Install the package (and its peer dependencies).
• Import and use with either an image or a video source.

import React from "react";
import { View } from "react-native";
import ExpoMediaPreview from "expo-media-preview";

export default function App() {
  const sampleImage = {
    uri: "https://path-to-your-img-file.jpg", // Replace with your image URL
  };

  const sampleVideo = {
    uri: "https://path-to-your-video-file.mp4", // Replace with your video URL
  };

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      {/* Usage with an image */}
      <ExpoMediaPreview
        source={sampleImage}
        style={{
          height: 150,
          width: 150,
        }}
      />

      {/* Usage with a video */}
      <ExpoMediaPreview
        source={sampleVideo}
        videoPlaceholderSrc={{
          uri: "https://path-to-your-placeholder-image.jpg",
        }}
        isVideo={true}
        style={{
          height: 150,
          width: 150,
        }}
      />
    </View>
  );
}

Behind the Scenes

• expo-image is used for efficient image loading and caching.
• expo-video powers the video playback.
• Pinch, Zoom, and Drag logic is handled via React Native’s PanResponder.
• expo-blur for background blurring during full-screen mode.

ExpoMediaPreview Component Props

| Prop | Type | Description | |---|---|---| | source | Undefined | Media source | | videoPlaceholder | ImageSourcePropType | Image source for video placeholder | | isVideo | boolean | Determines if the source is a video default false | | style | StyleProp | Style for the original Media | | swipeToDismiss | boolean | Enable swipe to dismiss functionality | | disabled | boolean | Disable opening image modal | | parentLayout | { x: number, y: number, width: number, height: number } | Parent component layout for modal | | animationDuration | number | Duration of animation default 150 | | onTap | (eventParams: OnTap) => void | Callback when media is tapped | | onDoubleTap | () => void | Callback when media is double tapped | | onLongPress | () => void | Callback when media is long pressed | | onOpen | () => void | Callback when media modal is opening | | didOpen | () => void | Callback when media modal is opened | | onMove | (position: OnMove) => void | Callback when modal media is moving | | responderRelease | (vx: number, scale: number) => void | Callback when touch is released | | willClose | () => void | Callback when media modal is closing | | onClose | () => void | Callback when media modal is closed |

• Video Placeholder (Highly Recommended): Always include videoPlaceholderSrc for videos. This uses expo-image for better quality and caching. Without it, videos render initially muted, paused, and without controls. Regarding Videos:

Made with ❤️ and Expo

Credits: Inspired from react-native-image-modal