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