react-native-thumbnails-light

Getting started

$ npm i react-native-thumbnails-light

iOS

1. In pod add pod 'RNThumbnailsLight', :path => '../node_modules/react-native-thumbnails-light/ios/RNThumbnailsLight.podspec'
2. pod install
3. Run your project

Android

1. Open up android/app/src/main/java/[...]/MainApplication.kt

   • Add import com.reactnative.thumbnailslight.RNThumbnailsLightPackage;; to the imports at the top of the file
   • Add new RNThumbnailsLightPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

      include ':react-native-thumbnails-light'
    project(':react-native-thumbnails-light').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-thumbnails-light/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

    implementation project(':react-native-thumbnails-light')

Usage

import React, { useEffect, useState } from 'react';
import { Image, View, Text } from 'react-native';
import { getThumbnailAsync } from 'react-native-thumbnails-light';

const VideoThumnails = ({ url }) => {
    const [image, setImage] = useState(null);

    useEffect(() => {
        if (!image) {
            getImageUrlFromVideo();
        }
    }, []);

    const getImageUrlFromVideo = async () => {
        await getThumbnailAsync(url, { time: 5000 })
            .then(res => {
                setImage(res.uri);
            })
            .catch(e => {
                console.log(e);
            });
        setImage(uri);
    };

    return (
        <View>
            {image ? (
                <Image
                    source={{ uri: image }}
                    style={{ width: 100, height: 100 }}
                />
            ) : (
                <Text>Loading...</Text>
            )}
        </View>
    );
}

export default VideoThumnails;