Expo VideoThumbnails

GitHub

npm

A library that allows you to generate an image to serve as a thumbnail from a video file.

Android
iOS

expo-video-thumbnails allows you to generate an image to serve as a thumbnail from a video file.

Installation

Terminal
- npx expo install expo-video-thumbnails

If you are installing this in an existing React Native app, start by installing expo in your project. Then, follow the additional instructions as mentioned by the library's README under "Installation in bare React Native projects" section.

Usage

Video Thumbnails
import { useState } from 'react';
import { StyleSheet, Button, View, Image, Text } from 'react-native';
import * as VideoThumbnails from 'expo-video-thumbnails';

export default function App() {
  const [image, setImage] = useState(null);

  const generateThumbnail = async () => {
    try {
      const { uri } = await VideoThumbnails.getThumbnailAsync(
        'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
        {
          time: 15000,
        }
      );
      setImage(uri);
    } catch (e) {
      console.warn(e);
    }
  };

  return (
    <View style={styles.container}>
      <Button onPress={generateThumbnail} title="Generate thumbnail" />
      {image && <Image source={{ uri: image }} style={styles.image} />}
      <Text>{image}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  image: {
    width: 200,
    height: 200,
  },
});

API

import * as VideoThumbnails from 'expo-video-thumbnails';

Methods

VideoThumbnails.getThumbnailAsync(sourceFilename, options)

Android
iOS
ParameterTypeDescription
sourceFilenamestring

An URI of the video, local or remote.

options(optional)VideoThumbnailsOptions

A map defining how modified thumbnail should be created.

Default:{}

Create an image thumbnail from video provided via sourceFilename.

Returns a promise which fulfils with VideoThumbnailsResult.

Types

VideoThumbnailsOptions

Android
iOS
PropertyTypeDescription
headers(optional)Record<string, string>

In case sourceFilename is a remote URI, headers object is passed in a network request.

quality(optional)number

A value in range 0.0 - 1.0 specifying quality level of the result image. 1 means no compression (highest quality) and 0 the highest compression (lowest quality).

time(optional)number

The time position where the image will be retrieved in ms.

VideoThumbnailsResult

Android
iOS
PropertyTypeDescription
heightnumber

Height of the created image.

uristring

URI to the created image (usable as the source for an Image/Video element).

widthnumber

Width of the created image.