【React Native】タグ入力欄を実装できる「react-native-tags-input」ライブラリ

タイトルにある通り、タグを入力できる入力欄を簡単に実装できるライブラリ「react-native-tags-input」のご紹介です。
入力したタグは、配列で管理できます。

ライブラリの GitHub はこちら。

GitHub – jimmybengtsson/react-native-tags-input: Input component for React Native to add and remove tags.
https://github.com/jimmybengtsson/react-native-tags-input

インストールには、下記のコマンドを実行してください。

npm install react-native-tags-input --save

下記、サンプルコードです。

import React, { useState } from 'react';
import TagInput from 'react-native-tags-input';

export default Sample = () => {
  const [tags, setTags] = useState({ tag: '', tagsArray: [] });
  const updateTagState = (tags) => {
    setState(tags);
  }
  return (
    <TagInput
      updateState={updateTagState}
      tags={tags} />
}

tags と updateState は必須項目なので、必ず指定してください。
tags　の tag　には現在入力欄に入力されている文字が入り、tagsArray には、追加したタグが配列で格納されます。
基本的にはこれだけで動作しますが、placeholder を指定したり、入力欄のデザインを変更したり、追加したタグのデザインを変更したりすることもできます。
カスタマイズが色々できるので、追加したプロジェクトの見た目に合わせることもできました。

以上、React Native でタグ入力欄を実装できるライブラリ「react-native-tags-input」のご紹介でした。
上でも書きましたが、カスタマイズ性が良いので、シンプルなタグ入力欄を導入したい方にはおすすめです。