【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」のご紹介でした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG