【React Native】「react-native-input-select」で検索機能付きSelect Pickerコンポーネントを実装する

タイトルにある通り、React Native で検索機能付きの Select Picker を実装する方法についてです。
Select Picker だけなら、「【React Native】Selectメニューを実装するためのライブラリ「react-native-picker-select」」という記事で紹介した「react-native-picker-select」ライブラリを使用しますが、今回は表示する選択肢が多くて検索機能が欲しかったので、違うライブラリを導入しました。

「react-native-input-select」の Github はこちらから。

GitHub – azeezat/react-native-select: A customizable dropdown selection package for react-native for android and iOS with multiple select and search capabilities.
https://github.com/azeezat/react-native-select

導入方法は、下記コマンドを実行するだけです。

npm install react-native-input-select --save

サンプルコードは GitHub のコードをほぼ丸っと転載させていただきます。
GitHub との違いは 9行目の isSearchable で、こちらを追加すると、検索機能を有効にすることができます。

import React from 'react';
import Dropdown from 'react-native-input-select';

export default function App() {
  const [country, setCountry] = React.useState();

  return (
    <Dropdown
      isSearchable
      label="Country"
      placeholder="Select an option..."
      options={[
        { label: 'Nigeria', value: 'NG' },
        { label: 'Åland Islands', value: 'AX' },
        { label: 'Algeria', value: 'DZ' },
        { label: 'American Samoa', value: 'AS' },
        { label: 'Andorra', value: 'AD' },
      ]}
      selectedValue={country}
      onValueChange={(value) => setCountry(value)}
    />
  );
}

なお、複数選択を有効にすることも可能で、その場合は isMultiple を追加してください。
基本的な使い方は以上です。
あとは、各種の style を指定して、ラベルや入力欄、ドロップダウンアイコン等をお好みのレイアウトに調整してください。
かなり融通が利くので、思い通りのレイアウトにカスタマイズできました！

以上、React Native の「react-native-input-select」ライブラリを使って、検索機能付きSelect Pickerコンポーネントを実装する方法についてでした。
ご参考になれば幸いです。