I've encountered an issue in React Native where I'm trying to download a base 64 string from an API and display it as a PDF on mobile devices.
The problem arises when using the code on Android, as it returns a 'bad base 64' / invalid PDF format error, whereas it works perfectly fine on iOS.
Below is the code snippet:
//fetch on button click
getBill = () => {
if (Platform.OS === "android") {
this.getAndroidPermission();
} else {
this.downloadBill();
}
};
//check user permissions on device (specifically for android)
getAndroidPermission = async () => {
try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
);
const grantedRead = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE
);
if (
granted === PermissionsAndroid.RESULTS.GRANTED &&
grantedRead === PermissionsAndroid.RESULTS.GRANTED
) {
this.downloadBill();
} else {
Alert.alert(
"Permission Denied!",
"You need to give storage permission to download the file"
);
}
} catch (err) {
console.warn(err);
}
};
//download and display bill
downloadBill = async () => {
this.setState({ loading: true });
let billId = this.state.billId;
let user = await AsyncStorage.getItem("user");
let parseUser = JSON.parse(user);
let userToken = parseUser.token;
RNFetchBlob.config({
addAndroidDownloads: {
useDownloadManager: true,
notification: true,
path:
RNFetchBlob.fs.dirs.DownloadDir +
"/" +
`billID_${this.state.billId}.pdf`,
mime: "application/pdf",
description: "File downloaded by download manager.",
appendExt: "pdf",
trusty: true,
},
})
.fetch("GET", `${config.apiUrl}/crm/getbillfile/${billId}`, {
Authorization: "Bearer " + userToken,
})
.then((resp) => {
let pdfLocation =
RNFetchBlob.fs.dirs.DocumentDir +
"/" +
`billID_${this.state.billId}.pdf`;
RNFetchBlob.fs.writeFile(pdfLocation, resp.data, "base64");
FileViewer.open(pdfLocation, {
onDismiss: () => this.setState({ loading: false }),
});
});
};
Android manifest:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
<action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
</intent-filter>
Your assistance in resolving this issue would be greatly appreciated. Thank you!