|  | @@ -252,7 +252,7 @@ All supported styles are defined [here](https://github.com/wix/react-native-cont
 | 
	
		
			
			| 252 | 252 |  
 | 
	
		
			
			| 253 | 253 |  #### Screen-specific style example
 | 
	
		
			
			| 254 | 254 |  
 | 
	
		
			
			| 255 |  | -Define a screen-specific style by adding `static navigatorStyle = {};` to the Screen definition.
 | 
	
		
			
			|  | 255 | +Define a screen-specific style by adding `static navigatorStyle = {...};` to the Screen definition.
 | 
	
		
			
			| 256 | 256 |  
 | 
	
		
			
			| 257 | 257 |  ```js
 | 
	
		
			
			| 258 | 258 |  class StyledScreen extends Screen {
 | 
	
	
		
			
			|  | @@ -270,3 +270,50 @@ class StyledScreen extends Screen {
 | 
	
		
			
			| 270 | 270 |       );
 | 
	
		
			
			| 271 | 271 |    }
 | 
	
		
			
			| 272 | 272 |  ```
 | 
	
		
			
			|  | 273 | +
 | 
	
		
			
			|  | 274 | +## Adding buttons to the navigator
 | 
	
		
			
			|  | 275 | +
 | 
	
		
			
			|  | 276 | +Nav bar buttons can be defined per-screen by adding `static navigatorButtons = {...};` on the Screen definition. Handle onPress events for the buttons by overriding the Screen's `onNavigatorEvent(event)` method.
 | 
	
		
			
			|  | 277 | +
 | 
	
		
			
			|  | 278 | +#### Buttons object format
 | 
	
		
			
			|  | 279 | +
 | 
	
		
			
			|  | 280 | +```js
 | 
	
		
			
			|  | 281 | +{
 | 
	
		
			
			|  | 282 | +  rightButtons: [], // buttons for the right side of the nav bar (optional)
 | 
	
		
			
			|  | 283 | +  leftButtons: [] // buttons for the left side of the nav bar (optional)
 | 
	
		
			
			|  | 284 | +}
 | 
	
		
			
			|  | 285 | +```
 | 
	
		
			
			|  | 286 | +
 | 
	
		
			
			|  | 287 | +#### Screen-specific buttons example
 | 
	
		
			
			|  | 288 | +
 | 
	
		
			
			|  | 289 | +```js
 | 
	
		
			
			|  | 290 | +class FirstTabScreen extends Screen {
 | 
	
		
			
			|  | 291 | +  static navigatorButtons = {
 | 
	
		
			
			|  | 292 | +    rightButtons: [
 | 
	
		
			
			|  | 293 | +      {
 | 
	
		
			
			|  | 294 | +        title: 'Edit', // for a textual button, provide the button title (label)
 | 
	
		
			
			|  | 295 | +        id: 'edit' // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
 | 
	
		
			
			|  | 296 | +      },
 | 
	
		
			
			|  | 297 | +      {
 | 
	
		
			
			|  | 298 | +        icon: require('../../img/navicon_add.png'), // for icon button, provide the local image asset name
 | 
	
		
			
			|  | 299 | +        id: 'add' // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
 | 
	
		
			
			|  | 300 | +      }
 | 
	
		
			
			|  | 301 | +    ]
 | 
	
		
			
			|  | 302 | +  };
 | 
	
		
			
			|  | 303 | +  constructor(props) {
 | 
	
		
			
			|  | 304 | +    super(props);
 | 
	
		
			
			|  | 305 | +  }
 | 
	
		
			
			|  | 306 | +  onNavigatorEvent(event) { // this is the onPress handler for the two buttons together
 | 
	
		
			
			|  | 307 | +    if (event.id == 'edit') { // this is the same id field from the static navigatorButtons definition
 | 
	
		
			
			|  | 308 | +      AlertIOS.alert('NavBar', 'Edit button pressed');
 | 
	
		
			
			|  | 309 | +    }
 | 
	
		
			
			|  | 310 | +    if (event.id == 'add') {
 | 
	
		
			
			|  | 311 | +      AlertIOS.alert('NavBar', 'Add button pressed');
 | 
	
		
			
			|  | 312 | +    }
 | 
	
		
			
			|  | 313 | +  }
 | 
	
		
			
			|  | 314 | +  render() {
 | 
	
		
			
			|  | 315 | +    return (
 | 
	
		
			
			|  | 316 | +      <View style={{flex: 1}}>...</View>
 | 
	
		
			
			|  | 317 | +     );
 | 
	
		
			
			|  | 318 | +  }
 | 
	
		
			
			|  | 319 | +```
 |