[TIMOB-26509] iOS: Allow Ti.UI.SearchBar to be displayed in navigation-bar

GitHub Issue	n/a
Type	Improvement
Priority	None
Status	Closed
Resolution	Fixed
Resolution Date	2019-03-07T21:18:25.000+0000
Affected Version/s	n/a
Fix Version/s	Release 8.1.0
Components	iOS
Labels	n/a
Reporter	Hans Knöchel
Assignee	Vijay Singh
Created	2018-11-01T10:28:03.000+0000
Updated	2019-11-11T09:39:23.000+0000

Description

There have been some improvements regarding search-bars (TIMOB-25287) lately. One specific behavior is still missing though: Displaying the search-bar as part of the navigation-bar (iOS 11+). More infos and details on the implementation can be found here: - https://medium.com/@PavelGnatyuk/large-title-and-search-in-ios-11-514d5e020cee - https://stackoverflow.com/questions/45350035/ios-11-searchbar-in-navigationbar

Attachments

File	Date	Size
6ApdI.png	2018-11-01T10:27:53.000+0000	133574

Comments

Matthew Delmarter 2018-11-01

Thanks for adding this Hans. Really need this for a new app I am building.
Hans Knöchel 2018-12-13

Can this be scheduled? We'd be fine cherry-picking this into our own SDK if the milestone is a bit away. I know [~vijaysingh] (hey man!) worked on search-bars and will probably be able to extend the search-bar to be presented inside a container without many changes. As I can see it in the code, it right now uses a fixed frame for the search-bar, which would be auto-managed by the navigation-bar when being embedded in it.
Vijay Singh 2018-12-13

[~hknoechel] Let me schedule it for 8.1.0. We'll work on it as soon as we get free from 8.0.0.

Vijay Singh 2019-01-28

Hey [~mdelmarter] [~hknoechel], I am planning to expose a property 'showSearchBarInNavigation' to Ti.UI.ListView, which will be create only. Test Case -

       var rows = [];
       for (var i = 0; i < 20; i++) {
         var title = i ? 'Row '+ i : 'Close Window'
         rows.push({ properties: { title:title  , backgroundColor: 'red', searchableText:title}});
       }
        
       var win = Ti.UI.createWindow({
         title: 'TEST',
         backgroundColor: 'white',
       });
        
       var nav = Ti.UI.iOS.createNavigationWindow({ 
         window: win,
        });
        
       var sb = Ti.UI.createSearchBar();
        
       var ls = Ti.UI.createListSection({
         items: rows
       });
        
       var lv = Ti.UI.createListView({
           dimBackgroundForSearch: true,
           sections: [ls],
           searchView: sb,
           showSearchBarInNavBar: true
       });
        
       sb.setHintText("test");
        sb.addEventListener('change', function(e){
         Ti.API.info(e.value);
       });
       sb.addEventListener('return', function(e){
         sb.blur();
       });
       win.add(lv);
       nav.open();

Do you guys have anything to add? Thanks!

Hans Knöchel 2019-01-28

Sounds great, thrilled to test it! Maybe you could also consider making it a property of the SearchBar directly, so people can embed it a search-bar to a navigation-bar without using a list-view / table-view. The search behavior should still be the same, it would just not be added to it's parent but to the navigation bar.

Vijay Singh 2019-02-01

PR - https://github.com/appcelerator/titanium_mobile/pull/10664 Test Case (TiUIListView)-

       var rows = [];
       for (var i = 0; i < 20; i++) {
         var title = i ? 'Row '+ i : 'Close Window'
         rows.push({ properties: { title:title  , backgroundColor: 'red', searchableText:title}});
       }
        
       var win = Ti.UI.createWindow({
         title: 'TEST',
         backgroundColor: 'white',
         hidesSearchBarWhenScrolling: false
       });
        
       var nav = Ti.UI.createNavigationWindow({ 
         window: win,
        });
        
       var sb = Ti.UI.createSearchBar({
           hintTextColor: 'white'
       });
        
       var ls = Ti.UI.createListSection({
         items: rows
       });
        
       var lv = Ti.UI.createListView({
           dimBackgroundForSearch: true,
           sections: [ls],
           searchView: sb,
           showSearchBarInNavBar: true
       });
        
       sb.setHintText("test");
       sb.addEventListener('change', function(e){
         Ti.API.info(e.value);
       });
        
       sb.addEventListener('return', function(e){
         sb.blur();
       });
        
       win.add(lv);
       nav.open();

