RN-fetch-blob bad base64 - android only issue

Question

I am having an issue within react native where I am downloading a base 64 string from an API and rendering it as a PDF on mobile devices.

The project is built with React native - the code works fine on iOS but on Android we are getting a 'bad base 64' / invalid PDF format error.

Code:

//fetch on button click
 getBill = () => {
    if (Platform.OS === "android") {
      this.getAndroidPermission();
    } else {
      this.downloadBill();
    }
  };

//check user has permissions on device (only 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>

Any help would be appreciated

Answer 1

You are giving the wrong file path to open in android, whereas in IOS, it is actually saving in the correct place and opening from the correct place.

Check the OS before opening the file and then open the file.

....
const fpath = `${RNFetchBlob.fs.dirs.DownloadDir}${filename}`;
RNFetchBlob.config({
        addAndroidDownloads: {
            useDownloadManager: true,
            notification: true,
            path: fpath,
            description: "File downloaded by download manager.",
        },
    })
    .fetch("GET", `${config.apiUrl}/crm/getbillfile/${billId}`, {
        Authorization: "Bearer " + userToken,
    })
    .then((resp) => {
        if (OS == "ios") {
            // ... do existing logic    
        } else if (OS === "android") {
            // FileViewer or RNFetchBlob should work.
            RnFetchBlob.android.actionViewIntent(fpath, "application/pdf");
        }
    });
};

Answer 2

finaly, i find it!

this is my answer

import React from 'React'

    if (Platform.OS == "android") {

        RNFetchBlob.fs.readFile(uri, 'base64')
            .then((base64Data) => {
                onPostMessage({ type: 'photo', data: `data:image/jpeg;base64,${base64Data}` });
            })
            .catch((error) => console.log(error))
        return;
    }

    RNFetchBlob.fetch('GET', uri)
        .then(response => response.base64())
        .then(base64Data => {
            onPostMessage({ type: 'photo', data: `data:image/jpeg;base64,${base64Data}` });
        })
        .catch(error => {
            console.log(error);
        });