Handling PDF downloads from Base64 strings in React Native is a common requirement, especially when dealing with APIs that return document data as encoded text to ensure data integrity. Since React Native's core fetch does not natively handle file system saving for Base64, you must use community libraries to write the data to the device and optionally trigger a "Save As" or sharing dialog. 1. Prerequisites: Essential Libraries
In Expo, you write the string to the app's cache or document directory and use expo-sharing to let the user save it to their preferred location. javascript react native download pdf from base64
import RNFetchBlob from 'react-native-blob-util'; import { Platform } from 'react-native'; const downloadBase64PDF = async (base64String, fileName) => { const { dirs } = RNFetchBlob.fs; const path = `${Platform.OS === 'ios' ? dirs.DocumentDir : dirs.DownloadDir}/${fileName}.pdf`; // Clean prefix if it exists (e.g., 'data:application/pdf;base64,') const cleanBase64 = base64String.replace(/^data:application\/pdf;base64,/, ""); try { await RNFetchBlob.fs.writeFile(path, cleanBase64, 'base64'); if (Platform.OS === 'ios') { // iOS usually requires a preview or share sheet to "complete" the download RNFetchBlob.ios.previewDocument(path); } else { // Android can show a success message or trigger a scan for the media gallery console.log('File saved to:', path); } } catch (error) { console.error('Download error:', error); } }; Use code with caution. 3. Implementation for Expo (using expo-file-system ) Handling PDF downloads from Base64 strings in React
(formerly rn-fetch-blob ): The standard for Bare Workflow apps, offering high customization for Android's Download Manager. expo-file-system : The go-to for Expo-managed projects. Prerequisites: Essential Libraries In Expo, you write the
2. Implementation for Bare React Native (using react-native-blob-util )
This approach allows you to save the file directly to the device's storage and use Android's native download notifications. javascript