Performance Tracker

To track screen rendering and draw times, wrap the desired screen or component with PerformanceTracker. This will automatically capture render and draw times.

For example:

1
import { PerformanceTracker } from '@d11/marco';
2

3
const MyScreen = () => {
4
  return (
5
    <PerformanceTracker
6
      tagName="MyScreen"
7
      onTrackingEnd={(event) => {
8
        // 'Draw Timestamp:', event.nativeEvent.drawTime
9
        // 'Render Timestamp:', event.nativeEvent.renderTime
10
      }}
11
    >
12
      {/* Screen content */}
13
    </PerformanceTracker>
14
  );
15
};

Key Parameters

• tagName: A unique identifier for the screen or component..
• isEnabled: Enable or disable performance tracking.
• onTrackingEnd: A callback function that provides draw and render times.

Props

Required Props

tagName

A unique identifier for the screen or component being tracked.

• Type: string

Optional Props

isEnabled

Enables or disables performance tracking.

• Type: boolean
• Default: true

eventTimeStamp

The timestamp for when the event is triggered.

• Type: number
• Default: Date.now()

onTrackingEnd

Callback triggered after the screen has finished rendering. The callback receives an object with the following properties:

• tagName: The tag name of the tracked component.
• drawTime: Timestamp when the component is drawn.
• renderTime: The time taken to render the component.

meta

Additional data to pass to the tracker for customization.

• Type: Record<string, string>