React-native-screens: Implement iOS 11 searchbar in header

[tobiaslins]

First of all - thank you so much for your hard work in all these amazing RN libraries! Without them react native just wouldn't be as good as it's now!

Do you think it's a lot of work to implement the iOS11 Header Searchbar?
https://developer.apple.com/design/human-interface-guidelines/ios/bars/search-bars/

Maybe I'll take a look into it if I find the time!

[WoLewicki]

Thanks for your contribution! Feel free to open a PR about the Header Searchbar whenever you have time. I will close this one but comment here if you need anything regarding this topic.

[arjndr]

@WoLewicki I managed to get the native search controller inside the header, I'm not sure how to send the events to the JS side tho, I'm not experienced with Objective-C, having a bit of problem with delegation of UISearchBar, can you check it out on my fork?

[WoLewicki]

Maybe this could help you https://github.com/umhan35/react-native-search-bar?

[nandorojo]

Hey all, just echoing the gratitude for this library. It's been the greatest noticeable change in making my app feel smooth.

Did you end up making a search bar for the header?

[WoLewicki]

It is not implemented yet and I am afraid I do not have time for this now. I would love to merge a PR with it though!

[WoLewicki]

I investigated it a bit more and I tried to add the SearchBar component (e.g. the one from this comment: https://github.com/software-mansion/react-native-screens/issues/194#issuecomment-635302265) to the header on the native side on iOS. The problem is that this component cannot be used as is, it can be only delegated to use the given methods, it means that it won't apply any of the properties like placeholder by itself. It could possibly be done in a way that each of the component's properties is copied one-by-one on the native side, but it doesn't seem like the best solution. It can still be done though, maybe by choosing only some most crucial options from the SearchBar component.

Also, cannot SearchBar component be implemented as e.g. the first item of ScrollView and replicate the native behavior by properly manipulating it?

Can you elaborate on it @nandorojo, @tobiaslins, @arjndr, and others? I can also submit a PR that shows the most simple example of usage without any modifications available.

[grahammendick]

@WoLewicki Just thought I'd let you know that I've wrapped the native iOS search bar in my Navigation router.

[WoLewicki]

@grahammendick I thought of maybe doing something like that. The second option is to take props from the passed SearchBar component instead of passing so many props from the JS side. I don't know if any of them is good enough though.

[grahammendick]

@WoLewicki There aren't that many props. Here's the typescript def for my SearchBar component

[a-eid]

wondering if there's any progress on this ?

[WoLewicki]

@a-eid I added a first look at it in #758. Can you check if the most basic version with placeholder and events option work?

[FrankFundel]

@WoLewicki I cannot get it to work. I looked through all your changes, they seem to be fine. But somehow case RNSScreenStackHeaderSubviewTypeSearchBar: { does not get called in RNSScreenStackHeaderConfig.m line 478. I thought maybe add export const ScreenStackHeaderSearchBarView = View; in src/index.js or if (options.searchBar)... in src/createNativeStackNavigator.js but no effects.

[FrankFundel]

I got it to work after I put the code under case RNSScreenStackHeaderSubviewTypeSearchBar: { in RightButton.
But: How to unFocus after searchButton has pressed? And when scrolling down, the title disappears.

[WoLewicki]

@FrankFundel can you provide the reproduction of your problems? It would be easier to work on them then.

[FrankFundel]

@WoLewicki it is in a bigger private project, I dont have the time to set up a new project. Maybe I can add you to the rep?

[WoLewicki]

Adding is not a good option because it doesn't make reproduction available for all of the users. Making an easy reproduction should not take too much time, you can just fork the react-native-screens repository, and add a simple test case in TestExample project.

[FrankFundel]

My stuff is exatly like you have it, except I'm using it like:

export default class SearchScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const {params = {}} = navigation.state;

    return {
      title: translate('Search'),
      searchBar: () => <SearchBar
        placeholder={translate("Search")}
        onChangeText={params.search}
        onSubmitEditing={params.fullSearch}
        header
      />
    }
  };
...
}

With class components and:

import createNativeStackNavigator from 'react-native-screens/createNativeStackNavigator';
const SearchStack = createNativeStackNavigator({
  Search: SearchScreen,
},
{
  initialRouteName: 'Search',
});

[WoLewicki]

@FrankFundel you are using v4 native-stack, yes? I haven't added the new prop there, it's my mistake. Can you check if it works now?

[FrankFundel]

Works now, but still: How to unFocus after searchButton has pressed? And when scrolling down, the title disappears.

[dioncodes]

When the searchfield is focused, a gray half transparent view is visible above the screen content. How is it possible to display the search results there, so the user can tap on a result while the keyboard is visible? In my case it was always required to tap and close it before being able to select something. Also in that case the value of the textfield is gone as soon as its unfocused.

[WoLewicki]

I added a second attempt on implementing the SearchBar on iOS. It now uses the native component provided by react-native-screens and accepts only it. You can see the example of usage here: https://github.com/software-mansion/react-native-screens/blob/@wolewicki/add-search-bar/TestsExample/src/Test758.tsx. Please test it and comment if you see any bugs or weird behavior. This component is based on @grahammendick and @umhan35 work :tada:.

As for your question @dioncodes, I think it should be possible with obscureBackground prop set to false.

[dioncodes]

@WoLewicki This is awesome, thank you!! Works like a charm, haven't discovered any problem so far. Of course I will let you know, in case anything comes up...

[elie-chaaban]

The search bar is not showing, I m using react navigation 5 with expo and react native screens is already installed, what should i add???

[WoLewicki]

If you use Expo managed workflow, you will not be able to use it since it changes the native code, which is already compiled in Expo managed workflow. You would have to use bare workflow or wait for SDK 41 which hopefully has this change if you want to test it with Expo.

[WoLewicki]

Could you elaborate on what kind of SearchBar would you expect on Android? Is it built-in the header one like in this article: https://www.tutorialspoint.com/how-to-use-searchview-in-toolbar-android (also used in @grahammendick implementation)? Or should it rather be under the header, with a look similar to the one provided by react-native-search-bar?

[elie-chaaban]

No, like the link you have sent

[dhanushm360]

any update for expo users?

[WoLewicki]

@dhanushm360 what do you mean by expo users? If you mean Expo managed workflow, then it will not be available before the next SDK for sure since you cannot change the native code in there.

[pouyarezvani]

@WoLewicki you mentioned we cant use this iOS search feature on Expo 41 managed workflow. Will it be available for when Expo SDK 42 will be released (managed workflow)?
And I'm guessing until then, there is no other way to implement it?

[WoLewicki]

@pouyarezvani it should be available in SDK 42. As for implementing it, if you want the native behavior, you need to use native APIs, so yeah, there is no way of doing this.

[nandorojo]

Thanks for the new update @WoLewicki, this is awesome!