|  | @@ -11,6 +11,7 @@ App-wide support for 100% native navigation with an easy cross-platform interfac
 | 
	
		
			
			| 11 | 11 |  * [Screen API](#screen-api)
 | 
	
		
			
			| 12 | 12 |  * [Styling the navigator](#styling-the-navigator)
 | 
	
		
			
			| 13 | 13 |  * [Adding buttons to the navigator](#adding-buttons-to-the-navigator)
 | 
	
		
			
			|  | 14 | +* [Deep links](#deep-links)
 | 
	
		
			
			| 14 | 15 |  * [Release Notes](RELEASES.md)
 | 
	
		
			
			| 15 | 16 |  * [License](#license)
 | 
	
		
			
			| 16 | 17 |  
 | 
	
	
		
			
			|  | @@ -277,6 +278,16 @@ Dismiss the current modal.
 | 
	
		
			
			| 277 | 278 |  this.props.navigator.dismissModal({
 | 
	
		
			
			| 278 | 279 |    animationType: 'slide-down' // 'none' / 'slide-down' , dismiss animation for the modal (optional, default 'slide-down')
 | 
	
		
			
			| 279 | 280 |  });
 | 
	
		
			
			|  | 281 | +```
 | 
	
		
			
			|  | 282 | +
 | 
	
		
			
			|  | 283 | + * **handleDeepLink(params = {})**
 | 
	
		
			
			|  | 284 | +
 | 
	
		
			
			|  | 285 | +Trigger a deep link within the app. See [deep links](#deep-links) for more details about how screens can listen for deep link events.
 | 
	
		
			
			|  | 286 | +
 | 
	
		
			
			|  | 287 | +```js
 | 
	
		
			
			|  | 288 | +this.props.navigator.handleDeepLink({
 | 
	
		
			
			|  | 289 | +  link: "chats/2349823023" // the link string (required)
 | 
	
		
			
			|  | 290 | +});
 | 
	
		
			
			| 280 | 291 |  ```
 | 
	
		
			
			| 281 | 292 |  
 | 
	
		
			
			| 282 | 293 |   * **setOnNavigatorEvent(callback)**
 | 
	
	
		
			
			|  | @@ -317,7 +328,8 @@ Toggle the side menu drawer assuming you have one in your app.
 | 
	
		
			
			| 317 | 328 |  ```js
 | 
	
		
			
			| 318 | 329 |  this.props.navigator.toggleDrawer({
 | 
	
		
			
			| 319 | 330 |    side: 'left', // the side of the drawer since you can have two, 'left' / 'right'
 | 
	
		
			
			| 320 |  | -  animated: true // does the toggle have transition animation or does it happen immediately (optional)
 | 
	
		
			
			|  | 331 | +  animated: true, // does the toggle have transition animation or does it happen immediately (optional)
 | 
	
		
			
			|  | 332 | +  to: 'open' // optional, 'open' = open the drawer, 'closed' = close it, missing = the opposite of current state
 | 
	
		
			
			| 321 | 333 |  });
 | 
	
		
			
			| 322 | 334 |  ```
 | 
	
		
			
			| 323 | 335 |  
 | 
	
	
		
			
			|  | @@ -393,11 +405,13 @@ class FirstTabScreen extends Component {
 | 
	
		
			
			| 393 | 405 |      this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
 | 
	
		
			
			| 394 | 406 |    }
 | 
	
		
			
			| 395 | 407 |    onNavigatorEvent(event) { // this is the onPress handler for the two buttons together
 | 
	
		
			
			| 396 |  | -    if (event.id == 'edit') { // this is the same id field from the static navigatorButtons definition
 | 
	
		
			
			| 397 |  | -      AlertIOS.alert('NavBar', 'Edit button pressed');
 | 
	
		
			
			| 398 |  | -    }
 | 
	
		
			
			| 399 |  | -    if (event.id == 'add') {
 | 
	
		
			
			| 400 |  | -      AlertIOS.alert('NavBar', 'Add button pressed');
 | 
	
		
			
			|  | 408 | +    if (event.type == 'NavBarButtonPress') { // this is the event type for button presses
 | 
	
		
			
			|  | 409 | +      if (event.id == 'edit') { // this is the same id field from the static navigatorButtons definition
 | 
	
		
			
			|  | 410 | +        AlertIOS.alert('NavBar', 'Edit button pressed');
 | 
	
		
			
			|  | 411 | +      }
 | 
	
		
			
			|  | 412 | +      if (event.id == 'add') {
 | 
	
		
			
			|  | 413 | +        AlertIOS.alert('NavBar', 'Add button pressed');
 | 
	
		
			
			|  | 414 | +      }
 | 
	
		
			
			| 401 | 415 |      }
 | 
	
		
			
			| 402 | 416 |    }
 | 
	
		
			
			| 403 | 417 |    render() {
 | 
	
	
		
			
			|  | @@ -421,6 +435,48 @@ class FirstTabScreen extends Component {
 | 
	
		
			
			| 421 | 435 |  }
 | 
	
		
			
			| 422 | 436 |  ```
 | 
	
		
			
			| 423 | 437 |  
 | 
	
		
			
			|  | 438 | +## Deep links
 | 
	
		
			
			|  | 439 | +
 | 
	
		
			
			|  | 440 | +Deep links are strings which represent internal app paths/routes. They commonly appear on push notification payloads to control which section of the app should be displayed when the notification is clicked. For example, in a chat app, clicking on the notification should open the relevant conversation on the "chats" tab.
 | 
	
		
			
			|  | 441 | +
 | 
	
		
			
			|  | 442 | +Another use-case for deep links is when one screen wants to control what happens in another sibling screen. Normally, a screen can only push/pop from its own stack, it cannot access the navigation stack of a sibling tab for example. Returning to our chat app example, assume that by clicking on a contact in the "contacts" tab we want to open the relevant conversation in the "chats" tab. Since the tabs are siblings, you can achieve this behavior by triggering a deep link:
 | 
	
		
			
			|  | 443 | +
 | 
	
		
			
			|  | 444 | +```js
 | 
	
		
			
			|  | 445 | +onContactSelected(contactID) {
 | 
	
		
			
			|  | 446 | +  this.props.navigator.handleDeepLink({
 | 
	
		
			
			|  | 447 | +    link: 'chats/' + contactID
 | 
	
		
			
			|  | 448 | +  });
 | 
	
		
			
			|  | 449 | +}
 | 
	
		
			
			|  | 450 | +```
 | 
	
		
			
			|  | 451 | +
 | 
	
		
			
			|  | 452 | +> Tip: Deep links are also the recommended way to handle side drawer actions. Since the side drawer screen is a sibling to the rest of the app, it can control the other screens by triggering deep links.
 | 
	
		
			
			|  | 453 | +
 | 
	
		
			
			|  | 454 | +#### Handling deep links
 | 
	
		
			
			|  | 455 | +
 | 
	
		
			
			|  | 456 | +Every deep link event is broadcasted to all screens. A screen can listen to these events by defining a handler using `setOnNavigatorEvent` (much like listening for button events). Using this handler, the screen can filter links directed to it by parsing the link string and act upon any relevant links found.
 | 
	
		
			
			|  | 457 | +
 | 
	
		
			
			|  | 458 | +```js
 | 
	
		
			
			|  | 459 | +export default class SecondTabScreen extends Component {
 | 
	
		
			
			|  | 460 | +  constructor(props) {
 | 
	
		
			
			|  | 461 | +    super(props);
 | 
	
		
			
			|  | 462 | +    // if you want to listen on navigator events, set this up
 | 
	
		
			
			|  | 463 | +    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
 | 
	
		
			
			|  | 464 | +  }
 | 
	
		
			
			|  | 465 | +  onNavigatorEvent(event) {
 | 
	
		
			
			|  | 466 | +    // handle a deep link
 | 
	
		
			
			|  | 467 | +    if (event.type == 'DeepLink') {
 | 
	
		
			
			|  | 468 | +      const parts = event.link.split('/');
 | 
	
		
			
			|  | 469 | +      if (parts[0] == 'tab2') {
 | 
	
		
			
			|  | 470 | +        // handle the link somehow, usually run a this.props.navigator command
 | 
	
		
			
			|  | 471 | +      }
 | 
	
		
			
			|  | 472 | +    }
 | 
	
		
			
			|  | 473 | +  }
 | 
	
		
			
			|  | 474 | +```
 | 
	
		
			
			|  | 475 | +
 | 
	
		
			
			|  | 476 | +#### Deep link string format
 | 
	
		
			
			|  | 477 | +
 | 
	
		
			
			|  | 478 | +There is no specification for the format of deep links. Since you're implementing the parsing logic in your handlers, you can use any format you wish.
 | 
	
		
			
			|  | 479 | +
 | 
	
		
			
			| 424 | 480 |  ## License
 | 
	
		
			
			| 425 | 481 |  
 | 
	
		
			
			| 426 | 482 |  The MIT License.
 |