React Native

Send HTML Email with Image to iPhone

Demonstrates how to compose an HTML email with an embedded image that will display correctly on an iPhone. This example produces an email that looks like this on the iPhone:

Chilkat React Native Downloads

Download Chilkat for React Native

React Native

import { Email, MailMan, StringBuilder } from '@chilkat/react-native'

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

  // The mailman object is used for sending and receiving email.
  const mailman = new MailMan();

  // Use your SMTP server hostname.  This example uses office365, but it could be any SMTP server..
  mailman.smtpHost = 'outlook.office365.com';
  mailman.smtpPort = 587;
  mailman.startTLS = true;

  // Set the SMTP login/password
  mailman.smtpUsername = 'OFFICE365-SMTP-LOGIN';
  mailman.smtpPassword = 'OFFICE365-SMTP-PASSWORD';

  // Create a new email object
  const email = new Email();
  email.subject = 'Testing for Chilkat SMTP API...';
  email.body = 'Testing for Chilkat SMTP API...';
  email.from = 'Chilkat Support <my-office365-user@mydomain.com>';
  email.addTo('Chilkat Support', 'support@chilkatsoft.com');

  // For whatever reason, the iPhone's email program requires
  // images in HTML to be referenced by Content-ID.  Therefore,
  // we must add the image like this:
  let contentIdStarfish: string;
  try {
    contentIdStarfish = email.addRelatedFile('qa_data/jpg/starfish.jpg');
  } catch {
    console.log(email.lastErrorText);
    return;
  }

  // The src attribute for the image tag is set to the contentIdStarfish:
  const sbHtml = new StringBuilder();
  sbHtml.append('<html><body><p>This is an HTML email with an embedded image.</p>');
  sbHtml.append('<p><img src="cid:CONTENT_ID_STARFISH" /></p></body></html>');
  const numReplacements = sbHtml.replace('CONTENT_ID_STARFISH', contentIdStarfish);

  email.setHtmlBody(sbHtml.getAsString());

  try {
    await mailman.sendEmailAsync(email);
    console.log('Mail Sent!');
  } catch {
    console.log(mailman.lastErrorText);
  }
}