Skip to main content

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:

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

const MyScreen = () => {
  return (
    <PerformanceTracker
      tagName="MyScreen"
      onTrackingEnd={(event) => {
        // 'Draw Timestamp:', event.nativeEvent.drawTime
        // 'Render Timestamp:', event.nativeEvent.renderTime
      }}
    >
      {/* Screen content */}
    </PerformanceTracker>
  );
};
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>
logAll Android Only​

When true, logs every draw call. When false, logs only the first draw.

  • Type: boolean
  • Default: false