React Native
SendGrid HTML Email with Embedded Images

Demonstrates how to send an HTML email with embedded images using SendGrid.
Chilkat React Native Downloads

React Native
import { BinData, Http, HttpRequest, HttpResponse, JsonObject, StringBuilder } from '@chilkat/react-native'

async function chilkatExample() {
  // This requires the Chilkat API to have been previously unlocked.
  // See Global Unlock Sample for sample code

  const req = new HttpRequest();
  const http = new Http();

  // First.. load a JPG file and build an HTML img tag with the JPG data inline encoded.
  // Our HTML img tag will look like this:
  // <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA3ADcAA..." alt="" style="border-width:0px;" />
  const bdJpg = new BinData();
  try {
    bdJpg.loadFile('qa_data/jpg/starfish.jpg');
  } catch {
    console.log('Failed to load JPG file.');
    return;
  }

  // Note: HTML containing embedded base64 image data may not be visible in all email clients.
  // For example, GMail might not display the image, but viewing in Outlook might be OK.
  const sbHtml = new StringBuilder();
  sbHtml.append('<html><body><b>This is a test<b><br /><img src="data:image/jpeg;base64,');
  // Append the base64 image data to sbHtml.
  bdJpg.getEncodedSb('base64', sbHtml);
  sbHtml.append('" alt="" style="border-width:0px;" /></body></html>');

  const json = new JsonObject();
  json.updateString('personalizations[0].to[0].email', 'matt@chilkat.io');
  json.updateString('personalizations[0].to[0].name', 'Matt');
  json.updateString('from.email', 'admin@chilkatsoft.com');
  json.updateString('subject', 'Test HTML email with images');
  json.updateString('content[0].type', 'text/html');
  json.updateSb('content[0].value', sbHtml);

  http.authToken = 'SENDGRID_API_KEY';

  const resp = new HttpResponse();
  try {
    await http.httpJsonAsync('POST', 'https://api.sendgrid.com/v3/mail/send', json, 'application/json', resp);
  } catch {
    console.log(http.lastErrorText);
    return;
  }

  console.log(`response status code: ${resp.statusCode}`);
  // Display the response.
  // If successful, the response code is 202 and the response body string is empty.
  // (The response body string may also be empty for error response codes.)
  console.log(resp.bodyStr);
}