浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】マテリアルデザインコンポーネントを実装できるライブラリ「React Native Paper」

React Native の UI キットツールは、React Native Elements をよく使っていたのですが、これだけでは足りなくなってしまったので、新たに React Native Paper というライブラリを導入しました。
こちらのライブラリには、本当に様々なコンポーネントが用意されていて、かなり便利でした!
個人的には、ラジオボタンとチェックボックスがシンプルなのにお洒落で使いやすかったですね。

公式サイトはこちらから。

Home · React Native Paper
https://callstack.github.io/react-native-paper/

 

ライブラリの導入には、下記のコマンドを実行します。

npm install react-native-paper --save

なお、こちらのライブラリを使用する際には、React Native Vector Icons も必要なので、未だインストールしていない場合は一緒に導入してください。
React Native Vector Icons のインストール方法については、公式の GitHub ページをご参照ください。
また、以前の記事で React Native Vector Icons が iOS で動作しない時の対処法について紹介したので宜しければこちらも合わせてご参照ください。

【React Native】iOSで「react-native-vector-icons」が正常に動作しない【解決済】
https://cpoint-lab.co.jp/article/202010/17465/

ライブラリのインストールは以上で完了です!
あとは、公式サイトを見て、導入したいコンポーネントがあったら、そのページのサンプルコードを参考にして追加してください。
例えば、チェックボックスだったら下記のようになります。

import { Checkbox } from 'react-native-paper';
<Checkbox.Item
  label="[ラベル名]"
  status={this.state.checked ? 'checked' : 'unchecked'}
  onPress={() => this.setState({ checked: !this.state.checked })} />

 

以上、React Native でマテリアルデザインのコンポーネントを実装できるライブラリ「React Native Paper」のご紹介でした。
ご参考になれば幸いです。

  • この記事いいね! (0)