react-native-style-libraries-benchmark - GitLite

KO | EN

gitlite — search

#javascript #typescript #llm #golang #go #deep-learning #linux #nodejs #awesome #cli #kubernetes #vue #pytorch #open-source

react-native-style-libraries-benchmark

(★ 481)

No description available.

파일 탐색기

최종 버전 다운로드 (.zip)

- .gitignore
- git_toolbox_prj.xml
- GitLink.xml
- i18nSettings.xml
- misc.xml
- modules.xml
- prettier.xml
- styled-components-native-perf-reproducer.iml
- vcs.xml
- adaptive-icon.png
- demo.png
- demo_1.mp4
- demo_2.mp4
- favicon.png
- graph.png
- icon.png
- splash.png
- Dripsy.js
- EmotionNative.js
- FastStyles.js
- NativeWind.js
- ReactNative.js
- Restyle.js
- StyledComponents.js
- Tamagui.js
- TimedRender.js
- Twrnc.js
- Unistyles.js
- VStyles.js
- Zephyr.js
- - AppDelegate.h
  - AppDelegate.mm
  - Info.plist
  - main.m
  - noop-file.swift
  - PrivacyInfo.xcprivacy
  - SplashScreen.storyboard
  - StyleLibrariesBenchmark-Bridging-Header.h
  - StyleLibrariesBenchmark.entitlements
- - project.pbxproj
- - contents.xcworkspacedata
- .gitignore
- .xcode.env
- Podfile
- Podfile.lock
- Podfile.properties.json
- global.css
- v-styles.js
- zephyr-styles.js
- restyle-theme.js
- unistyles-theme.js
.gitignore
.npmrc
App.js
app.json
babel.config.js
index.js
metro.config.js
nativewind-env.d.ts
package.json
pnpm-lock.yaml
README.md
restyle-theme.js
tailwind.config.js
tamagui.config.js
utils.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/efstathiosntonas/react-native-style-libraries-benchmark

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-native-style-libraries-benchmark

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Native Style Libraries Benchmark

Original reproducer was created by @tj-mc: https://github.com/tj-mc/styled-components-native-perf-reproducer

This is an Expo SDK 52 App reproducer to demonstrate the performance difference between popular style libraries and react-native built-in styling.

Tests include React Native [StyleSheet](https://reactnative.dev/docs/stylesheet), [Styled Components](https://github.com/styled-components/styled-components), [Tamagui](https://github.com/tamagui/tamagui), [NativeWind](https://github.com/marklawlor/nativewind), [Emotion](https://github.com/emotion-js/emotion), [Zephyr](https://github.com/FormidableLabs/react-native-zephyr), [Dripsy](https://github.com/nandorojo/dripsy), [fast-styles](https://github.com/fedemartinm/fast-styles), [Tailwind React Native Classnames(twrnc)](https://github.com/jaredh159/tailwind-react-native-classnames), Shopify's [restyle](https://github.com/Shopify/restyle) and [react-native-unistyles](https://github.com/jpudysz/react-native-unistyles)

Feel free to fork or PR this repo with improvements or to include other styling libraries.

### ***Note: Test scores may vary between different machines with different hardware***

> `Restyle` scores are remarkably impressive, `tamagui`, `react-native-unistyles` and `nativewind` shows great performance compared to `Native StyleSheet`.

250 items are rendered in `Array.map` and it's a **basic** test in DEV mode. When more features of each library are added (eg. media queries etc) as your project grows the measurements may vary by a lot.

Read this comment on how to test the performance: https://github.com/styled-components/styled-components/issues/3940#issuecomment-1630244738

![demo.png](https://raw.githubusercontent.com/efstathiosntonas/react-native-style-libraries-benchmark/main/assets/demo.png)

Demo video with `npx expo start -c --no-dev --minify`:

https://github.com/user-attachments/assets/32a09a21-bd69-49fe-9a0f-9bf8d82405a1

Here's another video demonstrating the performance difference and on press toggle.

https://github.com/user-attachments/assets/8007fa50-0bcc-454b-8fc4-66fe8ce032f6

## Results - Rendering Time for 250 Views (ms) in `npx expo start --no-dev --minify` (after every run metro is shut down, always start fresh):

Mac Specs:
MacBook Pro 13-inch, Intel Core i7, 256GB SSD 16GB RAM\
Simulator: iPhone 11, iOS 18.1

|UI           | 1   | 2   | 3   | 4   | 5   | 6   | Avg    | % Slowdown |
|-------------|-----|-----|-----|-----|-----|-----|--------|------------|
| Native      | 696 | 738 | 711 | 712 | 726 | 684 | 711.27 | 0.00%      |
| Restyle     | 612 | 622 | 654 | 621 | 621 | 623 | 625.50 | -12.05%    |
| Emotion     | 661 | 657 | 659 | 660 | 661 | 685 | 663.83 | -6.66%     |
| Tamagui     | 667 | 666 | 753 | 647 | 648 | 701 | 680.33 | -4.34%     |
| Styled v6   | 772 | 709 | 616 | 614 | 647 | 725 | 680.50 | -4.31%     |
| Unistyles   | 668 | 698 | 693 | 691 | 712 | 722 | 697.33 | -1.96%     |
| NativeWind  | 734 | 672 | 699 | 677 | 706 | 743 | 705.17 | -0.84%     |
| fast-styles | 725 | 705 | 706 | 730 | 715 | 683 | 710.67 | -0.07%     |
| twrnc       | 659 | 763 | 745 | 776 | 693 | 735 | 728.50 | 2.44%      |
| Zephyr      | 743 | 747 | 739 | 713 | 749 | 701 | 732.00 | 2.93%      |
| Dripsy      | 774 | 804 | 740 | 875 | 781 | 819 | 798.83 | 12.33%     |

# Reproduction Steps

1. Start the profiler by pressing Shift + M and open React Dev Tools.
2. Open profiler and hit record
3. Press the toggle button and stop recording
4. Record the time to render App.ts
5. Average the result across at least 3 runs