Skip to main content

React Native

Palette supports React Native behind a closed beta.

Install​

npm install @palette.dev/react-native

Initialization​

import { init, network, markers, paint, profiler } from "@palette.dev/react-native";

init({
  key: "<YOUR CLIENT KEY>",
  plugins: [network(), markers(), paint(), profiler()],
  version: process.env.MY_APP_VERSION,
});

// Start the profiler on the following events:
const handleTask = () => {
  profiler.start();
  performance.mark("myTaskStart");
  someExpensiveWork();
  performance.measure("myTaskEnd", "myTaskStart");
  profiler.stop();
};

Mobile Performance Metrics​

Interaction Metrics​

  • Keypress to Paint: The time from a user keypress event to os paint.
  • Scroll to Paint: The time from a user scroll event to os paint.
  • Touch to Paint: The time from a user touch event to os paint.
  • Drag to Paint: The time from a user drag event to os paint.
  • Component Interaction to Paint: React Component interaction to os paint.

Load Timings​

  • Warm Start Load
  • Cold Start Load
  • Time to Interactive (TTI): The time from the app launch to the first paint.

Custom Measurements​

The Palette React Native API provides an implementation of the Performance Web API, allowing you to measure the duration of operations in your app with a familiar and performant API:

App.js
import { performance } from "@palette.dev/react-native";

const App = (props) => {
  performance.mark("my-query.start");
  await db.query("select * from some_table where id = 1");
  performance.measure("my-query.total", "my-query.start", {
    myCustomerId: "u-123",
    myCompany: "acme-123",
  }); // Tag some additional metadata

  // ...
};

Source Maps​

Upload source maps after building the release mode of your app:

PALETTE_ASSET_KEY=... palette upload android/app/build/generated/assets/react/release --version $MY_APP_VERSION

Performance Overhead​

  • JSI: The module completely avoids the JavaScript bridge and communicates directly with the native code.
  • Turbo Module Support: The module is built using Turbo Modules, allowing faster and lazy loading.
© 2025 Redraw, Inc.