はじめに
React Nativeではモダンデザインを気軽に実現できるUIコンポーネントが数多く公開されています。
デザイナーのいないスタートアップや個人開発ではUIコンポーネントを積極的に利用するとアプリの質がグンと上がります。また、デザインに割く時間を短縮できて一石二鳥です。2020年現在、ReactNativeでイケてるUIを実現できるコンポーネントを５つ紹介しようと思います!
NativeBase
NativeBaseはオープンソースとして公開されているUIコンポーネントです。GitHubでは13,000以上のスターを獲得してます。無料で使用もできますが、有料のテンプレートもあり、より質も高いテンプレートを購入することができます。また、Webユーザーも利用できるようになりました。同じJavaScriptコードベースを使用し、AndroidおよびiOS向けのプラットフォーム固有のデザインを使用して、ネイテブアプリのようなUIを実現できます。無料版では、スターターアプリ、Twitterクローンアプリ、ToDoアプリ、チュートリアルアプリなどが含まれます。有料テンプレートには予約、レンタル、求人情報、メッセージングなどが含まれているようです。
Material Kit React Native
Material Kit React Nativeは、Googleの提唱しているマテリアルデザインを備えた無料のUIコンポーネントです。一般的なコンポーネントを使いやすく再設計しているとのこと。無料版でも、ボタン、カード、ナビゲーション、入力などの200以上のコンポーネントが含まれています。テーマの変更も可能で色のバリエーションを取り入れることができます。有料のProバージョンも提供されています。ProのLPはモダンなデザインで一見の価値ありだと思います。
React Native Elements
React Native Elementsはクロスプラットフォームの無料のUIコンポーネントです。開発者が作成した多数の優れたコンポーネントが1か所にまとまっています。GitHubでは17,000個以上のスターを獲得しています。ReactNativeのチュートリアル等でもよくみかけ、非常に有名なコンポーネントです。パッケージには、価格設定、バッジ、オーバーレイ、仕切り、プラットフォーム固有の検索バーなどのコンポーネントが含まれています。各々使いやすいデザインでカスタマイズも可能です。
Lottie
モバイル向けのAirbnbが開発したアプリにアニメーションを簡単に追加できるアニメーション用の無料ライブラリです。GitHubでは12,000以上のスターを獲得しています。アニメーションファイルはサイズが小さく、アプリのパフォーマンスに影響を与えず実装できます。アニメーションを使うことでより視覚的に訴えることすることができます。
UI Kitten
こちらもクロスプラットフォームのモバイルアプリ向けの無料UIコンポーネントです。GitHubで5,000以上のスターがついています。コンポーネントのソースコードを変更せずに、テーマを使用したり、独自のテーマをいくつでも作成したりできます。さらに、ページをリロードすることなく、暗いテーマと明るいテーマなど、テーマを切り替えることができます。npmを用いてパッケージをインストールするだけで簡単に使用を開始できます。デモのモバイルアプリを配信してくれているのでどんなコンポーネントがあるのかアプリを通して確認できます。
おわりに
今回５つのコンポーネントを紹介しました。どれも無料で使えて、役に立つコンポーネントです。
イケてるコンポーネントを使ってモダンなデザインのアプリを作りましょう！！！