Create an Image/Video Downloader App using React-Native

There are a vast amount of videos available on the internet but we are not able to download most of them. In this article, you will be guided through the step-by-step to create an Image/Video Downloader App using React-Native.

Preview of final output: Let us have a look at how the final output will look like.

Prerequisites:

• Introduction to React Native
• React Native Components
• React Native State
• React Native Props
• Node.js and npm (Node Package Manager)

Approach to create Image/Video Downloader:

• Create a React Native app using npx react-native@latest init AwesomeProject.
• Install the rn-fetch-blob dependency.
• Create a file Downloader.js with code handling state, permissions, and file downloading.
• Modify App.tsx to render the Downloader.js component.
• Execute npm start to run the React Native application.

Steps to install & configure React Native:

Step 1: Create a react native application by using this command:

npx react-native@latest init AwesomeProject
cd AwesomeProject

Step 2: Run the following command to install the dependency:

npm install rn-fetch-blob --force

Project Structure:

Project Dependency:

  "dependencies": {
    "react": "18.1.0",
    "react-native": "0.70.6",
    "rn-fetch-blob": "^0.12.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "0.72.3",
    "react-test-renderer": "18.1.0"
  }

Example: Create the required files and add the given code.

Javascript

//App.tsx

import React from "react";
import {
    SafeAreaView,
    ScrollView,
    StatusBar,
    StyleSheet,
    useColorScheme,
    View,
} from "react-native";

import Downloader from "./Downloader";
function App(): React.ReactElement {
    const isDarkMode = useColorScheme() === "dark";

    const backgroundStyle = {
        backgroundColor: isDarkMode ? "#1c1c1c" : "#ffffff",
    };

    return (
        <SafeAreaView style={backgroundStyle}>
            <StatusBar
                barStyle={isDarkMode ? "light-content" : "dark-content"}
                backgroundColor={backgroundStyle.backgroundColor}
            />
            <ScrollView
                contentInsetAdjustmentBehavior="automatic"
                style={backgroundStyle}
            >
                <View
                    style={{
                        backgroundColor: isDarkMode ? "#000000" : "#ffffff",}}
                >
                    <Downloader />
                </View>
            </ScrollView>
        </SafeAreaView>
    );
}

export default App;

Javascript

//Downloader.js

import {
    View,
    Text,
    TextInput,
    TouchableOpacity,
    PermissionsAndroid,
} from 'react-native';
import React, { useState } from 'react';
import RNFetchBlob from 'rn-fetch-blob';
const Downloader = () => {
    const [pastedURL, setPastedURL] = useState('');

    const requestStoragePermission = async () => {
        try {
            const granted = await PermissionsAndroid.request(
                PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
                {
                    title: 'Downloader App Storage Permission',
                    message:
                        'Downloader App needs access to your storage ' +
                        'so you can download files',
                    buttonNeutral: 'Ask Me Later',
                    buttonNegative: 'Cancel',
                    buttonPositive: 'OK',
                },
            );
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                downloadFile();
            } else {
                console.log('storage permission denied');
            }
        } catch (err) {
            console.warn(err);
        }
    };

    const downloadFile = () => {
        const { config, fs } = RNFetchBlob;
        const date = new Date();
        const fileDir = fs.dirs.DownloadDir;
        config({
            // add this option that makes response data to be stored as a file,
            // this is much more performant.
            fileCache: true,
            addAndroidDownloads: {
                useDownloadManager: true,
                notification: true,
                path:
                    fileDir +
                    '/download_' +
                    Math.floor(date.getDate() + date.getSeconds() / 2) +
                    '.mp4',
                description: 'file download',
            },
        })
            .fetch('GET', pastedURL, {
                //some headers ..
            })
            .then(res => {
                // the temp file path
                console.log('The file saved to ', res.path());
                alert('file downloaded successfully ');
            });
    };

    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', marginTop: 120, backgroundColor: '#c1f0f5' }}>
            <TextInput
                placeholder="enter/paste file url"
                style={{
                    width: '90%',
                    height: 50,
                    borderWidth: 0.5,
                    alignSelf: 'center',
                    paddingLeft: 20,
                    backgroundColor: '#021133',
                    color: 'white'
                }}
                valu={pastedURL}
                onChangeText={txt => setPastedURL(txt)}
            />
            <TouchableOpacity
                style={{
                    width: '90%',
                    height: 50,
                    borderWidth: 5,
                    borderColor: '#021133',
                    alignSelf: 'center',
                    backgroundColor: '#ff0f8f',
                    borderRadius: 20,
                    marginTop: 30,
                    fontWeight: 'bolder',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                onPress={() => {
                    if (pastedURL !== '') {
                        requestStoragePermission();
                    } else {
                        alert('Please Add URL');
                    }
                }}>
                <Text style={{ color: '#fff' }}>Download File</Text>
            </TouchableOpacity>
        </View>
    );
};

export default Downloader;

Step 3 : Run your app using the command:

npm start

Output: