update docs

docs/docs/Usage.md

@@ -39,7 +39,7 @@ Navigation.events().registerAppLaunchedListener(() => {
 
 ## Screen Lifecycle
 
-The `componentDidAppear` and `componentDidDisappear` functions are special React Native Navigation lifecycle callbacks that are called on the component when it appears and disappears. 
+The `componentDidAppear` and `componentDidDisappear` functions are special React Native Navigation lifecycle callbacks that are called on the component when it appears and disappears (after it was bounded using `Navigation.events().bindComponent(this)`). 
 
 Similar to React's `componentDidMount` and `componentWillUnmount`, what's different is that they represent whether the user can actually see the component in question -- and not just whether it's been mounted or not. Because of the way React Native Navigation optimizes performance, a component is actually `mounted` as soon as it's part of a layout -- but it is not always `visible` (for example, when another screen is `pushed` on top of it).
 
@@ -47,12 +47,13 @@ There are lots of use cases for these. For example: starting and stopping an ani
 
 > They are implemented by iOS's viewDidAppear/viewDidDisappear and Android's ViewTreeObserver visibility detection
 
-To use them, simply implement them in your component like any other React lifecycle function:
+To use them, simply implement them in your component like any other React lifecycle function, and bind the screen to the Navigation events module which will call all functions automatically:
 
 ```js
 class LifecycleScreenExample extends Component {
   constructor(props) {
     super(props);
+    Navigation.events().bindComponent(this);
     this.state = {
       text: 'nothing yet'
     };
@@ -66,6 +67,10 @@ class LifecycleScreenExample extends Component {
     alert('componentDidDisappear');
   }
 
+  navigationButtonPressed({buttonId}) {
+    // a navigation-based button (for example in the topBar) was clicked. See section on buttons.
+  }
+
   componentWillUnmount() {
     alert('componentWillUnmount');
   }

docs/docs/topBar-buttons.md

@@ -63,6 +63,11 @@ Navigation.push(this.props.componentId, {
 
 # Handling button press events
 
+Navigation sends events on button clicks, to which you can subscribe from anywhere using `Navigation.events().registerNavigationButtonPressedListener((event) => {})`.
+Additionally the component can listen to the button clicks just for its own buttons (via componentId) by using `events().bindComponent(this)`.
+This has to be called if you want the component to handle navigation events, such as navigationButtonPressed.
+Example:
+
 ```js
 class MyScreen extends Component {
   static get options() {
@@ -78,11 +83,11 @@ class MyScreen extends Component {
 
   constructor(props) {
     super(props);
-    Navigation.events().bindComponent(this); // bindComponent(this) has to be called if you want the component to handle navigation events, such as navigationButtonPressed
+    Navigation.events().bindComponent(this); // <== Will be automatically unregistered when unmounted
   }
 
   navigationButtonPressed({ buttonId }) {
-
+    // will be called when "buttonOne" is clicked
   }
 }
 ```