UISearchBar cannot display

[bolasblack]

My Obj-C Code:

 #import <UIKit/UIKit.h>
 #import "RCTViewManager.h"

 @interface RCTSearchBarTest : RCTViewManager
 @end

 @implementation RCTSearchBarTest

 RCT_EXPORT_MODULE()

 - (UISearchBar *)view
 {
 return [[UISearchBar alloc] init];
 }

 @end

My js code:

 var {requireNativeComponent} = React;
 var RCTSearchBarTest = requireNativeComponent('RCTSearchBarTest', null);
 var App = React.createClass({
 render: function() {
 <View>
 <RCTSearchBarTest />
 </View>
 }
 })

I learned it from React-Native's document: https://facebook.github.io/react-native/docs/nativecomponentsios.html

I tried Reveal, the UISearchBar is exist, but not displayed.

After I add code [searchBar setFrame:CGRectMake(0, 0, 375, 44)];, it works, but I lookup from React-Native's code I didn't found anything like this.

Actual code: CoffeeScript, Objective-C

Is anything I missed?

[umhan35]

Some native components are using ComponentHeight provided from Obj-C code.

Before anyone comes here, you can search ComponentHeight in this repo. The height for DatePicker and SegmentedControl is explicitly set just like what you did.

[bolasblack]

