| | | | | |
|--------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| !NPM VERSION | !NPM WEEKLY DOWNLOADS | !GITHUB STAR | !LICENSE | !NPM LIFETIME DOWNLOADS |

Expo / React Native Select Dropdown

Installation

npm install expo-select-dropdown
OR

yarn add expo-select-dropdown

Dependencies

This package depends on the following packages:
- @expo/vector-icons

Example

| Without Filters | With Fitlers |
|------------------|--------------------------|
|  |  |

Usage

``tsx
import {SelectDropdown, DropdownData} from "expo-select-dropdown";

export default function App() {
const [selected, setSelected] = useState | null>(null);
const [data] = useState[]>([
{key: "1", value: "Toothbrush"},
{key: "2", value: "Laptop"},
{key: "3", value: "Sunglasses"},
{key: "4", value: "Baseball"},
{key: "5", value: "Scissors"},
{key: "6", value: "Bicycle"},
{key: "7", value: "Camera"},
{key: "8", value: "Umbrella"},
{key: "9", value: "Backpack"},
{key: "10", value: "Water bottle"}
]);

return (
data={data}
placeholder={"Select option"}
selected={selected}
setSelected={setSelected}
searchOptions={{cursorColor: "#007bff"}}
searchBoxStyles={{borderColor: "#007bff"}}
dropdownStyles={{borderColor: "#007bff"}}
/>
);
}
`

Filter Usage

`tsx
export default function App() {
const [selected, setSelected] = useState | null>(null);
const data = [
{key: "1", value: "Toothbrush", location: "Bathroom", date: "2021-05-01", time: "12:00"},
{key: "2", value: "Laptop", location: "Bathroom", date: "2021-05-01", time: "12:00"},
{key: "3", value: "Sunglasses", location: "Bedroom", date: "2021-05-01", time: "12:00"},
{key: "4", value: "Baseball", location: "Bathroom", date: "2021-05-01", time: "12:00"},
{key: "5", value: "Scissors", location: "Bedroom", date: "2021-06-01", time: "1:00"},
{key: "6", value: "Bicycle", location: "Bedroom", date: "2021-05-01", time: "12:00"},
{key: "7", value: "Camera", location: "Bathroom", date: "2021-06-01", time: "1:00"},
{key: "8", value: "Umbrella", location: "Bedroom", date: "2021-06-01", time: "12:00"},
{key: "9", value: "Backpack", location: "Bathroom", date: "2021-05-01", time: "1:00"},
{key: "10", value: "Water bottle", location: "Bedroom", date: "2021-06-01", time: "12:00"},
]
const [tags] = useState([
{key: "1", name: "Location", onFilter: () => {
return data.filter((item) => item.location.toLowerCase().includes("Bathroom".toLowerCase()));
}},
{key: "2", name: "Date", onFilter: () => {
return data.filter((item) => item.date.toLowerCase().includes("2021-05-01".toLowerCase()));
}},
{key: "3", name: "Time", onFilter: () => {
return data.filter((item) => item.time.toLowerCase().includes("12:00".toLowerCase()));
}}
])

return (

data={data.map((item) => {return {key: item.key, value: item.value}})}
tags={tags}
placeholder={"Select option"}
selected={selected}
setSelected={setSelected}
searchOptions={{cursorColor: "#007bff"}}
searchBoxStyles={{borderColor: "#007bff"}}
dropdownStyles={{borderColor: "#007bff"}}
/>

);
}
`

SelectDropdownProps

`ts
interface SelectDropdownProps {
data: DropdownData[]
placeholder: string
selected: DropdownData | null
setSelected: (selected: DropdownData) => void
tags?: TagData[]
searchOptions?: TextInputProps
searchBoxStyles?: ViewStyle
dropdownStyles?: ViewStyle
}
`

TagData

`ts
interface TagData {
key: any;
name: string;
onFilter: () => DropdownData[] | undefined;
}
``

Work In Progress
- [x] Filter option added for searching items (optional)
- [x] Tags for the filters
- [x] Improved default styling
- [ ] Restrict breaking styling options
- [ ] Make search setting optional
- [ ] Dependency clean up