Guides

Customize PDF Content Area UI

This section describes how to customize the interactive UI styles within PDF pages using readerViewConfig.uiStyle. This configuration only applies to the PDF content area itself, including text selection, annotation and form selection borders, screenshot selections, page rectangle highlights, and page icons. It does not include toolbar, theme colors, or overall reader UI configuration.

Use this page when you want to change native visual helpers inside the page canvas. For toolbar buttons, menus, or mode visibility, use the dedicated toolbar and context menu pages instead.

Color values use hex strings with alpha, such as #FF6499FF or #00000000.

Annotation and Content Editing Selection Style

Controls the border and control point styles when annotations and content editing objects are selected.

const configuration = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    uiStyle: {
      focusBorderStyle: {
        nodeColor: "#FC534E",
        borderColor: "#FC534E",
        borderWidth: 2,
        borderDashPattern: [20, 10]
      },
    },
  },
});

Field	Type	Description
nodeColor	String	Control point (corner) color.
borderColor	String	Selected border color.
borderWidth	Number	Border width.
borderDashPattern	Number[]	Dash pattern, format: [dash length, gap length].

Content Editing Default Border Style

Controls the border display style for content editing objects when not selected.

const configuration = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    uiStyle: {
      defaultBorderStyle: {
        borderColor: "#50507F",
        borderWidth: 2,
        borderDashPattern: [20, 10],
      },
    },
  },
});

Field	Type	Description
borderColor	String	Border color.
borderWidth	Number	Border width.
borderDashPattern	Number[]	Dash pattern.

Image Crop Border Style

Controls the border style shown while cropping an image in content editor mode.

const configuration = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    uiStyle: {
      cropImageStyle: {
        borderColor: "#FF6499FF",
        borderWidth: 2,
        borderDashPattern: [20, 10],
      },
    },
  },
});

Field	Type	Description
borderColor	String	Crop border color.
borderWidth	Number	Crop border width.
borderDashPattern	Number[]	Dash pattern.

Form Drawing and Preview Style

Sets the drawing preview effect during form control creation.

const configuration = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    uiStyle: {
      formPreview: {
        style: "fill",
        color: "#48C2FF6C",
      },
    },
  },
});

Complete Example

See the React Native example screen src/features/ui_customization/ui_style/CustomUiStyleExampleScreen.tsx for a complete configuration that combines bookmarkIcon, icons, selectTextColor, displayPageRect, screenshot, formPreview, defaultBorderStyle, focusBorderStyle, and cropImageStyle.

Field	Description
style	Preview style, supports fill / stroke.
strokeWidth	Border width.
color	Preview color (supports transparency).

Screenshot Selection Style

Customizes the display of selection borders and mask areas in screenshot functionality.

const configuration = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    uiStyle: {
      screenshot: {
        fillColor: "#00000000",
        borderColor: "#FF6499FF",
        outsideColor: "#00000000",
        borderWidth: 5,
        borderDashPattern: [20, 10],
      },
    },
  },
});

Field	Description
outsideColor	Mask color outside selection.
fillColor	Fill color inside selection.
borderColor	Border color.
borderWidth	Border width.
borderDashPattern	Dash pattern.

Text Selection Style and Operation Indicators

Controls the background color of text selection areas and operation indicator icons on both sides.

const configuration = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    uiStyle: {
      icons: {
        selectTextLeftIcon: "ic_test_cursor_left",
        selectTextRightIcon: "ic_test_cursor_right",
        selectTextIcon: "ic_test_cursor",
        rotationAnnotationIcon: "ic_test_rotate",
      },
      selectTextColor: "#E7473BBC",
    },
  },
});

Field	Description
selectTextColor	Text selection background color.
selectTextLeftIcon	Left operation indicator icon.
selectTextRightIcon	Right operation indicator icon.
selectTextIcon	Default operation icon.
rotationAnnotationIcon	Rotation annotation icon.

Adding Custom Icon Resources:

• Android: Place icon files (e.g., ic_test_cursor.png) in the android/app/src/main/res/drawable directory.
• iOS: Add icon files (e.g., ic_test_cursor.png) to the ios/Runner/Assets.xcassets asset catalog.

Page Rectangle Highlight Style

Styles for rectangle areas when highlighting specified pages via the controller.setDisplayPageIndex() API.

const configuration = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    uiStyle: {
      displayPageRect: {
        fillColor: "#4D1460F3",
        borderColor: "#FF6499FF",
        borderWidth: 2,
        borderDashPattern: [0, 0]
      },
    },
  },
});

Field	Description
fillColor	Rectangle fill color.
borderColor	Rectangle border color.
borderWidth	Border width.
borderDashPattern	Dash pattern.

Bookmark Indicator Icon

Customizes the display icon for bookmark markers within pages.

const configuration = ComPDFKit.getDefaultConfig({
  readerViewConfig: {
    uiStyle: {
      bookmarkIcon: "ic_test_bookmark",
    },
  },
});