Test Case (TiUITableView)-

       var rows = [];
       for (var i = 0; i < 10; i++) {
           var title = i ? 'Row '+ i : 'Close Window';
           rows.push({ title: title});
         }
        
       var win = Ti.UI.createWindow({
         backgroundColor: 'red',
         hidesSearchBarWhenScrolling: true
       });
         
       var sb = Ti.UI.createSearchBar({
           hintTextColor: 'blue'
       });
       var lv = Ti.UI.createTableView({
           data: rows,
           search: sb,
           showSearchBarInNavBar: true,
       });
        
        sb.setHintText("test");
        sb.addEventListener('change', function(e){
         Ti.API.info(e.value);
       });
        
       sb.addEventListener('return', function(e){
       sb.blur();
       });
        
       sb.addEventListener('cancel', function(e){
       });
       lv.addEventListener('click', function(e) {   
       })
   
       win.add(lv);
       var nav = Ti.UI.iOS.createNavigationWindow({ 
         window: win,
        });
       nav.open();

Joshua Quick 2019-02-12

Everyone, for your info, Android already supports displaying a SearchBar or SearchView in the top ActionBar as shown in our code example linked below. https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Android.SearchView Although it's recommended that you use Ti.UI.Android.SearchView which is Android's native implementation over Titanium's Ti.UI.SearchBar which is our custom implementation. In the future, we'll look into replacing our Android Ti.UI.SearchBar implementation with the native one. _(Thanks goes to [~ybanev] for digging into the Android side of this.)_

Keerthi Mahalingam 2019-03-07

Verified the fix on SDK 8.1.0.v20190307071609.Works fine.

   Operating System
     Name                        = Mac OS X
     Version                     = 10.13.6
     Architecture                = 64bit
     Memory                      = 17179869184
   Node.js
     Node.js Version             = 8.12.0
     npm Version                 = 6.4.1
   Titanium CLI
     CLI Version                 = 5.1.1
   Titanium SDK
     SDK Version                 = 8.1.0.v20190307071609
    Cli    =7.0.10 master 17
     Device           = iPhone 6s iOS 12
   Simulator       = iPhone 6 iOS 11.4

Hans Knöchel 2019-03-10

[~vijaysingh] We just integrated this into our app and noticed that the search-bar now is only visible when pulled down manually. Can this be controlled? Otherwise people will not know that a search even exists.
Hans Knöchel 2019-03-10

Video of the issue: https://www.dropbox.com/s/uvf2bi8vsqay902/bug.mov?dl=1
Vijay Singh 2019-03-11

[~hknoechel] In same PR we have exposed Titanium.UI.Window.hidesSearchBarWhenScrolling, which can be used to show the search bar. Can you try same? Thanks!
Hans Knöchel 2019-03-11

[~vijaysingh] Unfortunately it flickers with that setting: https://www.dropbox.com/s/a2n99pgwczcm3gx/bug-2.mov?dl=1
Brian García 2019-05-19

it's limited to use it with TableView or ListView right?
Marian Kucharcik 2019-11-09

Hi guys, I discovered interesting thing - I set up everything as you do @Vijay but if I have LiveView turned on, on first run, it's working. If I refresh app via LiveView, searchbar is not displaying anymore anywhere. Also, hidesSearchBarWhenScrolling property of window is not working... Built with Ti SDK 8.2.1GA and tested with iPhone 11 Pro iOS 13 simulator. Please look at it. Thanks
Rene Pot 2019-11-11

[~max87] can you create a new ticket with that finding and add a sample with it? Commenting on old closed/fixed tickets will not re-open them.

JSON Source