added nav bar button support

example/src/screens/FirstTabScreen.js

@@ -3,7 +3,8 @@ import React, {
   View,
   ScrollView,
   TouchableOpacity,
-  StyleSheet
+  StyleSheet,
+  AlertIOS
 } from 'react-native';
 
 // important imports, the magic is here
@@ -16,9 +17,29 @@ import './ModalScreen';
 
 // instead of React.Component, we extend Screen (imported above)
 class FirstTabScreen extends Screen {
+  static navigatorButtons = {
+    rightButtons: [
+      {
+        title: 'Edit',
+        id: 'edit'
+      },
+      {
+        icon: require('../../img/navicon_add.png'),
+        id: 'add'
+      }
+    ]
+  };
   constructor(props) {
     super(props);
   }
+  onNavigatorEvent(event) {
+    if (event.id == 'edit') {
+      AlertIOS.alert('NavBar', 'Edit button pressed');
+    }
+    if (event.id == 'add') {
+      AlertIOS.alert('NavBar', 'Add button pressed');
+    }
+  }
   render() {
     return (
       <View style={{flex: 1, padding: 20}}>

example/src/screens/StyledScreen.js

@@ -4,7 +4,8 @@ import React, {
   ScrollView,
   TouchableOpacity,
   Image,
-  StyleSheet
+  StyleSheet,
+  AlertIOS
 } from 'react-native';
 
 // important imports, the magic is here
@@ -21,6 +22,12 @@ class StyledScreen extends Screen {
     drawUnderTabBar: true,
     navBarTranslucent: true
   };
+  static navigatorButtons = {
+    rightButtons: [{
+      icon: require('../../img/navicon_edit.png'),
+      id: 'compose'
+    }]
+  };
   constructor(props) {
     super(props);
   }
@@ -49,6 +56,11 @@ class StyledScreen extends Screen {
       </ScrollView>
     );
   }
+  onNavigatorEvent(event) {
+    if (event.id == 'compose') {
+      AlertIOS.alert('NavBar', 'Compose button pressed');
+    }
+  }
   onPushPress() {
     this.navigator.push({
       title: "More",

src/Screen.js

@@ -1,4 +1,4 @@
-import { Component } from 'react-native';
+import { Component, NativeAppEventEmitter } from 'react-native';
 import platformSpecific from './platformSpecific';
 import Navigation from './Navigation';
 
@@ -22,10 +22,20 @@ class Navigator {
 
 export default class Screen extends Component {
   static navigatorStyle = {};
+  static navigatorButtons = {};
   constructor(props) {
     super(props);
     if (props.navigatorID) {
       this.navigator = new Navigator(props.navigatorID);
     }
+    if (props.navigatorEventID) {
+      this.navigatorEventSubscription = NativeAppEventEmitter.addListener(props.navigatorEventID, (event) => this.onNavigatorEvent(event));
+    }
+  }
+  onNavigatorEvent(event) {}
+  componentWillUnmount() {
+    if (this.navigatorEventSubscription) {
+      this.navigatorEventSubscription.remove();
+    }
   }
 }

src/platformSpecific.ios.js

@@ -22,19 +22,30 @@ function startTabBasedApp(params) {
         {
           params.tabs.map(function(tab, index) {
             const navigatorID = controllerID + '_nav' + index;
+            const screenInstanceID = utils.getRandomId();
             if (!tab.screen) {
               console.error('startTabBasedApp(params): every tab must include a screen property, take a look at tab#' + (index+1));
               return;
             }
-            const { navigatorStyle } = _mergeScreenSpecificSettings(tab.screen, tab);
+            const {
+              navigatorStyle,
+              navigatorButtons,
+              navigatorEventID
+            } = _mergeScreenSpecificSettings(tab.screen, screenInstanceID, tab);
             return (
               <TabBarControllerIOS.Item {...tab} title={tab.label}>
                 <NavigationControllerIOS
                   id={navigatorID}
                   title={tab.title}
                   component={tab.screen}
-                  passProps={{navigatorID: navigatorID}}
+                  passProps={{
+                    navigatorID: navigatorID,
+                    screenInstanceID: screenInstanceID,
+                    navigatorEventID: navigatorEventID
+                  }}
                   style={navigatorStyle}
+                  leftButtons={navigatorButtons.leftButtons}
+                  rightButtons={navigatorButtons.rightButtons}
                 />
               </TabBarControllerIOS.Item>
             );
@@ -58,18 +69,29 @@ function startSingleScreenApp(params) {
     render: function() {
       const screen = params.screen;
       const navigatorID = controllerID + '_nav';
+      const screenInstanceID = utils.getRandomId();
       if (!screen.screen) {
         console.error('startSingleScreenApp(params): screen must include a screen property');
         return;
       }
-      const { navigatorStyle } = _mergeScreenSpecificSettings(screen.screen, screen);
+      const {
+        navigatorStyle,
+        navigatorButtons,
+        navigatorEventID
+      } = _mergeScreenSpecificSettings(screen.screen, screenInstanceID, screen);
       return (
         <NavigationControllerIOS
           id={navigatorID}
           title={screen.title}
           component={screen.screen}
-          passProps={{navigatorID: navigatorID}}
+          passProps={{
+            navigatorID: navigatorID,
+            screenInstanceID: screenInstanceID,
+            navigatorEventID: navigatorEventID
+          }}
           style={navigatorStyle}
+          leftButtons={navigatorButtons.leftButtons}
+          rightButtons={navigatorButtons.rightButtons}
         />
       );
     }
@@ -78,7 +100,7 @@ function startSingleScreenApp(params) {
   ControllerRegistry.setRootController(controllerID);
 }
 
-function _mergeScreenSpecificSettings(screenID, params) {
+function _mergeScreenSpecificSettings(screenID, screenInstanceID, params) {
   const screenClass = Navigation.getRegisteredScreen(screenID);
   if (!screenClass) {
     console.error('Cannot create screen ' + screenID + '. Are you it was registered with Navigation.registerScreen?');
@@ -88,7 +110,22 @@ function _mergeScreenSpecificSettings(screenID, params) {
   if (params.navigatorStyle) {
     Object.assign(navigatorStyle, params.navigatorStyle);
   }
-  return { navigatorStyle };
+  let navigatorEventID;
+  const navigatorButtons = Object.assign({}, screenClass.navigatorButtons);
+  if (navigatorButtons.leftButtons) {
+    for (let i = 0 ; i < navigatorButtons.leftButtons.length ; i++) {
+      navigatorEventID = screenInstanceID + '_events';
+      navigatorButtons.leftButtons[i].onPress = navigatorEventID;
+    }
+  }
+  if (navigatorButtons.rightButtons) {
+    navigatorEventID = screenInstanceID + '_events';
+    for (let i = 0 ; i < navigatorButtons.rightButtons.length ; i++) {
+      navigatorEventID = screenInstanceID + '_events';
+      navigatorButtons.rightButtons[i].onPress = navigatorEventID;
+    }
+  }
+  return { navigatorStyle, navigatorButtons, navigatorEventID };
 }
 
 function navigatorPush(navigator, params) {
@@ -96,16 +133,25 @@ function navigatorPush(navigator, params) {
     console.error('Navigator.push(params): params.screen is required');
     return;
   }
-  const { navigatorStyle } = _mergeScreenSpecificSettings(params.screen, params);
-  const passProps = params.passProps || {};
+  const screenInstanceID = utils.getRandomId();
+  const {
+    navigatorStyle,
+    navigatorButtons,
+    navigatorEventID
+  } = _mergeScreenSpecificSettings(params.screen, screenInstanceID, params);
+  const passProps = Object.assign({}, params.passProps);
   passProps.navigatorID = navigator.navigatorID;
+  passProps.screenInstanceID = screenInstanceID;
+  passProps.navigatorEventID = navigatorEventID;
   Controllers.NavigationControllerIOS(navigator.navigatorID).push({
     title: params.title,
     component: params.screen,
     animated: params.animated,
     passProps: passProps,
     style: navigatorStyle,
-    backButtonTitle: params.backButtonTitle
+    backButtonTitle: params.backButtonTitle,
+    leftButtons: navigatorButtons.leftButtons,
+    rightButtons: navigatorButtons.rightButtons
   });
 }