Search Bar

[hirbod]

I would love to have support for the native search bars, which shall collapse on scroll with large header.

[WoLewicki]

Isn't #758 what you would like to have? It needs some modifications probably to apply all options to the native searchBar.

[hirbod]

Wish I could help, but I am a pretty useless Front- and Backend-Developer with no native skills. :/

[WoLewicki]

I added new implementation with SearchBar inside the library. Feel free to check it and comment in the issue.

[hirbod]

@WoLewicki I'll check that out, thank you very much.
Have you also considered "SearchView" for android as equivalent?

[WoLewicki]

Adding the similar component on Android is a good option for sure and I will probably work on it later. Is there something missing on Android in the component provided by e.g. umhan35/react-native-search-bar? I would probably replicate the already implemented behavior.

[hirbod]

Since there is no screenshot or demo for android in the provided component, it is kinda hard to tell. I did a little code review and it looks fine. I guess the API is enough. Also, it looks like there are all events (blur, focus, change etc). So I guess we could develop everything.

What is important for me: I still need to be able to set headerRight and maybe to style the input, at least the width and maybe font family?

[cloudorbush]

Would love to have an autoFocus prop added to SearchBarProps

[Ubax]

@10000multiplier Could you describe a use case in which the prop would be used?
Natively the UISearchBar is not supporting such behavior and having custom logic may lead to unexpected bugs.

[cloudorbush]

Issue:

When obscureBackground in SearchBarProps is set to true I can not figure out how to display the search results on top of the obscured background.

Workaround

Currently I'm just navigating to another searchscreen with the onFocus prop, and when that screen shows up it would be desireable to have the searchbar autofocused.

So I guess if there is a more optimal way to do this autofocus wouldn't be needed.

[kacperkapusciak]

@10000multiplier we can't wrap our head around what you mean by "displaying results on top of the obscured background". Could you prepare a snippet of code (preferably an expo snack) with comments what's the result you'd like to achieve and what doesn't work as you'd expect?

[dotconnor]

I would also like a "autoFocus" feature, our use case is more around the fact the user will click a "text box" that navigates to a new screen with the search bar. This way the user doesn't have the press twice to start typing.

[cloudorbush]

See #1007 also.

@kacperkapusciak I was not able to produce any code where obscureBackground is set to true and the search results are not obscured also.

If you could point me in the right direction I would be very grateful.

[tboba]

Hi! A small update after two years of last reply there 😄
Right now both Android and iOS supports search bar natively! You just need to use searchBar object in the screenOptions and put your properties about search bar there.

As I can see there's also autoFocus prop that has been suggested by @vbylen.