React Native Requires Chilkat v11.7.0+

QR Code with a Text Caption

See more QR Code Examples

Demonstrates printing a line of text under a QR code, such as the order number or the address the code holds, so that a person can read it too. render.text turns the caption on and gives its value, which is printable ASCII and is drawn in a built-in font that needs no font files. The caption can go above or below the symbol, be aligned left, center or right, and be scaled. React Native

import { Formats, JsonObject } from '@chilkat/react-native'

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

  const json = new JsonObject();
  json.updateString('payload.text', 'https://www.chilkatsoft.com/order/12345');
  json.updateInt('render.moduleSize', 6);

  // The caption.  It need not be the same as the text in the QR code.
  json.updateBool('render.text.enabled', true);
  json.updateString('render.text.value', 'ORDER 12345');
  // position is "below" (the default) or "above".  alignment is "center" (the default), "left" or "right".
  json.updateString('render.text.position', 'below');
  // Each dot of the caption's font is drawn this many pixels wide.
  json.updateInt('render.text.scale', 3);

  json.updateString('output.path', 'qa_output/qr_caption.png');
  json.updateBool('output.overwrite', true);
  json.updateString('output.return', 'none');

  const fmt = new Formats();
  const jsonOut = new JsonObject();
  try {
    fmt.qrCode('generate', json, jsonOut);
  } catch {
    console.log(fmt.lastErrorText);
    return;
  }

  console.log(`caption: ${jsonOut.stringOf('measurements[0].text')}`);
  console.log(`caption scale: ${jsonOut.intOf('measurements[0].textScale')}`);
  console.log(`height added for the caption: ${jsonOut.intOf('measurements[0].textBandPx')} pixels`);
  console.log(`image: ${jsonOut.intOf('measurements[0].canvasWidth')} x ${jsonOut.intOf('measurements[0].canvasHeight')} pixels`);

  // The image written to qa_output/qr_caption.png:

  // 

  // Sample output:

  // caption: ORDER 12345
  // caption scale: 3
  // height added for the caption: 21 pixels
  // image: 222 x 243 pixels
}