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}
/>
);
}