React Nativeは素のままではデザインが当てられておらず、基本的にUIフレームワークを使って開発を行います。その際、既存の様々なUIフレームワークから検討して導入しなければなりません。
各フレームワークにはデザインコンセプトの違いなどがあります。今回はまず、どういったUIフレームワークがあるのか、まとめて紹介します。
- React Native Elements
- React Native Paper
- NativeBase
- UI Kitten
- React Native Material Kit
- Teaset
- React Native Material UI
- RNUILib
- Nachos UI Kit
- Galio Framework
- まとめ
React Native Elements
アバター、バッジ、カード、リスト、レーティング、タブなど様々なコンポーネントを提供しています。GitHubでのスター数は2.1万を超えています。
React Native Elements | React Native Elements
React Native Paper
筆者は一番よく使っているUIライブラリです。必要なものは大抵そろっているイメージがあります。GitHubのスター数は8,700と、React Native Elementsには劣るようです。
NativeBase
モバイルファーストですが、デスクトップ向けも対象としたUIライブラリです。テーマによるカスタマイズも容易です。GitHubのスター数は1.6万です。
NativeBase: Mobile-first, accessible components for React Native
UI Kitten
デザインシステムベース、MVPから最終リリースまで利用できるUIライブラリです。GitHubのスター数8,800となっています。
UI Kitten - React Native UI Library based on Eva Design System
React Native Material Kit
マテリアルデザインに特化しているので、おそらくAndroidアプリに向いているでしょう(iOS向けにも使えない訳ではありません)。GitHubのスター数は4,800となっています。
Teaset
20以上のリストを中心としたコンポーネントを提供しています。2020年10月が最終更新なので、ちょっと使いづらいかも知れません。
React Native Material UI
こちらもマテリアルデザインに特化したUIライブラリです。GitHubのスター数は3,700となっています。
xotahal/react-native-material-ui: Highly customizable material design components for React Native
RNUILib
60以上のコンポーネントを提供しています。Wixが開発元とのことです。GitHubのスター数は3,900程度ですが、今後使われるケースが増えるかも知れません。
Nachos UI Kit
30以上のコンポーネントを提供しています。AvocodeというクラウドのWebエディタを提供する企業が開発しています。GitHubのスター数は2,000となっています。
Nachos UI Kit for React Native | Avocode
Galio Framework
約14のコンポーネントを提供しています。プレミアムテーマを別途販売しており、そちらを使うことでより多機能にできるようです。GitHubのスター数は2,800となっています。
Galio Framework - Build better apps using react native @ galio
まとめ
GitHubでの人気を見るとReact Native Elementsが最もスター数が多いようです。しかし、企業などもUIフレームワークを提供するようになっており、より力を入れてくる可能性があります。適宜情報をチェックした方が良さそうです。
NCMBではコミュニティSDKとしてReact Native SDKを提供しています(公式サポート対象外)。React Nativeでアプリ開発を行う際に、ぜひNCMBを組み込んでみてください。