【React Native】Elementsを使ってみよう！

この記事の内容

1. React Native Elementsとは？
2. React Native ElementsのComponentを使ってみよう！
• 環境構築
• 実際に使ってみよう！
• ヘッダーについて
3. ThemeProvider
• 色変更
• ボタン変更
4. containerStyle
5. 印象と結論
6. 参考

React Native Elementsとは？

React Native ElementsはオープンソースのReact NativeのためのUIライブラリです。

近年人気が高まってきており、簡単にスタイルを作ることが出来るライブラリの一つです。

React Native Elementsはモバイルアプリ開発だけではなく、webアプリ開発でも使えます。

下記グラフはnpmでのReact Native Elementsをダウンロード数です。ユーザはまだ増えています（現象傾向にある箇所は年末休みの時期でした）。

※ソース：　https://npmcharts.com/compare/react-native-elements?interval=7

React Native ElementsのComponentを使ってみよう！

環境構築

React Native Elementsは下記コマンドでインストールできます。

npmを使う場合：　npm install react-native-elements
yarnを使う場合：　yarn add react-native-elements

React Nativeの環境構築についてはこちらの記事を参考にしてください。Snackで使ってみましたが、アイコンがレンダーされていなかったです。そのため、expo cliなどのローカル環境はオススメです。

webアプリケーション開発で使いたい場合は他の設定が必要ですが、今回はモバイルを作成します。ウェブの設定はドキュメンテーションに記載があるので参考にしてください。

実際に使ってみよう！

React Native Elementsは色々なComponentがあります。この記事ではHeaderとButtonを紹介します。ドキュメンテーションはこちらから確認できます。

Headerはアプリのバンナーとして一番上に表示するためのComponentです。ハンバーガーボタンなどのナビゲーションを入れるのが一般的な使い方です。

Buttonはボタンを表示するComponentですが、普通のReact NativeのButtonよりpropsが多いです。

下記コードと画像はHeaderとButtonを2つ表示したものです。

import React from 'react';
import { Header, Button } from 'react-native-elements';

export default function App() {
  return (
    <>
      <Header
        leftComponent={{ icon: 'menu', color: '#fff' }}
        centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
        rightComponent={{ icon: 'home', color: '#fff' }}
      />
      <Button title="Button1" />
      <Button title="Button2" />
    </>
  );
};

ヘッダーについて

HeaderのleftComponent、centerComponent、rightComponentは左、中央、右の部分のことです。それぞれtextかiconかReact 要素/Componentです。具体的には下記の形です。

※ソース：　ドキュメンテーション

ThemeProvider

色変更

React Native ElementsのComponentは全て同じテーマを使っています。

このテーマはデフォルトの値がありますが、ThemeProviderというComponentでデフォルトを上書きすることができます。

例えば、下記のコードのようにcolorsのprimaryを指定したらHeaderとButtonの色を変えることができます。

import React from 'react';
import { ThemeProvider, Header, Button } from 'react-native-elements';

const theme = {
  colors: {
    primary: '#9fc0d1',
  },
};

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Header
        leftComponent={{ icon: 'menu', color: '#fff' }}
        centerComponent={{ text: 'MY TITLE', style: { color: '#fff' } }}
        rightComponent={{ icon: 'home', color: '#fff' }}
      />
      <Button title="Button1" />
      <Button title="Button2" />
    </ThemeProvider>
  );
};

ボタン変更

テーマの色だけではなく、他も変えてみます。まずはテーマにボタンのpropsを追加しましょう。

const theme = {
  Button: {
    containerStyle: {
      margin: 10,
    },
    raised: true,
  },
  colors: {
    primary: '#9fc0d1',
  },
};

themeオブジェクトのButtonのプロパティはButtonのComponentのpropsになります。この例の場合は下記と同じです。

<Button title="Button1" containerStyle={{ margin: 10 }} raised />

React Nativeは同じprop値を繰り返して使いたい時は、多くはカスタムComponentを作りますが、React Native Elementsはthemeオブジェクトを作るだけで実現出来ます。

raisedのpropsはボタンが浮き出たようになります。下の画像のようになります。

containerStyle

全てのReact Native ElementsのComponentはコンテナがあります。このコンテナはReact Nativeの<View>です。この<View>のスタイルをカスタマイズしたい時には上の例のようにcontainerStyleを代入します。

印象と結論

UIとデザインを作る時、ゼロから作るはかなり時間がかかるのでライブラリを使うことが多いです。React Native ElementsのThemeProviderは使いやすいので、今後大きなプロジェクトでも使ってみたいと思います。他のライブラリもあるので興味があれば見てください。

NativeBase

UI Kitten

React Native Paper

参考

React Native Elements ホームページ

npmcharts

(記事) 10 Awesome React Native UI Component Libraries You Should Know

(記事) 15 React Native Component Libraries You Should Know in 2020