added support for dynamic nav bar buttons

example/src/screens/SecondTabScreen.js

@@ -2,7 +2,9 @@ import React, {
   Text,
   View,
   ScrollView,
-  TouchableOpacity
+  TouchableOpacity,
+  StyleSheet,
+  AlertIOS
 } from 'react-native';
 
 // important imports, the magic is here
@@ -12,15 +14,69 @@ import { Navigation, Screen } from 'react-native-navigation';
 class SecondTabScreen extends Screen {
   constructor(props) {
     super(props);
+    this.buttonsCounter = 0;
   }
   render() {
     return (
       <View style={{flex: 1, padding: 20}}>
-        <Text>Second Tab Screen</Text>
+
+        <TouchableOpacity onPress={ this.onChangeButtonsPress.bind(this) }>
+          <Text style={styles.button}>Change Buttons</Text>
+        </TouchableOpacity>
+
       </View>
     );
   }
+  onChangeButtonsPress() {
+    let buttons;
+    if (this.buttonsCounter % 3 == 0) {
+      buttons = [
+        {
+          title: 'Edit',
+          id: 'edit'
+        },
+        {
+          icon: require('../../img/navicon_add.png'),
+          id: 'add'
+        }
+      ];
+    } else if (this.buttonsCounter % 3 == 1) {
+      buttons = [{
+        title: 'Save',
+        id: 'save'
+      }];
+    } else {
+      buttons = [];
+    }
+    this.buttonsCounter++;
+
+    this.navigator.setButtons({
+      rightButtons: buttons,
+      animated: true
+    });
+  }
+  onNavigatorEvent(event) {
+    if (event.id == 'edit') {
+      AlertIOS.alert('NavBar', 'Dynamic Edit button pressed');
+    }
+    if (event.id == 'add') {
+      AlertIOS.alert('NavBar', 'Dynamic Add button pressed');
+    }
+    if (event.id == 'save') {
+      AlertIOS.alert('NavBar', 'Dynamic Save button pressed');
+    }
+  }
 }
 
+const styles = StyleSheet.create({
+  button: {
+    textAlign: 'center',
+    fontSize: 18,
+    marginBottom: 10,
+    marginTop:10,
+    color: 'blue'
+  }
+});
+
 // every screen must be registered with a unique name
 Navigation.registerScreen('example.SecondTabScreen', () => SecondTabScreen);

src/Screen.js

@@ -3,8 +3,9 @@ import platformSpecific from './platformSpecific';
 import Navigation from './Navigation';
 
 class Navigator {
-  constructor(navigatorID) {
+  constructor(navigatorID, screenInstance) {
     this.navigatorID = navigatorID;
+    this.screenInstance = screenInstance;
   }
   push(params = {}) {
     return platformSpecific.navigatorPush(this, params);
@@ -18,6 +19,10 @@ class Navigator {
   dismissModal(params = {}) {
     return Navigation.dismissModal(params);
   }
+  setButtons(params = {}) {
+    const navigatorEventID = this.screenInstance.listenOnNavigatorEvents();
+    return platformSpecific.navigatorSetButtons(this, navigatorEventID, params);
+  }
 }
 
 export default class Screen extends Component {
@@ -26,14 +31,21 @@ export default class Screen extends Component {
   constructor(props) {
     super(props);
     if (props.navigatorID) {
-      this.navigator = new Navigator(props.navigatorID);
+      this.navigator = new Navigator(props.navigatorID, this);
+    }
+    if (props.listenForEvents) {
+      this.listenOnNavigatorEvents();
     }
-    if (props.navigatorEventID) {
-      this.navigatorEventSubscription = NativeAppEventEmitter.addListener(props.navigatorEventID, (event) => this.onNavigatorEvent(event));
+  }
+  listenOnNavigatorEvents() {
+    if (!this.navigatorEventSubscription) {
+      this.navigatorEventSubscription = NativeAppEventEmitter.addListener(this.props.navigatorEventID, (event) => this.onNavigatorEvent(event));
     }
+    return this.props.navigatorEventID;
   }
   onNavigatorEvent(event) {}
   componentWillUnmount() {
+    this.navigator = undefined;
     if (this.navigatorEventSubscription) {
       this.navigatorEventSubscription.remove();
     }

src/platformSpecific.ios.js

@@ -41,7 +41,8 @@ function startTabBasedApp(params) {
                   passProps={{
                     navigatorID: navigatorID,
                     screenInstanceID: screenInstanceID,
-                    navigatorEventID: navigatorEventID
+                    navigatorEventID: navigatorEventID,
+                    listenForEvents: !!(navigatorButtons.leftButtons || navigatorButtons.rightButtons)
                   }}
                   style={navigatorStyle}
                   leftButtons={navigatorButtons.leftButtons}
@@ -87,7 +88,8 @@ function startSingleScreenApp(params) {
           passProps={{
             navigatorID: navigatorID,
             screenInstanceID: screenInstanceID,
-            navigatorEventID: navigatorEventID
+            navigatorEventID: navigatorEventID,
+            listenForEvents: !!(navigatorButtons.leftButtons || navigatorButtons.rightButtons)
           }}
           style={navigatorStyle}
           leftButtons={navigatorButtons.leftButtons}
@@ -110,18 +112,16 @@ function _mergeScreenSpecificSettings(screenID, screenInstanceID, params) {
   if (params.navigatorStyle) {
     Object.assign(navigatorStyle, params.navigatorStyle);
   }
-  let navigatorEventID;
+
+  const navigatorEventID = screenInstanceID + '_events';
   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;
     }
   }
@@ -143,6 +143,7 @@ function navigatorPush(navigator, params) {
   passProps.navigatorID = navigator.navigatorID;
   passProps.screenInstanceID = screenInstanceID;
   passProps.navigatorEventID = navigatorEventID;
+  passProps.listenForEvents = !!(navigatorButtons.leftButtons || navigatorButtons.rightButtons);
   Controllers.NavigationControllerIOS(navigator.navigatorID).push({
     title: params.title,
     component: params.screen,
@@ -161,6 +162,23 @@ function navigatorPop(navigator, params) {
   });
 }
 
+function navigatorSetButtons(navigator, navigatorEventID, params) {
+  if (params.leftButtons) {
+    const buttons = params.leftButtons.slice(); // clone
+    for (let i = 0 ; i < buttons.length ; i++) {
+      buttons[i].onPress = navigatorEventID;
+    }
+    Controllers.NavigationControllerIOS(navigator.navigatorID).setLeftButtons(buttons, params.animated);
+  }
+  if (params.rightButtons) {
+    const buttons = params.rightButtons.slice(); // clone
+    for (let i = 0 ; i < buttons.length ; i++) {
+      buttons[i].onPress = navigatorEventID;
+    }
+    Controllers.NavigationControllerIOS(navigator.navigatorID).setRightButtons(buttons, params.animated);
+  }
+}
+
 function showModal(params) {
   if (!params.screen) {
     console.error('showModal(params): params.screen is required');
@@ -180,6 +198,7 @@ function showModal(params) {
       passProps.navigatorID = navigatorID;
       passProps.screenInstanceID = screenInstanceID;
       passProps.navigatorEventID = navigatorEventID;
+      passProps.listenForEvents = !!(navigatorButtons.leftButtons || navigatorButtons.rightButtons);
       return (
         <NavigationControllerIOS
           id={navigatorID}
@@ -207,5 +226,6 @@ export default platformSpecific = {
   navigatorPush,
   navigatorPop,
   showModal,
-  dismissModal
+  dismissModal,
+  navigatorSetButtons
 }