added events doc

docs/docs/events.md

@@ -0,0 +1,65 @@
+# Events
+
+## onAppLaunched
+
+This event is called once the app is launched. Initialise the app with the layout you want. This creates the native layout hierarchy, loads the react components into the component by name, after which the app is ready for user interaction.
+
+```js
+Navigation.events().onAppLaunched(() => {
+
+});
+```
+
+## componentDidAppear
+
+Listen globally to all components `componentDidAppear` events
+```js
+Navigation.events().componentDidAppear((componentId, componentName) => {
+
+});
+```
+
+Listen for component
+```js
+class MyComponent extends Component {
+  componentDidAppear() {
+    
+  }
+}
+```
+
+## componentDidDisappear
+
+Listen globally to all components `componentDidDisappear` events
+```js
+Navigation.events().componentDidDisappear((componentId, componentName) => {
+
+});
+```
+
+Listen for component
+```js
+class MyComponent extends Component {
+  componentDidDisappear() {
+    
+  }
+}
+```
+
+## onNavigationButtonPressed
+
+Listen globally to all `onNavigationButtonPressed` events
+```js
+Navigation.events().onNavigationButtonPressed((buttonId) => {
+
+});
+```
+
+Listen in component
+```js
+class MyComponent extends Component {
+  onNavigationButtonPressed(buttonId) {
+    
+  }
+}
+```

docs/docs/layout-types.md

@@ -27,6 +27,7 @@ Component layout holds your react component.
 
 ```js
 const component = {
+  id: 'comopnent1', // Optional, Auto generated if empty
   name: 'Your registered component name',
   options: {},
   passProps: {

docs/docs/screen-api.md

@@ -1,6 +1,6 @@
 # Screen API
 
-This API is relevant when in a screen component context - it allows a screen to push other screens, pop screens, change its navigator style, etc. Access to this API is available through the `Navigation` module and expect to receive the current presented component id from screen `props.componentId`.\
+This API is relevant when in a screen component context - it allows a screen to push other screens, pop screens, change its navigator style, etc. Access to this API is available through the `Navigation` module and expect to receive the current presented component id from screen `props.componentId`.
 Component must initialize in stack in order to push another component.
 
 ## push(componentId, layout)
@@ -105,31 +105,6 @@ Dismiss all the current modals at the same time.
 Navigation.dismissAllModals();
 ```
 
-## showOverlay(layout = {})
-
-Show component as overlay.
-
-```js
-Navigation.showOverlay({
-  component: {
-    name: 'example.Overlay',
-    options: {
-      overlay: {
-        interceptTouchOutside: true
-      }
-    }
-  }
-});
-```
-
-## dismissOverlay(componentId)
-
-Dismiss overlay matching the overlay componentId.
-
-```js
-Navigation.dismissOverlay(this.props.componentId);
-```
-
 <!-- ## handleDeepLink(params = {})
 
 Trigger a deep link within the app. See [deep links](https://wix.github.io/react-native-navigation/#/deep-links) for more details about how screens can listen for deep link events.

docs/docs/styling.md

@@ -30,7 +30,7 @@ export default class StyledScreen extends Component {
   }
 ```
 
-## Enabling persistent styling properties on iOS
+## Enabling persistent styling properties
 In v2 we added `setDefaultOptions` API for styles that should be applied on all components.
 
 ```js

docs/docs/top-level-api.md

@@ -1,4 +1,4 @@
-# Top Level API Migration
+# Top Level API
 
 In order to make navigation API homogenous as much as possible, we provide setRoot function that receives layout of any kind.
 See [Layout types](layout-types)
@@ -47,71 +47,31 @@ Navigation.setRoot({
 });
 ```
 
-## showModal(layout = {})
+## showOverlay(layout = {})
 
-Show a screen as a modal.
+Show component as overlay.
 
 ```js
-Navigation.showModal({
-  stack: {
-    children: [{
-      component: {
-        name: 'example.ModalScreen',
-        passProps: {
-          text: 'stack with one child'
-        },
-        options: {
-          topBar: {
-            title: {
-              text: 'Modal with stack'
-            }
-          }
-        }
+Navigation.showOverlay({
+  component: {
+    name: 'example.Overlay',
+    options: {
+      overlay: {
+        interceptTouchOutside: true
       }
-    }]
+    }
   }
 });
 ```
 
-## dismissModal(componentId)
+## dismissOverlay(componentId)
 
-Dismiss the current modal.
+Dismiss overlay matching the overlay componentId.
 
 ```js
-Navigation.dismissModal(this.props.componentId);
+Navigation.dismissOverlay(this.props.componentId);
 ```
 
-## dismissAllModals()
-
-Dismiss all the current modals at the same time.
-
-```js
-Navigation.dismissAllModals();
-```
-
-<!-- ## showLightBox(params = {}) - Use showOverlay
-
-Show a screen as a lightbox.
-
-```js
-Navigation.showLightBox({
-  screen: 'example.LightBoxScreen', // unique ID registered with Navigation.registerScreen
-  passProps: {}, // simple serializable object that will pass as props to the lightbox (optional)
-  style: {
-    backgroundBlur: 'dark', // 'dark' / 'light' / 'xlight' / 'none' - the type of blur on the background
-    backgroundColor: '#ff000080', // tint color for the background, you can specify alpha here (optional)
-    tapBackgroundToDismiss: true // dismisses LightBox on background taps (optional)
-  }
-});
-``` -->
-
-<!-- ## dismissLightBox(params = {})
-
-Dismiss the current lightbox.
-
-```js
-Navigation.dismissLightBox();
-``` -->
 
 <!-- ## handleDeepLink(params = {})