React Native Searchable Dropdown

React Native Searchable Dropdown is a customizable and easy-to-use dropdown component for React Native apps. It provides a searchable and filterable list of items that can be selected by the user.

Features

• Customizable styling and appearance
• Searchable and filterable list of items
• Support for both single and multiple selection
• Customizable placeholder text and selection text
• Built-in support for async data loading
• Easy-to-use API with clear documentation

Installation

You can install the React Native Searchable Dropdown component using NPM or Yarn:

npm install react-native-searchable-dropdown

yarn add react-native-searchable-dropdown

Usage

Here is an example of how to use the React Native Searchable Dropdown component:

import React, { useState } from 'react';
import { View } from 'react-native';
import SearchableDropdown from 'react-native-searchable-dropdown';

const items = [
  { id: 1, name: 'JavaScript' },
  { id: 2, name: 'Python' },
  { id: 3, name: 'Java' },
  { id: 4, name: 'Ruby' },
  { id: 5, name: 'PHP' },
];

const App = () => {
  const [selectedItems, setSelectedItems] = useState([]);

  const onItemSelect = (item) => {
    setSelectedItems([...selectedItems, item]);
  };

  return (
    <View>
      <SearchableDropdown
        items={items}
        onItemSelect={onItemSelect}
        selectedItems={selectedItems}
        containerStyle={{ padding: 5 }}
        textInputStyle={{
          padding: 12,
          borderWidth: 1,
          borderColor: '#ccc',
          borderRadius: 5,
        }}
        itemStyle={{
          padding: 10,
          marginTop: 2,
          backgroundColor: '#ddd',
          borderColor: '#bbb',
          borderWidth: 1,
          borderRadius: 5,
        }}
        itemTextStyle={{ color: '#222' }}
        selectedItemTextStyle={{ color: '#0080ff' }}
        placeholder="Select languages"
        resetValue={false}
        underlineColorAndroid="transparent"
      />
    </View>
  );
};

export default App;

For more details on how to use the component, please refer to the documentation.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contribution

Contributions are welcome and appreciated! Please check the CONTRIBUTING.md file for more information on how to contribute to this project.

Credits

React Native Searchable Dropdown was created by Kianoosh Soleimani.