@umhan35 I tried the way you said, not work for me :(

[umhan35]

It will be something looks like this:

In your Obj-C code:

- (NSDictionary *)constantsToExport
{
 RCTSearchBar *view = [[RCTSearchBar alloc] init];
 return @{
 @"ComponentHeight": @(view.intrinsicContentSize.height),
 };
}

JS:

NativeModules = require('NativeModules');

...

style={{height: NativeModules.SearchBarManager.ComponentHeight}}

...

[bolasblack]

@umhan35 You can see my code: CoffeeScript, Objective-C, I have tried this :(

[umhan35]

Try my one. Mine works before I post it. Try to use the dirty inline style.

[bolasblack]

@umhan35 I tried just now, but nothing changed :'(

[brentvatne]

@umhan35's approach seems solid - check out the RCTDatePickerManager for an example of how this can be done

[bolasblack]

I found the reason:

The UIView and UISearchBarBackground frame size become 0, 0, 0, 0, then I changed my code:

- (UISearchBar *)view
{
 UISearchBar *searchBar = [[UISearchBar alloc] init];

 UIView *subUIView = searchBar.subviews.firstObject;
 CGRect screenRect = [[UIScreen mainScreen] bounds];
 [subUIView setFrame:CGRectMake(0, 0, screenRect.size.width, searchBar.intrinsicContentSize.height)];
 [subUIView.subviews.firstObject setFrame:CGRectMake(0, 0, screenRect.size.width, searchBar.intrinsicContentSize.height)];

 return searchBar;
}

The issue resolved.

@brentvatne Maybe it's a bug of react-native?

[umhan35]

It's not a bug. I've been using the solution I provided in my project.

Here are the obj-c and JS files. Check out the last method in RCTSearchBarManager.m. I thought I will open source this, but there are a lot of features provided by a search bar and I only use part of them.

RCTSearchBar.h

#import <UIKit/UIKit.h>

@class RCTEventDispatcher;

@interface RCTSearchBar : UISearchBar

- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER;

@end

RCTSearchBar.m

#import "RCTSearchBar.h"

#import "UIView+React.h"
#import "RCTEventDispatcher.h"

@interface RCTSearchBar() <UISearchBarDelegate>

@end

@implementation RCTSearchBar
{
 RCTEventDispatcher *_eventDispatcher;
}

- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher
{
 if ((self = [super initWithFrame:CGRectMake(0, 0, 1000, 44)])) {
 _eventDispatcher = eventDispatcher;
 self.delegate = self;
 }
 return self;
}


- (void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar
{
 [self setShowsCancelButton:YES animated:YES];

 [_eventDispatcher sendTextEventWithType:RCTTextEventTypeFocus
 reactTag:self.reactTag
 text:searchBar.text];
}

- (void)searchBar:(UISearchBar *)searchBar textDidChange:(NSString *)searchText
{
 [_eventDispatcher sendTextEventWithType:RCTTextEventTypeChange
 reactTag:self.reactTag
 text:searchText];
}

- (void)searchBarSearchButtonClicked:(UISearchBar *)searchBar
{
 NSDictionary *event = @{
 @"target": self.reactTag,
 @"button": @"search",
 @"searchText": searchBar.text
 };

 [_eventDispatcher sendInputEventWithName:@"topTap" body:event];
}


- (void)searchBarCancelButtonClicked:(UISearchBar *)searchBar
{
 self.text = @"";
 [self resignFirstResponder];
 [self setShowsCancelButton:NO animated:YES];

 NSDictionary *event = @{
 @"target": self.reactTag,
 @"button": @"cancel"
 };

 [_eventDispatcher sendInputEventWithName:@"topTap" body:event];
}


@end

RCTSearchBarManager.h

#import "RCTViewManager.h"

@interface RCTSearchBarManager : RCTViewManager

@end

RCTSearchBarManager.m

#import "RCTSearchBarManager.h"

#import "RCTSearchBar.h"

#import "RCTBridge.h"

@implementation RCTSearchBarManager

RCT_EXPORT_MODULE()

- (UIView *)view
{
// RCTSearchBar *searchBar = [[RCTSearchBar alloc] initWithFrame:CGRectMake(0, 0, 1000, 44)];

 RCTSearchBar *searchBar = [[RCTSearchBar alloc] initWithEventDispatcher:self.bridge.eventDispatcher];
// RCTSearchBar *searchBar = [[RCTSearchBar alloc] init];
//[[ UISearchDisplayController alloc] initWithSearchBar:searchBar contentsController:(UIViewController *)]

 return searchBar;
}

RCT_EXPORT_VIEW_PROPERTY(placeholder, NSString)
RCT_EXPORT_VIEW_PROPERTY(showsCancelButton, BOOL)

- (NSDictionary *)constantsToExport
{
 return @{
 @"ComponentHeight": @([self view].intrinsicContentSize.height),
 };
}

@end

search_bar.js

var NativeModules, PropTypes, RCTSearchBar, React, SearchBar;

React = require('react-native');

RCTSearchBar = React.requireNativeComponent('RCTSearchBar', null);

PropTypes = require('ReactPropTypes');

NativeModules = require('NativeModules');

SearchBar = React.createClass({
 propTypes: {
 placeholder: PropTypes.string,
 showsCancelButton: PropTypes.bool,
 onChange: PropTypes.func,
 onChangeText: PropTypes.func,
 onFocus: PropTypes.func,
 onSearchButtonPress: PropTypes.func,
 onCancelButtonPress: PropTypes.func
 },
 _onChange: function(e) {
 var base, base1;
 if (typeof (base = this.props).onChange === "function") {
 base.onChange(e);
 }
 return typeof (base1 = this.props).onChangeText === "function" ? base1.onChangeText(e.nativeEvent.text) : void 0;
 },
 _onPress: function(e) {
 var base, base1, button;
 button = e.nativeEvent.button;
 if (button === 'search') {
 return typeof (base = this.props).onSearchButtonPress === "function" ? base.onSearchButtonPress(e.nativeEvent.searchText) : void 0;
 } else if (button === 'cancel') {
 return typeof (base1 = this.props).onCancelButtonPress === "function" ? base1.onCancelButtonPress() : void 0;
 }
 },
 render: function() {
 return <RCTSearchBar
 style={{height: NativeModules.SearchBarManager.ComponentHeight}}
 onChange={this._onChange}
 onPress={this._onPress}
 {...this.props}
 />;
 }
});

module.exports = SearchBar;

//# sourceMappingURL=search_bar.js.map

[umhan35]

@bolasblack I just open sourced react-native-search-bar on npm. Check it out on GitHub.

[brentvatne]

Nice one @umhan35!