If you are like me who wanted an absolute dropdown view of searchbar results and didn’t have any luck and google directed you to this deserted article then cheers
I had a hard time finding a library or component which gave such results, there are dropdown but they will push the previous view below, surely don’t want that (or maybe I’m failing at being a programmer and don’t know how to query google right).
I didn’t use any third party libraries just to make it plain and simple but you can use BlurView to make the background faded a bit for a classy look, here’s a simple tutorial to add Blurview, promoting my other articles like an Arab should. 😁
Okay, Im not really a design and great UI person but you can personalize it how you want and your designer has already handed over a design to you or you won’t be showing results in a dropdown.
Okay, let’s get coding…
App.js:
export default function App() {
return (
<View style={styles.container}>
<TextInput
style={styles.textInput}
placeholder="Search"
placeholderTextColor='white'
onChangeText={onSearch}
/>
Here let’s declare some variables:
const [dataSource] = useState(['apple', 'banana', 'cow', 'dex', 'zee', 'orange', 'air', 'bottle'])
const [filtered, setFiltered] = useState(dataSource)
const [searching, setSearching] = useState(false)
- dataSource is to hold main data.
- filtered array is to hold searched data.
- searching flag is to define if user is searching or not(need it to show dropdown)
First initialize your component make it class or function whatever you want, I prefer functional components for God knows what reason, and we’re gonna mimic functionality of searchbar with a textinput, it’s great to use TextInput for search because you can customize it to endless posibilites whereas searchbar libraries limit you one way or another and then there’s no need to add a heavy library with this that components and increase your app size.
Here we simply provided a search placeholder and onChangeText event to our component.
Okay I'm not attaching my random UI components code snippet, obvi you don’t need this but if you need something to try it on here’s the link to repo copy the whole code from there: Code Snippet
Okay, we’ll pause our screen here and go on to make a separate file for dropdown, I named it “SearchDropDown” but whatever, simply make a function there and return a plain view for now we’ll get to it later.
Now import this component to your main file App.js:
import SearchDropDown from './app/component/SearchDropDown'
Alright, here’s the deal now at the end of your whole view, I MEAN IT, the whole thing at the very bottom of your return statement go ahead and call your dropdown component
{/* Add all your components here or replace all this code to your components. */}
{/* and at the end of view */}
{
searching &&
<SearchDropDown
onPress={() => setSearching(false)}
dataSource={filtered} />
}
</View>
)}
we used our flag searching to show our component when user will be searching it’ll be displayed and not otherwise.
In our component we’re pausing an array to dataSource prop, it’s the filtered search result that we want to display in our dropdown list.
Now let’s head to functionality of search:
const onSearch = (text) => {
if (text) {
setSearching(true) //to show dropdown make it true
const temp = text.toLowerCase() //making text lowercase to search
//filter main dataSource and put result in temp array
const tempList = dataSource.filter(item => {
if (item.match(temp))
return item
})
//at the end of search setFiltered array to searched temp array.
setFiltered(tempList)
}
//if nothing was searched
else {
setSearching(false) //set searching to false
}
}
So, our basically functionality is complete, now we need to design our UI to display our dropdownlist, heading over to
SearchDropDown.js
export default function SearchDropDown(props) {
const { dataSource } = props //take data from parent
return (
//main container to position list over parent.
<TouchableOpacity onPress={props.onPress} style={styles.container}>
<View style={styles.subContainer}>
{
//if search results matched it'll have some length.
dataSource.length ?
//then show results
dataSource.map(item => {
return (
<View style={styles.itemView}>
<Text style={styles.itemText}>{item}</Text>
</View>
)
})
//if there were no results show no result text instead of empty view
:
<View
style={styles.noResultView}>
<Text style={styles.noResultText}>No search items matched</Text>
</View>
}
</View>
</View>
)
To make it further smooth we replaced parent view with Touchableopacity and used a callback method from parent it’ll close the search view on clicking anywhere empty on screen.
That's all folks!
Here’s a link to Github repo https://github.com/swairAQ/DropdownSearch, running source code.
There are many things that can go right but it’s upto you to sync this basic snippet to your app design and flow.
Happy codi….. Drop your heart first!!!
Happy coding!
Top comments (2)
hi
Hello