Expo / React Native Select Dropdown with search and other customizations
npm install expo-select-dropdown| | | | | |
|--------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| !NPM VERSION | !NPM WEEKLY DOWNLOADS | !GITHUB STAR | !LICENSE | !NPM LIFETIME DOWNLOADS |
npm install expo-select-dropdown
OR
yarn add expo-select-dropdown
| Without Filters | With Fitlers |
|------------------|--------------------------|
|  |  |
``tsx`
import {SelectDropdown, DropdownData} from "expo-select-dropdown";
export default function App() {
const [selected, setSelected] = useState
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 (
placeholder={"Select option"}
selected={selected}
setSelected={setSelected}
searchOptions={{cursorColor: "#007bff"}}
searchBoxStyles={{borderColor: "#007bff"}}
dropdownStyles={{borderColor: "#007bff"}}
/>
);
}
`tsx
export default function App() {
const [selected, setSelected] = useState
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 (
tags={tags}
placeholder={"Select option"}
selected={selected}
setSelected={setSelected}
searchOptions={{cursorColor: "#007bff"}}
searchBoxStyles={{borderColor: "#007bff"}}
dropdownStyles={{borderColor: "#007bff"}}
/>
);
}
`
`ts`
interface SelectDropdownProps {
data: DropdownData
placeholder: string
selected: DropdownData
setSelected: (selected: DropdownData
tags?: TagData[]
searchOptions?: TextInputProps
searchBoxStyles?: ViewStyle
dropdownStyles?: ViewStyle
}
`ts``
interface TagData {
key: any;
name: string;
onFilter: () => DropdownData
}
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