Merge pull request react-navigation#211 from slorber/navigation-events-doc

Add <NavigationEvents/> to doc

Author: brentvatne

docs/navigation-events.md

@@ -0,0 +1,41 @@
+---
+id: navigation-events
+title: NavigationEvents reference
+sidebar_label: NavigationEvents
+---
+
+`NavigationEvents` is a React component providing a declarative API to subscribe to navigation events. It will subscribe to navigation events on mount, and unsubscribe on unmount.
+
+### Component props
+
+* `navigation` - navigation props (optional, defaults to reading from React context)
+* `onWillFocus` - event listener
+* `onDidFocus` - event listener
+* `onWillBlur` - event listener
+* `onDidBlur` - event listener
+
+The event listener is the same as the imperative [`navigation.addListener(...)`](navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle) API.
+
+### Example
+
+```jsx harmony
+import React from 'react';
+import { View } from 'react-native';
+import { NavigationEvents } from 'react-navigation';
+
+const MyScreen = () => (
+  <View>
+    <NavigationEvents
+      onWillFocus={payload => console.log('will focus',payload)}
+      onDidFocus={payload => console.log('did focus',payload)}
+      onWillBlur={payload => console.log('will blur',payload)}
+      onDidBlur={payload => console.log('did blur',payload)}
+    />
+    {/* 
+      Your view code
+    */}
+  </View>
+);
+
+export default MyScreen;
+```

docs/navigation-prop.md

@@ -138,6 +138,8 @@ The JSON payload:
 };
 ```
 
+You can also subscribe to navigation events declaratively with the [`<NavigationEvents/>`](navigation-events.html) component.
+
 ### `isFocused` - Query the focused state of the screen
 
 Returns `true` if the screen is focused and `false` otherwise.

website/i18n/en.json

@@ -73,6 +73,8 @@
     "Moving between screens": "Moving between screens",
     "navigation-actions": "NavigationActions reference",
     "NavigationActions": "NavigationActions",
+    "navigation-events": "NavigationEvents reference",
+    "NavigationEvents": "NavigationEvents",
     "navigation-key": "Using the navigation key",
     "Using the navigation key": "Using the navigation key",
     "navigation-options-resolution": "Navigation options resolution",

website/sidebars.json

@@ -37,7 +37,7 @@
       "navigation-views",
       "transitioner"
     ],
-    "Community Navigators": [      
+    "Community Navigators": [
       "community-fluidtransitions"
     ],
     "Meta": ["pitch", "alternatives", "contributing"]
@@ -56,7 +56,8 @@
       "material-bottom-tab-navigator",
       "material-top-tab-navigator",
       "with-navigation",
-      "with-navigation-focus"
+      "with-navigation-focus",
+      "navigation-events"
     ]
   }
 }