[top] Download Base64 React Native May 2026

npm install react-native-blob-util # or yarn add react-native-blob-util Use code with caution. Step 2: Implementing the Download Logic

import ReactNativeBlobUtil from 'react-native-blob-util'; import { Platform, Alert } from 'react-native'; const downloadBase64File = async (base64Data, fileName, fileType) => { // 1. Remove the header (e.g., "data:application/pdf;base64,") const base64Code = base64Data.split('data:application/pdf;base64,').pop(); // 2. Define the path const dirs = ReactNativeBlobUtil.fs.dirs; const path = Platform.select({ ios: `${dirs.DocumentDir}/${fileName}`, android: `${dirs.DownloadDir}/${fileName}`, }); try { await ReactNativeBlobUtil.fs.writeFile(path, base64Code, 'base64'); if (Platform.OS === 'android') { // Scan the file so it shows up in the gallery/downloads app immediately ReactNativeBlobUtil.fs.scanFile([{ path, mime: fileType }]); } Alert.alert("Success", `File downloaded to: ${path}`); } catch (error) { console.error("Download Error:", error); Alert.alert("Error", "Failed to save file."); } }; Use code with caution. Step 3: Handling Permissions Modern mobile OSs are strict about file access. You must add these to your AndroidManifest.xml : download base64 react native

Sometimes "downloading" isn't enough—users want to send the file via WhatsApp or Email. You can combine your Base64 logic with react-native-share . javascript Define the path const dirs = ReactNativeBlobUtil

Note: For Android 10+, you may also need android:requestLegacyExternalStorage="true" in the tag if targeting older API levels. You can combine your Base64 logic with react-native-share

Stay updated

Sign up to our newsletter and hear about the big ideas and new campaigns, taking place all around the world, that are helping to drive progress towards the Global Goals.

Stay updated

Sign up to our newsletter and hear about the big ideas and new campaigns, taking place all around the world, that are helping to drive progress towards the Global Goals.