Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Nav] Add support for bar button icons and left buttons #263

Closed
wants to merge 1 commit into from
Closed

[Nav] Add support for bar button icons and left buttons #263

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions Examples/UIExplorer/ImageMocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,8 @@ declare module 'image!uie_thumb_selected' {
declare var uri: string;
declare var isStatic: boolean;
}

declare module 'image!NavBarButtonPlus' {
declare var uri: string;
declare var isStatic: boolean;
}
25 changes: 25 additions & 0 deletions Examples/UIExplorer/NavigatorIOSExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ var React = require('react-native');
var ViewExample = require('./ViewExample');
var createExamplePage = require('./createExamplePage');
var {
AlertIOS,
PixelRatio,
ScrollView,
StyleSheet,
Expand Down Expand Up @@ -92,6 +93,30 @@ var NavigatorIOSExample = React.createClass({
}
});
})}
{this._renderRow('Custom Left & Right Icons', () => {
this.props.navigator.push({
title: NavigatorIOSExample.title,
component: EmptyPage,
leftButtonTitle: 'Custom Left',
onLeftButtonPress: () => this.props.navigator.pop(),
rightButtonImageSource: require('image!NavBarButtonPlus'),
onRightButtonPress: () => {
AlertIOS.alert(
'Bar Button Action',
'Recognized a tap on the bar button icon',
[
{
text: 'OK',
onPress: () => console.log('Tapped OK'),
},
]
);
},
passProps: {
text: 'This page has an icon for the right button in the nav bar',
}
});
})}
{this._renderRow('Pop', () => {
this.props.navigator.pop();
})}
Expand Down
21 changes: 21 additions & 0 deletions Examples/UIExplorer/UIExplorer/Images.xcassets/NavBarButtonPlus.imageset/Contents.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
{
"images" : [
{
"idiom" : "universal",
"scale" : "1x"
},
{
"idiom" : "universal",
"scale" : "2x"
},
{
"idiom" : "universal",
"scale" : "3x",
"filename" : "[email protected]"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
Binary file added ...er/UIExplorer/Images.xcassets/NavBarButtonPlus.imageset/[email protected]
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 48 additions & 1 deletion Libraries/Components/Navigation/NavigatorIOS.ios.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
'use strict';

var EventEmitter = require('EventEmitter');
var Image = require('Image');
var React = require('React');
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
var RCTNavigatorManager = require('NativeModules').NavigatorManager;
Expand Down Expand Up @@ -47,11 +48,16 @@ var RCTNavigatorItem = createReactIOSNativeComponentClass({
// NavigatorIOS does not use them all, because some are problematic
title: true,
barTintColor: true,
leftButtonImageName: true,
leftButtonTitle: true,
onNavLeftButtonTap: true,
rightButtonImageName: true,
rightButtonTitle: true,
onNavRightButtonTap: true,
backButtonImageName: true,
backButtonTitle: true,
tintColor: true,
navigationBarHidden: true,
backButtonTitle: true,
titleTextColor: true,
style: true,
},
Expand Down Expand Up @@ -79,7 +85,12 @@ type Route = {
title: string;
passProps: Object;
backButtonTitle: string;
backButtonImageSource: Object;
leftButtonTitle: string;
leftButtonImageSource: Object;
onLeftButtonPress: Function;
rightButtonTitle: string;
rightButtonImageSource: Object;
onRightButtonPress: Function;
wrapperStyle: any;
};
Expand Down Expand Up @@ -212,13 +223,40 @@ var NavigatorIOS = React.createClass({
*/
passProps: PropTypes.object,

/**
* If set, the left header button image will appear with this source. Note
* that this doesn't apply for the header of the current view, but the
* ones of the views that are pushed afterward.
*/
backButtonImageSource: Image.propTypes.source,

/**
* If set, the left header button will appear with this name. Note that
* this doesn't apply for the header of the current view, but the ones
* of the views that are pushed afterward.
*/
backButtonTitle: PropTypes.string,

/**
* If set, the left header button image will appear with this source
*/
leftButtonImageSource: Image.propTypes.source,

/**
* If set, the left header button will appear with this name
*/
leftButtonTitle: PropTypes.string,

/**
* Called when the left header button is pressed
*/
onLeftButtonPress: PropTypes.func,

/**
* If set, the right header button image will appear with this source
*/
rightButtonImageSource: Image.propTypes.source,

/**
* If set, the right header button will appear with this name
*/
Expand Down Expand Up @@ -560,7 +598,12 @@ var NavigatorIOS = React.createClass({
this.props.itemWrapperStyle,
route.wrapperStyle
]}
backButtonImageName={this._imageNameFromSource(route.backButtonImageSource)}
backButtonTitle={route.backButtonTitle}
leftButtonImageName={this._imageNameFromSource(route.leftButtonImageSource)}
leftButtonTitle={route.leftButtonTitle}
onNavLeftButtonTap={route.onLeftButtonPress}
rightButtonImageName={this._imageNameFromSource(route.rightButtonImageSource)}
rightButtonTitle={route.rightButtonTitle}
onNavRightButtonTap={route.onRightButtonPress}
navigationBarHidden={this.props.navigationBarHidden}
Expand All @@ -577,6 +620,10 @@ var NavigatorIOS = React.createClass({
);
},

_imageNameFromSource: function(source: ?Object) {
return source ? source.uri : undefined;
},

renderNavigationStackItems: function() {
var shouldRecurseToNavigator =
this.state.makingNavigatorRequest ||
Expand Down
6 changes: 6 additions & 0 deletions React/Modules/RCTUIManager.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1159,6 +1159,12 @@ - (NSDictionary *)customBubblingEventTypes
@"captured": @"onNavigationCompleteCapture"
}
},
@"topNavLeftButtonTap": @{
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should migrate these out of RCTUIManager at some point - they should probably be regular event emitter stuff.

@"phasedRegistrationNames": @{
@"bubbled": @"onNavLeftButtonTap",
@"captured": @"onNavLefttButtonTapCapture"
}
},
@"topNavRightButtonTap": @{
@"phasedRegistrationNames": @{
@"bubbled": @"onNavRightButtonTap",
Expand Down
4 changes: 4 additions & 0 deletions React/Views/RCTNavItem.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,11 @@
@interface RCTNavItem : UIView

@property (nonatomic, copy) NSString *title;
@property (nonatomic, copy) UIImage *leftButtonImage;
@property (nonatomic, copy) NSString *leftButtonTitle;
@property (nonatomic, copy) UIImage *rightButtonImage;
@property (nonatomic, copy) NSString *rightButtonTitle;
@property (nonatomic, copy) UIImage *backButtonImage;
@property (nonatomic, copy) NSString *backButtonTitle;
@property (nonatomic, assign) BOOL navigationBarHidden;
@property (nonatomic, copy) UIColor *tintColor;
Expand Down
13 changes: 13 additions & 0 deletions React/Views/RCTNavItemManager.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,24 @@ - (UIView *)view
}

RCT_EXPORT_VIEW_PROPERTY(title, NSString)
RCT_EXPORT_VIEW_PROPERTY(leftButtonTitle, NSString);
RCT_EXPORT_VIEW_PROPERTY(rightButtonTitle, NSString);
RCT_EXPORT_VIEW_PROPERTY(backButtonTitle, NSString);
RCT_EXPORT_VIEW_PROPERTY(navigationBarHidden, BOOL);
RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor);
RCT_EXPORT_VIEW_PROPERTY(barTintColor, UIColor);
RCT_EXPORT_VIEW_PROPERTY(titleTextColor, UIColor);
RCT_CUSTOM_VIEW_PROPERTY(leftButtonImageName, UIImage, RCTNavItem)
{
view.leftButtonImage = json ? [RCTConvert UIImage:json] : defaultView.leftButtonImage;
}
RCT_CUSTOM_VIEW_PROPERTY(rightButtonImageName, UIImage, RCTNavItem)
{
view.rightButtonImage = json ? [RCTConvert UIImage:json] : defaultView.rightButtonImage;
}
RCT_CUSTOM_VIEW_PROPERTY(backButtonImageName, UIImage, RCTNavItem)
{
view.backButtonImage = json ? [RCTConvert UIImage:json] : defaultView.backButtonImage;
}

@end
46 changes: 39 additions & 7 deletions React/Views/RCTWrapperViewController.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,17 +86,43 @@ - (void)viewWillAppear:(BOOL)animated
[bar setTitleTextAttributes:@{NSForegroundColorAttributeName : _navItem.titleTextColor}];
}

if (_navItem.rightButtonTitle.length > 0) {
if (_navItem.leftButtonImage) {
self.navigationItem.leftBarButtonItem =
[[UIBarButtonItem alloc] initWithImage:_navItem.leftButtonImage
style:UIBarButtonItemStylePlain
target:self
action:@selector(handleNavLeftButtonTapped)];
} else if (_navItem.leftButtonTitle.length > 0) {
self.navigationItem.leftBarButtonItem =
[[UIBarButtonItem alloc] initWithTitle:_navItem.leftButtonTitle
style:UIBarButtonItemStylePlain
target:self
action:@selector(handleNavLeftButtonTapped)];
}

if (_navItem.rightButtonImage) {
self.navigationItem.rightBarButtonItem =
[[UIBarButtonItem alloc] initWithTitle:_navItem.rightButtonTitle
style:UIBarButtonItemStyleDone
target:self
action:@selector(handleNavRightButtonTapped)];
[[UIBarButtonItem alloc] initWithImage:_navItem.rightButtonImage
style:UIBarButtonItemStylePlain
target:self
action:@selector(handleNavRightButtonTapped)];
} else if (_navItem.rightButtonTitle.length > 0) {
self.navigationItem.rightBarButtonItem =
[[UIBarButtonItem alloc] initWithTitle:_navItem.rightButtonTitle
style:UIBarButtonItemStyleDone
target:self
action:@selector(handleNavRightButtonTapped)];
}

if (_navItem.backButtonTitle.length > 0) {
if (_navItem.backButtonImage) {
self.navigationItem.backBarButtonItem =
[[UIBarButtonItem alloc] initWithImage:_navItem.backButtonImage
style:UIBarButtonItemStylePlain
target:nil
action:nil];
} else if (_navItem.backButtonTitle.length > 0) {
self.navigationItem.backBarButtonItem =
[[UIBarButtonItem alloc] initWithTitle:_navItem.backButtonTitle
[[UIBarButtonItem alloc] initWithTitle:_navItem.backButtonTitle
style:UIBarButtonItemStylePlain
target:nil
action:nil];
Expand All @@ -114,6 +140,12 @@ - (void)loadView
self.view = _wrapperView;
}

- (void)handleNavLeftButtonTapped
{
[_eventDispatcher sendInputEventWithName:@"topNavLeftButtonTap"
body:@{@"target":_navItem.reactTag}];
}

- (void)handleNavRightButtonTapped
{
[_eventDispatcher sendInputEventWithName:@"topNavRightButtonTap"
Expand Down