Benchmarks

Performance tests and comparisons.

Native

In this benchmark  Tamagui is within 10% of the speed of vanilla React Native, even when using nearly all of it's features. We render list of 28 items with a few sections, text and images. Average of 5 runs on a Apple M2 Air:

Tamagui

108ms

Native

106ms

NativeBase

247ms

Running Tamagui without the compiler averages 125ms or ~12% slower. Note that the compiler is much more effective on the web as it turns many more props into CSS and both bundle size and render performance are more important.

Web

We forked and ran a few mico benchmarks  on web.

Simple component

Timing rendering a simple custom component.

Tamagui

0.018ms

Native

0.057ms

NativeBase

0.67ms

Dripsy

0.042ms

Updating variants

Changing variants is fast at runtime, and even faster when compiled:

Tamagui

0.02ms

Native

0.063ms

NativeBase

0.73ms

Dripsy

0.108ms

Since styled-components and Emotion don't offer a first-class variant API, this was done via prop interpolation.

Updating inline styles

Tamagui has a big advantage for inline styles, it's the only library to compile them and flatten the tree.

Tamagui

0.025ms

Native

0.06ms

NativeBase

0.8ms

Dripsy

0.266ms

wwwwwwwwwwwwwwwwwww

Dynamic styles (no compilation)

React Native compatible components are far more feature-rich than web-only, and these next two tests show a really extreme case where nothing can be optimized. We left them in to be up-front, but don't think they represent anywhere near a common use case.

Tamagui

31ms

Dripsy

57.5ms

  • NativeBase - couldn't get running

Note: This test was taken from the styled-components benchmarks .

Mounting deep tree

In this test, we mount a tree with many nested nodes.

Tamagui

18.61ms

Dripsy

44.43ms

  • NativeBase - couldn't get running

Note: This test was taken from the styled-components benchmarks .

Summary

Tamagui greatly increases render performance and even beats most of the fastest web-only style libraries.