こちらの記事はReact Native Advent Calendar 2025の25日目の記事です。
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！
昨年、React Nativeのスタイリングについてこちらの記事を書きました。
また、テラードラマではTamaguiを採用してスタイリングを行っています。
これらの記事をきっかけに「TamaguiやNativeWindがおすすめですか?」と聞かれることが増えました。
Tamaguiをプロダクション環境で1年ほど運用してきた今、改めて振り返り、今選ぶならどうするかを考えてみます。
Tamaguiを1年使ってみて
Tamaguiはネイティブだけではなく、Webでも優れたパフォーマンスを得ることが出来るスタイリングライブラリです。
またUIコンポーネントも提供されており、こちらを使うことで高速にパフォーマンスの良いアプリをつくることができます。
良かった点
これまでWebではChakraUI、React NativeではNativeBaseを使っていた経緯があり、Tamaguiは同様のAPI設計だったため、スムーズに移行できました。
特に以下の点で優れていると感じています:
- レスポンシブ対応: ブレークポイントベースのスタイリングが直感的
-
プラットフォーム別スタイル:
$platform-webや$platform-nativeなどで、プラットフォームごとの調整が簡単 - Webパフォーマンス: 静的CSSの抽出により、Webでのパフォーマンスが優れている
- 慣れたAPI: ChakraUI/NativeBaseと書き方が変わらず、学習コストがほぼゼロ
また、多くのコンポーネントがTamaguiで提供されているため、それらを組み合わせることで画面を素早く作ることができました。
気になる点
ただし、最近は以下のような懸念も出てきています:
- 挙動の不安定性: Sheetコンポーネントがバージョンやプラットフォームによって挙動が変わり、調整が必要なケースがある
- 開発の停滞感: 大きなアップデートが減り、Expoの新バージョンへの対応に2ヶ月ほどかかっている
- コンポーネントライブラリの必要性: 開発初期は多くのコンポーネントを試しましたが、結局使っているのは Dialog、Sheet、Button、XStack/YStack/ZStack など限られたコンポーネントのみで、大規模なコンポーネントライブラリとしての恩恵は長期的には限定的
NativeとWebの両対応、そして最近のAI Agentとの開発も考えると、TailwindCSSベースの選択肢も検討する価値があると感じています。
StyleSheet APIを再評価
React Native標準のStyleSheet APIが、実は最も運用コストが低いのではないかと考えるようになりました。
StyleSheet APIの利点
- シンプルで安定: 他のライブラリに依存しない
- アップグレードが容易: React Nativeのバージョンアップ時の影響が最小限
- 拡張性: プロジェクト内でユーティリティを作ることでスタイルガイドやレスポンシブ対応も可能
BlueskyのApplication Layout System (ALS)のように、StyleSheet APIをベースにしてスタイルのUtilityを作ることで、他ライブラリに依存がないUtility Firstなスタイリングを行うことができます。
複数のテーマやWeb対応への対処
StyleSheet APIと同じようなAPIを提供するreact-native-unistylesを使う選択肢もあります。
こちらは複数のテーマ機能やWebのレンダリング、variantでのスタイルの変更など、標準のStyleSheet APIを拡張する機能が多く追加されており、パフォーマンスも優れています。
Unistylesを導入すべきかは、こちらのWhen to use Unistylesが参考になります。
Tailwind系を使う場合
WebでTailwindCSSに慣れている方や、NativeとWebの両方に対応したい場合は、以下が候補になります。
- Nativewind: 実績豊富
- Uniwind: セットアップが簡単で、パフォーマンスも良好。TailwindCSS v4系をサポート
個人的には現時点では導入のしやすさやパフォーマンス面などを考えてUniwindを推します。
ただし、Expo自体がTailwindをサポートする計画があるようです。
将来的にベストな選択肢は変わる可能性があります。
スタイリング方法の選び方
判断フローをまとめました。
まとめ
弊社では NativeBase や Tamagui を利用してきましたが、長期運用ではサードパーティライブラリの対応コストが無視できないという実感があります。
現時点での私の考えは以下の通りです。
- モバイルアプリのみなら: React Native標準のStyleSheet APIを検討する
- 機能や要件によって: 必要に応じて他の選択肢を検討
まずはStyleSheet APIから始め、必要な機能やプロジェクトのWebプラットフォームの対応によってそれ以外の選択肢を検討するのが良いのではないかと思います。
それで、よいReact Nativeライフを！
おまけ: UIフレームワークの導入と剥がしやすさを考える
自分がUIフレームワークを利用する際、最悪剥がして開発を継続できること考えます。
例えばTamaguiから他のものへの移行を考えたとき次のように移行しようと思います。
- TamaguiのXStack、YStackと同じInterfaceを持つUtilityコンポーネントをつくる
- これによって、既存の書き換え作業を減らすことが出来る
- jscodeshiftなどのcodemodで一括で書き換えしやすい
- StorybookでUIをテスト可能にしておく
- VRTで移行前と移行後の表示のズレがなかったり、Interactionテストで振る舞いが変わらないことを確認しやすい
このような感じで取り組んでおくと、将来的に何かあってもなんとかなるんじゃないかなと考えています。
Discussion