Original reproducer was created by @tj-mc: https://github.com/tj-mc/styled-components-native-perf-reproducer
This is an Expo SDK 49 App reproducer to demonstrate the performance difference between popular style libraries and react-native built-in styling.
Tests include React Native StyleSheet
, Styled Components
, Tamagui
, NativeWind
, Emotion
, Zephyr
, Dripsy
, Gluestack
and Shopify restyle
Feel free to fork or PR this repo with improvements or to include other styling libraries.
Note: Tamagui
scores are surprisingly low, I've created a discussion about it
1000 items are rendered in Array.map
to simulate the complexity of a real app.
Read this comment on how to test the performance: styled-components/styled-components#3940 (comment)
Mac Specs:
Mac Studio M1 Ultra 1TB SSD 64GB RAM
Simulator: iPhone 13, iOS 16.4
1 | 2 | 3 | 4 | 5 | 6 | Avg | % Slowdown | |
---|---|---|---|---|---|---|---|---|
Native | 140.1 | 135.6 | 137.5 | 142.1 | 137.2 | 131.3 | 137.6 | 0 |
Restyle | 186.8 | 162.3 | 185.2 | 184.4 | 186.6 | 184.2 | 182.5 | 32.63% |
Zephyr | 198.4 | 200.2 | 203.6 | 200.7 | 195.8 | 202.5 | 200.2 | 45.47% |
Styled v6 | 227.7 | 226.7 | 229 | 226 | 224 | 225.9 | 226.7 | 64.86% |
Emotion | 280.1 | 281.7 | 277.5 | 282 | 278.2 | 285 | 280.9 | 104.8% |
NativeWind | 291.3 | 289 | 295.6 | 293.9 | 292.6 | 294 | 292.9 | 112.3% |
Tamagui | 310 | 318 | 310 | 305 | 324 | 313 | 314.33 | 128.57% |
Dripsy | 661.5 | 651.3 | 665.1 | 661.4 | 653.6 | 673.7 | 661.1 | 380.53% |
Gluestack | 793 | 789 | 815 | 815 | 783 | 779 | 798.83 | 480.24% |
- Start the profiler by pressing Shift + M and open React Dev Tools.
- Open profiler and hit record
- Press the toggle button and stop recording
- Record the time to render App.ts
- Average the result across at least 3 runs