Expo

Get Started
API Reference

VideoThumbnails

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

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb

Installation

expo install expo-video-thumbnails

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

import React, { 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(
        'http://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>
  );
}

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

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

  • sourceFilename (string) - An URI of the video, local or remote.
  • options (VideoThumbnailsOptions) - A map defining how modified thumbnail should be created.

Create an image thumbnail from video provided via sourceFilename.

  • Promise<VideoThumbnailsResult>

Returns a promise which fulfils with VideoThumbnailsResult.

NameTypeDescription
headers
(optional)
Record<string, string>In case sourceFilename is a remote URI, headers object is passed in a network request.
quality
(optional)
numberA 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)
numberThe time position where the image will be retrieved in ms.

NameTypeDescription
heightnumberHeight of the created image.
uristringURI to the created image (usable as the source for an Image/Video element).
widthnumberWidth of the created image.