Marco - Performance Benchmarking for React Native

See Marco in Action

Marco Dashboard

Track Performance

Wrap your React Native screens with <PerformanceTracker /> to automatically measure render and draw times.

Generate Reports

Use the CLI to fetch performance data from your device and generate detailed JSON reports.

yarn marco generate --platform android

Visualize & Optimize

Launch the interactive dashboard to visualize timelines, compare iterations, and identify performance bottlenecks.

yarn marco visualize --platform android

Powerful Features

Everything you need to track and optimize performance

🎯 Precise Tracking

Measure exact render and draw times for screens and components. Track the moment content becomes visible to users.

⚡ Lightning Fast

Minimal overhead ensures tracking doesn't impact app performance. Optimized for production environments.

📱 Cross-Platform

Seamless support for React-Native, iOS and Android with native implementations. Consistent API across both platforms.

🔧 Custom Markers

Place custom performance markers anywhere in your app. Track business-critical events and user interactions.

📊 Visual Dashboard

Interactive dashboard to visualize performance data. Compare metrics across multiple test runs.

🚀 Easy Integration

Get started in minutes with simple setup. Works with new and old React Native architecture.

Simple & Intuitive API

Wrap your components with <PerformanceTracker /> and start measuring. No complex setup required.

✓ Track render and draw times automatically
✓ Add custom performance markers
✓ Export and visualize data
✓ Works with any React Native app

App.tsx

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

// Configure once
PerformanceTracker.configure({
  persistToFile: true
});

// Wrap your screen
const MyScreen = () => (
  <PerformanceTracker tagName="HomeScreen">
    {/* Your content */}
  </PerformanceTracker>
);

// Add custom markers
PerformanceTracker.track(
  'API_Call_Complete',
  Date.now()
);

Built with Marco

Real-world applications using Marco for performance tracking and optimization

React Native Benchmark

Visit Site →

A comprehensive benchmarking tool for React Native applications that helps developers compare performance across different architectures and configurations.

https://reactnativebenchmark.dev/

✓ Performance comparison across RN architectures
✓ Real-world benchmarks for common UI patterns
✓ Interactive dashboard for analyzing results

React Navigation Benchmark

Visit Site →

A specialized benchmarking tool focused on measuring and optimizing React Navigation performance in React Native applications.

https://ds-horizon.github.io/react-navigation-benchmark/

✓ Navigation-specific performance metrics
✓ Screen transition timing analysis
✓ Stack, Tab, and Drawer navigator benchmarks

React Native Tabs Benchmark

Visit Site →

Performance benchmarking for different tab implementations in React Native, helping developers choose the best tab solution for their apps.

https://ds-horizon.github.io/rn-tabs-benchmarks/

✓ Comprehensive comparison of tab libraries
✓ Performance metrics for tab switching
✓ Data-driven recommendations

Gorhom Bottom Sheet Benchmark

Visit Site →

Benchmarking tool for evaluating the performance of @gorhom/bottom-sheet, a popular React Native bottom sheet component.

https://ds-horizon.github.io/GorhomBottomSheetBenchmark/

✓ Bottom sheet animation performance metrics
✓ Gesture handling and interaction timing
✓ Optimization recommendations

Building something awesome with Marco?

Share on GitHub Join Discord View All Projects