searchable-dropdown-react-native

Searchable Dropdown React Native

Searchable Dropdown in react native, usable with Expo. Allow you to handle single and multiple selections.

Screenshots

Installation

npm install --save searchable-dropdown-react-native

Properties

Name	Description	Type	Default	Required
options	The options for the component.	array		Yes
selectedValues	The values currently selected.	array		Yes
setSelectedValues	The callback to handle the selection of items	func		Yes
label	The label of the dropdown	string		No
placeholder	Default text to be shown to the user	string	'Select an item'	No
inputSize	Size of the input.	number	150	No
addNewElementText	The text that will be shown to add a new element is the options.	string	Add an item	No
rightIcon	The icon on the right of the input (if you want one).	any		No
selectedElementColor	Color of the selected items.	string		No
labelStyle	Additional styles for the label.	object	{}	No
containerStyle	Additional styles for the container view.	object	{}	No
itemStyle	Additional styles for the items.	object	{}	No
labelStyle	Additional styles for the labels.	object	{}	No
inputContainerStyle	Additional styles for the input container.	object	{}	No
inputColor	The color of the input.	string		No

Example

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

let items = [
  {
    id: 1,
    name: "JavaScript",
    value: "JavaScript"
  },
  {
    id: 2,
    name: "Java",
    value: "Java"
  },
  {
    id: 3,
    name: "Ruby",
    value: "Ruby"
  },
  {
    id: 4,
    name: "React Native",
    value: "React Native"
  },
  {
    id: 5,
    name: "PHP",
    value: "PHP"
  },
  {
    id: 6,
    name: "Python",
    value: "Python"
  },
  {
    id: 7,
    name: "Go",
    value: "Go"
  },
  {
    id: 8,
    name: "Swift",
    value: "Swift"
  }
];

export default function App() {
  const [selectedValues, setSelectedValues] = useState([]);

  return (
    <SearchableDropdown
      options={items}
      selectedValues={selectedValues}
      setSelectedValues={setSelectedValues}
      label="test dropdown"
      placeholder="Test placeholder"
      inputSize={300}
    />
  );
}