Create an Image/Video Downloader App using React-Native

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