React Native Branding Fonts

Android

Please follow the instructions on Android Branding Fonts page.

iOS

Font configuration requires the following steps:

Step 1: Register fonts with your native iOS app

After completing this step, your custom fonts should appear in your iOS app’s Info.plist file, under the Fonts provided by application entry, with the correct paths to font files.

If your custom fonts are already registered with the iOS app, you can skip this step.

Font registration can be acomplished in several ways, for example:

Register fonts using react-native-asset:

  1. Create an /assets/fonts folder in the project folder and copy the fonts you want to use to this directory.
  2. Add a react-native.config.js file to the project’s root directory (or expand your existing file), and point its assets property to a created folder:
module.exports = {
    project: {
        ios:{},
        android:{}
    },
    assets:['./assets/fonts/'],
}
  1. Run npx react-native-asset command to register your fonts with both the iOS and Android apps.
Step 2: Use the custom fonts in SbIosFonts interface

The fonts for various styles used in capture can be overridden in the SbIosFonts interface, provided to the SbBranding interface via the optional iosFonts property.

In Capture, the following font styles are used:

Style nameUsage Description
largeTitletext over camera view (capture progress feedback on Capture screen)
title2larger title text (e.g. tip title on Tips screen, or selected document type option on Capture screen)
title3smaller title text (e.g. Crop screen title)
bodynormal screen text (e.g. tip description on Tips screen)
subheadlinePrimary and Secondary action button labels
footnotesmaller text (e.g. Crop, Add Page, and other buttons on Preview screen)
captionvery small text (e.g. page count on Capture screen)

All font styles are optional, and if not provided, the default font style will be used. See BrandingFontsProvider protocol for details about default font styles used by Capture. If provided, the custom style definition must include two properties:

  • name: the full name of the font, which includes both: the font family name and the specific style information for the font. For example: ‘AmericanTypewriter-Condensed’
  • size: the size of font in points. Must be greater than 0.0

Example

const captureConfiguration: SbCaptureConfiguration = {
    captureFeatures: {
      // ...
    },
    branding: {
      iosColors: {
        // ...
      },
      iosFonts: {
          subheadline: {
            name: 'Zapfino',
            size: 17,
          },
          title3: {
            name: 'Papyrus',
            size: 24,
          },
          body: {
            name: 'AmericanTypewriter-Condensed',
            size: 17,
          },
          footnote: {
            name: 'Futura-CondensedMedium',
            size: 10,
          },
      },
    },
  };