Skip to content
Marco Logo Marco Logo Marco

Screen Load Time Tracking

Overview

This guide demonstrates how to track and measure screen load time in your React Native application using Marco. You’ll learn how to:

  • Track navigation start time
  • Measure screen load completion
  • Generate and visualize performance reports
  • Automate testing with Maestro

Implementation Steps

1. Setting Up the Screens

First, let’s create two basic screens - Home and Details - that we’ll use to demonstrate screen load tracking:

import { View, Button } from 'react-native';


// Home Screen
const HomeScreen = ({ navigation }) => {
8 collapsed lines
  return (
    <View>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};


// Details Screen
const DetailsScreen = () => {
5 collapsed lines
  return (
    <View>
      <Text>Details Screen</Text>
    </View>
  );
};

2. Implementing Performance Tracking

Now, let’s enhance our screens with Marco’s performance tracking capabilities:

Home Screen Implementation

HomeScreen.tsx
import { PerformanceTracker } from '@d11/marco';


// Configure Marco to persist performance data
PerformanceTracker.configure({
  persistToFile: true,
});


const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Button
        title="Go to Details"
        onPress={() => {
          // Track when navigation starts
          PerformanceTracker.track('Navigation_Started', Date.now());
          navigation.navigate('Details');
        }}
      />
    </View>
  );
};

Details Screen Implementation

DetailsScreen.tsx
import { PerformanceTracker } from '@d11/marco';


const DetailsScreen = () => {
  return (
    <PerformanceTracker
      tagName="Details_Screen_Loaded"
      onTrackingEnd={(event) => {
        // Access performance metrics
        console.log('Draw Time:', event.nativeEvent.drawTime);
        console.log('Render Time:', event.nativeEvent.renderTime);
      }}
    >
      <View>
        <Text>Details Screen</Text>
      </View>
    </PerformanceTracker>
  );
};

3. Automated Testing with Maestro

Create a Maestro test file to automate the screen load time measurement:

test.yaml
appId: com.example.app # Replace with your app's ID


---
- launchApp:
    clearState: true
- repeat:
    times: 2
    commands:
      - tapOn: 'Go to Details'
      - assertVisible: 'Details Screen'

4. Configuration Setup

Create a marco.config.js file in your project root to configure performance data collection:

marco.config.js
module.exports = {
  android: {
    packageName: 'com.example.app',
    outputPath: './marco-reports/android',
    dataDir: [
      {
        path: './marco-reports/android/log.json',
        reportName: 'AndroidReport1',
      },
    ],
    port: '8080',
  },
  ios: {
    packageName: 'com.example.app',
    outputPath: './marco-reports/ios',
    dataDir: [
      {
        path: './marco-reports/ios/log.json',
        reportName: 'iosReport1',
      },
    ],
    port: '8080',
  },
};

5. Generating Performance Reports

Run the following command to collect performance data:

yarn marco generate --platform android

This will generate a JSON report at ./navigation-reports/android/log.json with the following structure:

[
  {
    "tagName": "Navigation_Started",
    "timestamp": 1733301898369
  },
  {
    "tagName": "Details_Screen_Loaded",
    "timestamp": 1733301898878
  }
]

6. Visualizing Performance Data

To view your performance data in an interactive dashboard:

yarn marco visualize --platform android

The dashboard will be available at http://localhost:8080 (or your configured port) and provides:

  • Timeline view of all tracked events
  • Performance metrics visualization
  • Comparison across multiple test runs
  • Detailed analysis of screen load times

Next Steps