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.
//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;
|
//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: