React Nativeでマテリアルデザインのチップ（Chip）を表示する方法を徹底解説

UIにチップ（Chip）を表示するには、React Native Paperが提供するマテリアルデザインコンポーネントを利用します。React Native Paperは、Googleのマテリアルデザインガイドラインに沿ったUIパーツを簡単に導入できる人気のライブラリです。

React Native Paperのインストール

まず、以下のコマンドでreact-native-paperをプロジェクトにインストールします。

npm install --save-dev react-native-paper

インストール後、チップコンポーネントは画面上で次のように表示されます。

チップコンポーネントの基本構文

チップの基本的な書き方は以下のとおりです。

<Chip icon="icontodisplay" onPress={onPressfunc}>Chip Name</Chip>

チップで使える主なプロパティ一覧

Chipコンポーネントには、見た目や動作をカスタマイズするための便利なプロパティが多数用意されています。

実装例：チップを表示するコード

以下は、チップを実際に表示するためのJSXコード例です。

<SafeAreaView style={styles.container}>
   <Chip icon="camera" disabled onPress={() => console.log('camera')}>Click
      Here</Chip>
      <Chip icon="apple" mode="outlined"selectedColor='green' selected
         onPress={() => console.log('apple')}>Apple Icon</Chip>
</SafeAreaView>

完全なサンプルコード

スタイル定義を含む、動作する完全なサンプルコードは以下のとおりです。3種類のチップ（無効状態のチップ、選択状態のアウトラインチップ、日付選択チップ）を配置しています。

import * as React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
import { Chip } from 'react-native-paper';
const MyComponent = () => (
   <SafeAreaView style={styles.container}>
      <Chip icon="camera" style={styles.chip} disabled onPress={() =>
         console.log('camera')}>Click Here</Chip>
         <Chip icon="apple" style={styles.chip}
            mode="outlined"selectedColor='green' selected onPress={() =>
            console.log('apple')}>Apple Icon</Chip>
         <Chip icon="calendar-month" style={styles.chip} mode="outlined" selected
            onPress={() => console.log('calendar')}>Select Date</Chip>
      </SafeAreaView>
   );
   export default MyComponent;
   const styles = StyleSheet.create({
   container: {
      flex: 1,
      alignItems: "center",
      justifyContent: "center"
   },
   chip: {
      marginTop:10
   }
});

実行結果

上記のコードを実行すると、アイコン付きのチップが画面中央に縦に並んで表示されます。無効化されたチップはグレーアウトし、選択状態のチップは指定した色（この例では緑）で強調されます。

このように、React Native PaperのChipコンポーネントを使えば、少ないコード量でマテリアルデザインに準拠した洗練されたチップUIを簡単に実装できます。タグ選択やフィルター機能など、さまざまな場面で活用してみてください。