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:
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: