Client side js. With FileReader and fetch.

const base64 = await fetch('https://i.imgur.com/gBi0yjr.png')
  .then(response => response.blob())
  .then(blob => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    return new Promise((res) => {
      reader.onloadend = () => {
      res(reader.result);
    }})
  })

I use rn-fetch-blob, basically it provides lot of file system and network functions make transferring data pretty easy.

react-native-fetch-blob is deprecated

import RNFetchBlob from "rn-fetch-blob";
const fs = RNFetchBlob.fs;
let imagePath = null;
RNFetchBlob.config({
  fileCache: true
})
  .fetch("GET", "http://www.example.com/image.png")
  // the image is now dowloaded to device's storage
  .then(resp => {
    // the image path you can use it directly with Image component
    imagePath = resp.path();
    return resp.readFile("base64");
  })
  .then(base64Data => {
    // here's base64 encoded image
    console.log(base64Data);
    // remove the file from storage
    return fs.unlink(imagePath);
  });

source Project Wiki

Deprecated since v6

const encodedString = new Buffer('your string here').toString('base64');

Use Instead

const encodedString = Buffer.from('your string here').toString('base64');

If you get this error Uncaught ReferenceError: Buffer is not defined

you may add dependency on buffer into your project

npm install --save buffer

update your webpack.config.js

const webpack = require("webpack");

module.exports = {
    plugins: [
        // add this line to plugins
        new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
        }),
    ],
    resolve: {
        fallback: {
            // add this line to resolve.fallback
            "buffer": require.resolve("buffer")
        }
    },
}

I share my solution

const getEmergencyFoundImg = urlImg => {
  var img = new Image();
  img.src = urlImg;
  img.crossOrigin = 'Anonymous';

  var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

  canvas.height = img.naturalHeight;
  canvas.width = img.naturalWidth;
  ctx.drawImage(img, 0, 0);

  var b64 = canvas.toDataURL('image/png').replace(/^data:image.+;base64,/, '');
  return b64;
};

I recommend calling this function with async / await to build the object of the post.

The method extracts it from this source: https://base64.guru/developers/javascript/examples/convert-image

file reading is asynchronous. so use callback or promise to solve your problem.

let idCardBase64 = '';
this.getBase64(idCard, (result) => {
     idCardBase64 = result;
});

and use callback to return the data which you get.

getBase64(file, cb) {
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        cb(reader.result)
    };
    reader.onerror = function (error) {
        console.log('Error: ', error);
    };
}