弊社のReact Nativeベースのアプリ開発に利用していた「Native Base」が開発を終了しました。同じチームが後継として「glustack-ui」をリリースしたのですが、せっかくなので今あるUIライブラリを整理して次のプランを検討してみました。
現在アクティブに開発されているUI実装用パッケージの調査
ExpoがUIライブラリのリストをメンテしていて参考になります。
以下の観点を中心に調べています:
- スタイリングAPI
- ヘッドレス構成: UIの状態管理とスタイリングが分かれているかどうか
- Web対応
- パフォーマンスベンチマーク
フルスタックのUIライブラリ
| 名前 | スタイリングAPI | ヘッドレス | Web対応 | パフォーマンス |
|---|---|---|---|---|
| TAMAGUI | styled-system | ◯ | ◯ | リンク |
| gluestack-ui | styled-system / TailWind | ◯ | ◯ | リンク |
| React Native Paper | StyleSheet | ◯ | - | |
| RNUILib | 独自 | ◯ | ? | - |
| React Native Reusables | TailWind | ◯ | ◯ | - |
TAMAGUI
gluestack-ui
React Native Paper
RNUILib
React Native Reusables
※その他、MSのFluent UIのReact Native実装、React Native Elements、React Native UI Kittenなど多数ありますが、アルファ版や最近の更新がないものは除外しています。
UnstyledなUIライブラリ
(2024.7.20追記)
- rn-primitives
- gluestack-ui ※スタイリングなしのUIコンポーネントを提供している
スタイリング・ライブラリ
フルスタックのライブラリは便利な半面依存が大きくなり、NativeBaseのように開発が終了した場合の変更の工数が大きくなるリスクがあります。
最近では、React AriaのようなヘッドレスUIコンポーネントも多数あることから、スタイリング・ライブラリと組み合わせて導入することも検討します。
| 名前 | スタイリングAPI | Web対応 | パフォーマンス |
|---|---|---|---|
| Shopify Restyle | styled-system | ◯ | |
| Native Wind | Tailwind | ◯ | |
| React Native Unistyles | StyleSheet | ◯ | |
| Fast Style | StyleSheet | ◯ |
Shopify Restyle
Native Wind
React Native Unistyles
参考になりそうなリンク
How much of a performance hit does an app take by using style libraries like NativeWind or Tamagui? : r/reactnative
efstathiosntonas/react-native-style-libraries-benchmark
Discussion