Run small latency experiments in React Native and visualize the result directly
in your app. react-native-latency measures a callback over repeated runs and
shows a density chart plus min, median, 95th percentile, max, and initial-run timings.
- ⚡ Zero runtime dependencies
- ⚛️ Works with React Native
>=0.73.0
npm install react-native-latencybun add react-native-latencyimport { Benchmark } from 'react-native-latency';
export function Example() {
return (
<Benchmark
deviceLabel="Apple: iPhone 17 Pro"
callback={async () => {
await expensiveOperation();
}}
/>
);
}The callback can also be synchronous:
<Benchmark
callback={() => {
expensiveOperation();
}}
/>For meaningful numbers, run benchmarks in a production build or in a non-development build. Development mode adds React Native and tooling overhead that can dominate short-running callbacks.
If you use Expo development builds, start Metro without development mode and with minification:
npx expo start --dev-client --no-dev --minifyOn Android, these flags have to be set manually in the developer menu (shake device -> Settings).
| Prop | Type | Required | Description |
|---|---|---|---|
callback |
() => void | Promise<void> |
Yes | Function to benchmark. Async callbacks are awaited and measured end to end. |
deviceLabel |
string |
No | Label shown below the benchmark. If omitted, a best-effort label is derived from React Native Platform constants. |
On iOS, React Native's built-in Platform constants do not expose marketing
device names such as iPhone 17 Pro; pass deviceLabel if you want to show one.
{
"react": ">=18.2.0",
"react-native": ">=0.73.0"
}- Allow for more benchmark examples to be added
- Optional break between runs, e.g. to let requests finish
- Make smoothing more stable (e.g. autoadjust bandwith parameter)
MIT
Made with create-react-native-library