edited docs

docs/_sidebar.md

@@ -3,3 +3,9 @@
   - [Working Locally](/docs/WorkingLocally)
   - [Usage](/docs/Usage)
 - [API](/api/README)
+  - [Top Level](/docs/top-level-api)
+  - [Screen](/docs/screen-api)
+  - [Layout types](/docs/layout-types)
+- [Migration from v1](/api/README)
+  - [Top Level](/docs/top-level-api-migration)
+  

docs/docs/screen-api.md

@@ -0,0 +1,289 @@
+# 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`.\
+Component must initialize in stack in order to push another component.
+
+## push(componentId, layout)
+
+Push a new screen into this screen's navigation stack.
+
+```js
+Navigation.push(this.props.componentId, {
+  stack: {
+    children: [{
+      component: {
+        name: 'example.PushedScreen',
+        passProps: {
+          text: 'Pushed screen'
+        },
+        options: {
+          topBar: {
+            title: {
+              text: 'Pushed screen title'
+            }
+          }
+        }
+      }
+    }]
+  }
+});
+```
+
+## pop(componentId)
+
+Pop the top screen from this screen's navigation stack.
+
+```js
+Navigation.pop(this.props.componentId);
+```
+
+## popToRoot(componentId)
+
+Pop all the screens until the root from this screen's navigation stack.
+
+```js
+Navigation.popToRoot(this.props.componentId);
+```
+
+<!-- ## resetTo(params)
+
+Reset the screen's navigation stack to a new screen (the stack root is changed).
+
+```js
+this.props.navigator.resetTo({
+  screen: 'example.ScreenThree', // unique ID registered with Navigation.registerScreen
+  title: undefined, // navigation bar title of the pushed screen (optional)
+  passProps: {}, // simple serializable object that will pass as props to the pushed screen (optional)
+  animated: true, // does the resetTo have transition animation or does it happen immediately (optional)
+  animationType: 'fade', // 'fade' (for both) / 'slide-horizontal' (for android) does the resetTo have different transition animation (optional)
+  navigatorStyle: {}, // override the navigator style for the pushed screen (optional)
+  navigatorButtons: {} // override the nav buttons for the pushed screen (optional)
+});
+``` -->
+
+## showModal(layout = {})
+
+Show a screen as a modal.
+
+```js
+Navigation.showModal({
+  stack: {
+    children: [{
+      component: {
+        name: 'example.ModalScreen',
+        passProps: {
+          text: 'stack with one child'
+        },
+        options: {
+          topBar: {
+            title: {
+              text: 'Modal'
+            }
+          }
+        }
+      }
+    }]
+  }
+});
+```
+
+## dismissModal(componentId)
+
+Dismiss the current modal.
+
+```js
+Navigation.dismissModal(this.props.componentId);
+```
+
+## dismissAllModals()
+
+Dismiss all the current modals at the same time.
+
+```js
+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.
+
+```js
+this.props.navigator.handleDeepLink({
+  link: "chats/2349823023" // the link string (required)
+});
+```
+
+> `handleDeepLink` can also be called statically:
+```js
+  import {Navigation} from 'react-native-navigation';
+  Navigation.handleDeepLink(...);
+``` -->
+
+## setOptions(componentId, options = {})
+
+Set options dynamically for component.
+
+```js
+Navigation.setOptions(this.props.componentId, {
+  topBar: {
+    visible: true,
+    title: {
+      text: 'Title'
+    }
+  },
+  bottomTabs: {
+
+  },
+  bottomTab: {
+
+  },
+  sideMenu: {
+
+  },
+  overlay: {
+
+  }
+});
+```
+
+<!-- ## toggleDrawer(params = {})
+
+Toggle the side menu drawer assuming you have one in your app.
+
+```js
+this.props.navigator.toggleDrawer({
+  side: 'left', // the side of the drawer since you can have two, 'left' / 'right'
+  animated: true, // does the toggle have transition animation or does it happen immediately (optional)
+  to: 'open' // optional, 'open' = open the drawer, 'closed' = close it, missing = the opposite of current state
+});
+``` -->
+
+
+<!-- ## setOnNavigatorEvent(callback)
+
+Set a handler for navigator events (like nav button press). This would normally go in your component constructor.
+Can not be used in conjuction with `addOnNavigatorEvent`.
+
+```js
+// this.onNavigatorEvent will be our handler
+this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
+```
+
+## addOnNavigatorEvent(callback)
+
+Add a handler for navigator events (like nav button press). This would normally go in your component constructor.
+If you choose to use `addOnNavigatorEvent` instead of `setOnNavigatorEvent` you will be able to add multiple handlers.
+Bear in mind that you can't use both `addOnNavigatorEvent` and `setOnNavigatorEvent`.
+`addOnNavigatorEvent` returns a function, that once called will remove the registered handler. -->
+
+<!-- # Screen Visibility
+
+`const isVisible = await this.props.navigator.screenIsCurrentlyVisible()`
+
+## Listen visibility events in onNavigatorEvent handler
+
+```js
+export default class ExampleScreen extends Component {
+  constructor(props) {
+    super(props);
+    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
+  }
+  onNavigatorEvent(event) {
+    switch(event.id) {
+      case 'willAppear':
+       break;
+      case 'didAppear':
+        break;
+      case 'willDisappear':
+        break;
+      case 'didDisappear':
+        break;
+      case 'willCommitPreview':
+        break;
+    }
+  }
+}
+```
+
+## Listen to visibility events globally
+
+```js
+import {ScreenVisibilityListener as RNNScreenVisibilityListener} from 'react-native-navigation';
+
+export class ScreenVisibilityListener {
+
+  constructor() {
+    this.listener = new RNNScreenVisibilityListener({
+      didAppear: ({screen, startTime, endTime, commandType}) => {
+        console.log('screenVisibility', `Screen ${screen} displayed in ${endTime - startTime} millis after [${commandType}]`);
+      }
+    });
+  }
+
+  register() {
+    this.listener.register();
+  }
+
+  unregister() {
+    if (this.listener) {
+      this.listener.unregister();
+      this.listener = null;
+    }
+  }
+}
+```
+
+# Listening to tab selected events
+In order to listen to `bottomTabSelected` event, set an `onNavigatorEventListener` on screens that are pushed to BottomTab. The event is dispatched to the top most screen pushed to the selected tab's stack.
+
+```js
+export default class ExampleScreen extends Component {
+  constructor(props) {
+    super(props);
+    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
+  }
+
+  onNavigatorEvent(event) {
+	if (event.id === 'bottomTabSelected') {
+	  console.log('Tab selected!');
+	}
+	if (event.id === 'bottomTabReselected') {
+	  console.log('Tab reselected!');
+	}
+  }
+}
+```
+
+# Peek and pop (3D touch)
+
+react-native-navigation supports the [Peek and pop](
+https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/Adopting3DTouchOniPhone/#//apple_ref/doc/uid/TP40016543-CH1-SW3) feature by setting a react view reference as a `previewView` parameter when doing a push, more options are available in the `push` section.
+
+You can define actions and listen for interactions on the pushed screen with the `PreviewActionPress` event.
+
+Previewed screens will have the prop `isPreview` that can be used to render different things when the screen is in the "Peek" state and will then recieve a navigator event of `willCommitPreview` when in the "Pop" state. -->

docs/docs/top-level-api-migration.md

@@ -0,0 +1,163 @@
+# Top Level API Migration
+
+In order to make our API homogenous as much as possible, we provide setRoot function that will receive layout of any kind.
+
+## startTabBasedApp(params) -> setRoot({bottomTabs})
+
+```js
+Navigation.setRoot({
+  bottomTabs: {
+    children: [{
+      stack: {
+        children: [{
+          component: {
+            name: 'example.FirstTabScreen',
+            passProps: {
+              text: 'This is tab 1'
+            }
+          }
+        }],
+        options: {
+          bottomTab: {
+            title: 'Tab 1',
+            icon: require('../images/one.png'),
+            testID: 'FIRST_TAB_BAR_BUTTON'
+          }
+        }
+      }
+    },
+    {
+      component: {
+        name: 'navigation.playground.TextScreen',
+        passProps: {
+          text: 'This is tab 2'
+        },
+        options: {
+          bottomTab: {
+            title: 'Tab 2',
+            icon: require('../images/two.png'),
+            testID: 'SECOND_TAB_BAR_BUTTON'
+          }
+        }
+      }
+    }]
+  }
+});
+```
+
+## startSingleScreenApp(params) -> setRoot({stack})
+
+Change your app root into an app based on a single screen (like the iOS Calendar or Settings app). The screen will receive its own navigation stack with a native nav bar
+
+```js
+Navigation.setRoot({
+  stack: {
+    children: [{
+      component: {
+        name: 'example.WelcomeScreen',
+        passProps: {
+          text: 'stack with one child'
+        }
+      }
+    }],
+    options: {
+      topBar: {
+        title: {
+          text: 'Welcome screen'
+        }
+      }
+    }
+  }
+});
+```
+
+## showModal(params = {}) -> showModal(layout = {})
+
+Show a screen as a modal.
+
+```js
+Navigation.showModal({
+  stack: {
+    children: [{
+      component: {
+        name: 'example.ModalScreen',
+        passProps: {
+          text: 'stack with one child'
+        },
+        options: {
+          topBar: {
+            title: {
+              text: 'Modal with stack'
+            }
+          }
+        }
+      }
+    }]
+  }
+});
+```
+
+## dismissModal(params = {}) -> dismissModal(componentId)
+
+Dismiss the current modal.
+
+```js
+Navigation.dismissModal(this.props.componentId);
+```
+
+## dismissAllModals(params = {}) -> 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 = {})
+
+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.
+
+```js
+Navigation.handleDeepLink({
+  link: 'link/in/any/format',
+  payload: '' // (optional) Extra payload with deep link
+});
+``` -->
+
+<!-- ## registerScreen(screenID, generator)
+
+This is an internal function you probably don't want to use directly. If your screen components extend `Screen` directly (`import { Screen } from 'react-native-navigation'`), you can register them directly with `registerScreen` instead of with `registerComponent`. The main benefit of using `registerComponent` is that it wraps your regular screen component with a `Screen` automatically.
+
+```js
+Navigation.registerScreen('example.AdvancedScreen', () => AdvancedScreen);
+```
+
+## getCurrentlyVisibleScreenId()
+
+In some cases you might need the id of the currently visible screen. This method returns the unique id of the currently visible screen:
+`const visibleScreenInstanceId = await Navigation.getCurrentlyVisibleScreenId()`
+In order to have any use of this method, you'd need to map instanceId to screens your self. -->