[v2][ios11, ios12] Add searchBar option for topBar (#3303)

* [ios11+] Add searchBar option for topBar

* Fix formatting and linter issues

* Add docs about topBar.searchBar

* Fix missing semicolons

* Revert prettier changes

* Add js tests for onSearchBarUpdated to achieve 100% coverage

* Mark searchBar test as :ios: specific

docs/docs/events.md

@@ -16,7 +16,7 @@ Called each time this component appears on screen (attached to the view heirarch
 ```js
 class MyComponent extends Component {
   componentDidAppear() {
-    
+
   }
 }
 ```
@@ -39,7 +39,7 @@ Called each time this component disappears from screen (detached from the view h
 ```js
 class MyComponent extends Component {
   componentDidAppear() {
-    
+
   }
 }
 ```
@@ -89,7 +89,17 @@ Called when a TopBar button is pressed.
 ```js
 class MyComponent extends Component {
   onNavigationButtonPressed(buttonId) {
-    
+
   }
 }
-```
+```
+
+## onSearchBarUpdated (iOS 11+ only)
+Called when a SearchBar from NavigationBar gets updated.
+```js
+class MyComponent extends Component {
+  onSearchBarUpdated(query, isFocused) {
+
+  }
+}
+```

docs/docs/styling.md

@@ -19,7 +19,7 @@ export default class StyledScreen extends Component {
       }
     };
   }
-  
+
   constructor(props) {
     super(props);
   }
@@ -74,6 +74,10 @@ Navigation.mergeOptions(this.props.componentId, {
     buttonColor: 'black',
     drawBehind: false,
     testID: 'topBar',
+    largeTitle: true, // iOS 11+ Large Title
+    searchBar: true, // iOS 11+ native UISearchBar inside topBar
+    searchBarHiddenWhenScrolling: true,
+    searchBarPlaceholder: 'Search', // iOS 11+ SearchBar placeholder
     component: {
       name: 'example.CustomTopBar'
     },

e2e/ScreenStyle.test.js

@@ -133,4 +133,13 @@ describe('screen style', () => {
     await elementById(testIDs.SHOW_TOPBAR_REACT_VIEW).tap();
     await expect(elementByLabel('Press Me')).toBeVisible();
   });
+
+  it(':ios: set searchBar and handle onSearchUpdated event', async () => {
+    await elementById(testIDs.SHOW_TOPBAR_SEARCHBAR).tap();
+    await expect(elementByLabel('Start Typing')).toBeVisible();
+    await elementByLabel('Start Typing').tap();
+    const query = '124';
+    await elementByLabel('Start Typing').typeText(query);
+    await expect(elementById(testIDs.SEARCH_RESULT_ITEM)).toHaveText(`Item ${query}`);
+  });
 });

lib/ios/RNNEventEmitter.h

@@ -18,4 +18,6 @@
 
 -(void)sendOnNavigationCommand:(NSString *)commandName params:(NSDictionary*)params;
 
+-(void)sendOnSearchBarUpdated:(NSString *)componentId text:(NSString*)text isFocused:(BOOL)isFocused;
+
 @end

lib/ios/RNNEventEmitter.m

@@ -47,6 +47,16 @@ static NSString* const navigationEvent	= @"RNN.nativeEvent";
 	[self send:navigationEvent body:@{@"name":commandName , @"params": params}];
 }
 
+-(void)sendOnSearchBarUpdated:(NSString *)componentId
+						 text:(NSString*)text
+					isFocused:(BOOL)isFocused {
+	[self send:navigationEvent body:@{@"name": @"searchBarUpdated",
+									  @"params": @{
+												  @"componentId": componentId,
+												  @"text": text,
+												  @"isFocused": @(isFocused)}}];
+}
+
 - (void)addListener:(NSString *)eventName {
 	[super addListener:eventName];
 	if ([eventName isEqualToString:onAppLaunched]) {

lib/ios/RNNRootViewController.h

@@ -9,7 +9,7 @@
 #import "RNNTopTabsViewController.h"
 #import "RNNRootViewProtocol.h"
 
-@interface RNNRootViewController : UIViewController	<RNNRootViewProtocol, UIViewControllerPreviewingDelegate>
+@interface RNNRootViewController : UIViewController	<RNNRootViewProtocol, UIViewControllerPreviewingDelegate, UISearchResultsUpdating>
 
 @property (nonatomic, strong) RNNNavigationOptions* options;
 @property (nonatomic, strong) RNNEventEmitter *eventEmitter;

lib/ios/RNNRootViewController.m

@@ -59,6 +59,11 @@
 -(void)viewDidAppear:(BOOL)animated {
 	[super viewDidAppear:animated];
 	[self.eventEmitter sendComponentDidAppear:self.componentId componentName:self.componentName];
+	if (@available(iOS 11.0, *)) {
+		if (self.navigationItem.searchController && [self.options.topBar.searchBarHiddenWhenScrolling boolValue]) {
+			self.navigationItem.hidesSearchBarWhenScrolling = YES;
+		}
+	}
 }
 
 - (void)viewWillDisappear:(BOOL)animated {
@@ -70,6 +75,12 @@
 	[self.eventEmitter sendComponentDidDisappear:self.componentId componentName:self.componentName];
 }
 
+-(void)updateSearchResultsForSearchController:(UISearchController *)searchController {
+	[self.eventEmitter sendOnSearchBarUpdated:self.componentId
+										 text:searchController.searchBar.text
+									isFocused:searchController.searchBar.isFirstResponder];
+}
+
 - (void)viewDidLoad {
 	[super viewDidLoad];
 }

lib/ios/RNNTopBarOptions.h

@@ -26,6 +26,9 @@
 @property (nonatomic, strong) NSNumber* backButtonHidden;
 @property (nonatomic, strong) NSString* backButtonTitle;
 @property (nonatomic, strong) NSNumber* hideBackButtonTitle;
+@property (nonatomic, strong) NSNumber* searchBar;
+@property (nonatomic, strong) NSNumber* searchBarHiddenWhenScrolling;
+@property (nonatomic, strong) NSString* searchBarPlaceholder;
 
 @property (nonatomic, strong) RNNComponentOptions* component;
 

lib/ios/RNNTopBarOptions.m

@@ -42,6 +42,19 @@ extern const NSInteger BLUR_TOPBAR_TAG;
 			viewController.navigationController.navigationBar.prefersLargeTitles = NO;
 			viewController.navigationItem.largeTitleDisplayMode = UINavigationItemLargeTitleDisplayModeNever;
 		}
+		if ([self.searchBar boolValue] && !viewController.navigationItem.searchController) {
+			UISearchController *search = [[UISearchController alloc]initWithSearchResultsController:nil];
+			search.dimsBackgroundDuringPresentation = NO;
+			if ([viewController conformsToProtocol:@protocol(UISearchResultsUpdating)]) {
+				[search setSearchResultsUpdater:((UIViewController <UISearchResultsUpdating> *) viewController)];
+			}
+			if (self.searchBarPlaceholder) {
+				search.searchBar.placeholder = self.searchBarPlaceholder;
+			}
+			viewController.navigationItem.searchController = search;
+			// enable it back if needed on componentDidAppear
+			viewController.navigationItem.hidesSearchBarWhenScrolling = NO;
+		}
 	}
 	
 	if (self.visible) {

lib/src/components/ComponentWrapper.test.tsx

@@ -146,6 +146,7 @@ describe('ComponentWrapper', () => {
     const componentDidAppearCallback = jest.fn();
     const componentDidDisappearCallback = jest.fn();
     const onNavigationButtonPressedCallback = jest.fn();
+    const onSearchBarCallback = jest.fn();
 
     class MyLifecycleComponent extends MyComponent {
       componentDidAppear() {
@@ -159,6 +160,10 @@ describe('ComponentWrapper', () => {
       onNavigationButtonPressed() {
         onNavigationButtonPressedCallback();
       }
+
+      onSearchBarUpdated() {
+        onSearchBarCallback();
+      }
     }
 
     it('componentDidAppear, componentDidDisappear and onNavigationButtonPressed are optional', () => {
@@ -167,6 +172,7 @@ describe('ComponentWrapper', () => {
       expect(() => tree.getInstance()!.componentDidAppear()).not.toThrow();
       expect(() => tree.getInstance()!.componentDidDisappear()).not.toThrow();
       expect(() => tree.getInstance()!.onNavigationButtonPressed()).not.toThrow();
+      expect(() => tree.getInstance()!.onSearchBarUpdated()).not.toThrow();
     });
 
     it('calls componentDidAppear on OriginalComponent', () => {
@@ -192,5 +198,13 @@ describe('ComponentWrapper', () => {
       tree.getInstance()!.onNavigationButtonPressed();
       expect(onNavigationButtonPressedCallback).toHaveBeenCalledTimes(1);
     });
+
+    it('calls onSearchBarUpdated on OriginalComponent', () => {
+      const NavigationComponent = ComponentWrapper.wrap(componentName, MyLifecycleComponent, store);
+      const tree = renderer.create(<NavigationComponent componentId={'component1'} />);
+      expect(onSearchBarCallback).toHaveBeenCalledTimes(0);
+      tree.getInstance()!.onSearchBarUpdated();
+      expect(onSearchBarCallback).toHaveBeenCalledTimes(1);
+    });
   });
 });

lib/src/components/ComponentWrapper.tsx

@@ -52,6 +52,12 @@ export class ComponentWrapper {
         }
       }
 
+      onSearchBarUpdated(text, isFocused) {
+        if (this.originalComponentRef.onSearchBarUpdated) {
+          this.originalComponentRef.onSearchBarUpdated(text, isFocused);
+        }
+      }
+
       render() {
         return (
           <OriginalComponentClass

lib/src/events/ComponentEventsObserver.test.ts

@@ -18,7 +18,8 @@ describe(`ComponentEventsObserver`, () => {
     mockComponentRef = {
       componentDidAppear: jest.fn(),
       componentDidDisappear: jest.fn(),
-      onNavigationButtonPressed: jest.fn()
+      onNavigationButtonPressed: jest.fn(),
+      onSearchBarUpdated: jest.fn()
     };
 
     store = new Store();
@@ -42,6 +43,7 @@ describe(`ComponentEventsObserver`, () => {
     expect(mockComponentRef.componentDidAppear).toHaveBeenCalledTimes(0);
     expect(mockComponentRef.componentDidDisappear).toHaveBeenCalledTimes(0);
     expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledTimes(0);
+    expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledTimes(0);
     uut.registerForAllComponents();
     eventRegistry.registerComponentDidAppearListener.mock.calls[0][0](refId);
     eventRegistry.registerComponentDidDisappearListener.mock.calls[0][0](refId);
@@ -49,6 +51,7 @@ describe(`ComponentEventsObserver`, () => {
     expect(mockComponentRef.componentDidAppear).toHaveBeenCalledTimes(1);
     expect(mockComponentRef.componentDidDisappear).toHaveBeenCalledTimes(1);
     expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledTimes(0);
+    expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledTimes(0);
   });
 
   it('bubbles onNavigationButtonPressed to component by id', () => {
@@ -67,6 +70,31 @@ describe(`ComponentEventsObserver`, () => {
     expect(mockComponentRef.onNavigationButtonPressed).toHaveBeenCalledWith('theButtonId');
   });
 
+  it('bubbles onSearchUpdated to component by id', () => {
+    const params = {
+      componentId: refId,
+      text: 'query',
+      isFocused: true,
+    };
+    expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledTimes(0);
+    uut.registerForAllComponents();
+
+    eventRegistry.registerNativeEventListener.mock.calls[0][0]('buttonPressed', params);
+    expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledTimes(0);
+
+    eventRegistry.registerNativeEventListener.mock.calls[0][0]('searchBarUpdated', params);
+    expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledTimes(1);
+    expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledWith('query', true);
+    const paramsForUnexisted = {
+      componentId: 'NOT_EXISTED',
+      text: 'query',
+      isFocused: true,
+    };
+    eventRegistry.registerNativeEventListener.mock.calls[0][0]('searchBarUpdated', paramsForUnexisted);
+    expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledTimes(1);
+    expect(mockComponentRef.onSearchBarUpdated).toHaveBeenCalledWith('query', true);
+  });
+
   it('defensive unknown id', () => {
     uut.registerForAllComponents();
     expect(() => {

lib/src/events/ComponentEventsObserver.ts

@@ -2,6 +2,7 @@ import { EventsRegistry } from './EventsRegistry';
 import { Store } from '../components/Store';
 
 const BUTTON_PRESSED_EVENT_NAME = 'buttonPressed';
+const ON_SEARCH_BAR_UPDATED = 'searchBarUpdated';
 
 export class ComponentEventsObserver {
   constructor(private eventsRegistry: EventsRegistry, private store: Store) {
@@ -37,5 +38,11 @@ export class ComponentEventsObserver {
         componentRef.onNavigationButtonPressed(params.buttonId);
       }
     }
+    if (name === ON_SEARCH_BAR_UPDATED) {
+      const componentRef = this.store.getRefForId(params.componentId);
+      if (componentRef && componentRef.onSearchBarUpdated) {
+        componentRef.onSearchBarUpdated(params.text, params.isFocused);
+      }
+    }
   }
 }

playground/src/screens/SearchScreen.js

@@ -0,0 +1,97 @@
+const React = require('react');
+const { Component } = require('react');
+
+const {
+  StyleSheet,
+  FlatList,
+  View,
+  Button,
+  Text,
+  Platform
+} = require('react-native');
+
+const { Navigation } = require('react-native-navigation');
+const testIDs = require('../testIDs');
+
+const ITEMS = [...Array(200).keys()].map(key => ({ key: `Item ${key}` }));
+
+class SearchControllerScreen extends Component {
+  static get options() {
+    return {
+      topBar: {
+        title: {
+          text: 'Search'
+        },
+        largeTitle: true,
+        searchBar: true,
+        searchBarHiddenWhenScrolling: true,
+        translucent: true,
+        searchBarPlaceholder: 'Start Typing'
+      }
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      query: ''
+    };
+  }
+
+  filteredData() {
+    return ITEMS.filter(
+      item =>
+        this.state.query.length === 0 || item.key.indexOf(this.state.query) > -1
+    );
+  }
+
+  highlight(text, query) {
+    if (query.length > 0 && text.indexOf(query) > -1) {
+      const before = text.split(query)[0];
+      const after = text.split(query)[1];
+      return (
+        <Text>
+          <Text>{before}</Text>
+          <Text style={{ backgroundColor: 'yellow' }}>{query}</Text>
+          <Text>{after}</Text>
+        </Text>
+      );
+    }
+    return text;
+  }
+
+  render() {
+    return (
+      <FlatList
+        testID={testIDs.SCROLLVIEW_ELEMENT}
+        data={this.filteredData()}
+        contentContainerStyle={styles.contentContainer}
+        renderItem={({ item }) => (
+          <View style={styles.row}>
+            <Text style={styles.rowText} testID={testIDs.SEARCH_RESULT_ITEM}>
+              {this.highlight(item.key, this.state.query)}
+            </Text>
+          </View>
+        )}
+      />
+    );
+  }
+
+  onSearchBarUpdated(query, isFocused) {
+    this.setState({ query, isFocused });
+  }
+}
+
+module.exports = SearchControllerScreen;
+
+const styles = StyleSheet.create({
+  contentContainer: {},
+  row: {
+    height: 50,
+    padding: 20,
+    justifyContent: 'center'
+  },
+  rowText: {
+    fontSize: 18
+  }
+});

playground/src/screens/WelcomeScreen.js

@@ -53,6 +53,7 @@ class WelcomeScreen extends Component {
           <Button title='Orientation' testID={testIDs.ORIENTATION_BUTTON} onPress={this.onClickPushOrientationMenuScreen} />
           <Button title='Provided Id' testID={testIDs.PROVIDED_ID} onPress={this.onClickProvidedId} />
           <Button title='Complex Layout' testID={testIDs.COMPLEX_LAYOUT_BUTTON} onPress={this.onClickComplexLayout} />
+          <Button title='Push SearchBar' testID={testIDs.SHOW_TOPBAR_SEARCHBAR} onPress={this.onClickSearchBar} />
           <Text style={styles.footer}>{`this.props.componentId = ${this.props.componentId}`}</Text>
         </View>
         <View style={{ width: 2, height: 2, borderRadius: 1, backgroundColor: 'red', alignSelf: 'center' }} />
@@ -526,6 +527,13 @@ class WelcomeScreen extends Component {
       },
     });
   }
+  onClickSearchBar = () => {
+    Navigation.push(this.props.componentId, {
+      component: {
+        name: 'navigation.playground.SearchControllerScreen'
+      }
+    });
+  }
 }
 
 module.exports = WelcomeScreen;

playground/src/screens/index.js

@@ -23,6 +23,7 @@ const CustomTextButton = require('./CustomTextButton');
 const CustomRoundedButton = require('./CustomRoundedButton');
 const TopBarBackground = require('./TopBarBackground');
 const ComplexLayout = require('./ComplexLayout');
+const SearchScreen = require('./SearchScreen');
 
 function registerScreens() {
   Navigation.registerComponent(`navigation.playground.CustomTransitionDestination`, () => CustomTransitionDestination);
@@ -49,6 +50,7 @@ function registerScreens() {
   Navigation.registerComponent('CustomTextButton', () => CustomTextButton);
   Navigation.registerComponent('CustomRoundedButton', () => CustomRoundedButton);
   Navigation.registerComponent('TopBarBackground', () => TopBarBackground);
+  Navigation.registerComponent('navigation.playground.SearchControllerScreen', () => SearchScreen);
 }
 
 module.exports = {

playground/src/testIDs.js

@@ -65,6 +65,8 @@ module.exports = {
   MODAL_LIFECYCLE_BUTTON: `MODAL_LIFECYCLE_BUTTON`,
   SPLIT_VIEW_BUTTON: `SPLIT_VIEW_BUTTON`,
   SHOW_PREVIEW_BUTTON: `SHOW_PREVIEW_BUTTON`,
+  SHOW_TOPBAR_SEARCHBAR: `SHOW_TOPBAR_SEARCHBAR`,
+  SEARCH_RESULT_ITEM: `SEARCH_RESULT_ITEM`,
 
   // Elements
   SCROLLVIEW_ELEMENT: `SCROLLVIEW_ELEMENT`,