RNFetchBlob - Not able to get API data in generated image file

Question

Hello guys I designed certificate Image module on my website when I click on Download I able to generate a certificate image file with all data. but right now, I designing same for React Native using RNFetchBlob from 'rn-fetch-blob' when i calling to api I able to generate a image but not able getting my Name and city as its show in code..

One more thing when I console.log I able to see api data with Name and City

I guess the problem is Remote_Image_Path

OnPress = downloadimage

Console.log

https://example.com/xxxApi/xxxxpath?name=JasonBourne&city=NewYork&uniqueId=xx4434cc/xxx.png

App.js

const downloadImage = () => {
    const REMOTE_IMAGE_PATH =
    (`${API_URL}/xxxApi/xxxxpath?name=${apiData.name}&city=${apiData.city}&uniqueId=${route.params.id}`+"/xxx.png");
    setImageUrl(REMOTE_IMAGE_PATH);
    console.log(imageUrl);
    // Main function to download the image
    
    // To add the time suffix in filename
    let date = new Date();
    // Image URL which we want to download
    let image_URL = (`${API_URL}/puxxxApiblicApi/xxxxpath?name=${apiData.name}&city=${apiData.city}&uniqueId=${route.params.id}`+"/xxx.png")
        
    // Getting the extention of the file
    let ext = getExtention(imageUrl);
    ext = '.' + ext[0];
    // Get config and fs from RNFetchBlob
    // config: To pass the downloading related options
    // fs: Directory path where we want our image to download
    const { config, fs } = RNFetchBlob;
    let PictureDir = fs.dirs.PictureDir;
    let options = {
      fileCache: true,
      addAndroidDownloads: {
        // Related to the Android only
        useDownloadManager: true,
        notification: true,
        path:
          PictureDir +
          '/xxpicturepath' + 
          Math.floor(date.getTime() + date.getSeconds() / 2) +
          ext,
        description: 'Image',
      },
    };
    config(options)
      .fetch('GET', imageUrl)
      .then(res => {
        // Showing alert after successful downloading
        console.log('res -> ', JSON.stringify(res));
        alert('Image Downloaded Successfully.');
      });
  };

Answer 1

Just added &x after uniqueId=${route.params.id} for separating link with name extension

const downloadImage = () => {
        const REMOTE_IMAGE_PATH =
        (`${API_URL}/xxxApi/xxxxpath?name=${apiData.name}&city=${apiData.city}&uniqueId=${route.params.id}&x`+"/xxx.png");

        // Main function to download the image
        
        // To add the time suffix in filename
        let date = new Date();
        // Image URL which we want to download
        let image_URL = REMOTE_IMAGE_PATH;
            
        // Getting the extention of the file
        let ext = getExtention(imageUrl);
        ext = '.' + ext[0];
        // Get config and fs from RNFetchBlob
        // config: To pass the downloading related options
        // fs: Directory path where we want our image to download
        const { config, fs } = RNFetchBlob;
        let PictureDir = fs.dirs.PictureDir;
        let options = {
          fileCache: true,
          addAndroidDownloads: {
            // Related to the Android only
            // xxpicturepath is a directory name in android storage for storing image
            useDownloadManager: true,
            notification: true,
            path:
              PictureDir +
              '/xxpicturepath' + 
              Math.floor(date.getTime() + date.getSeconds() / 2) +
              ext,
            description: 'Image',
          },
        };
        config(options)
          .fetch('GET', imageUrl)
          .then(res => {
            // Showing alert after successful downloading
            console.log('res -> ', JSON.stringify(res));
            alert('Image Downloaded Successfully.');
          });
      };