Auto docs WIP (#2799)

* update api jsdoc

* iniline some properties

* add typedoc

* remove typedoc

* try again with typedoc

* explicit types

* docs

* try handlerbars

* working on docs

* update docs

* html

* removed old md

* trying stuff

* fix lint

* working on docs

* trying with themes

* something works

* trying to use automatically

* working on docs

* docs

* docs

* docw

* auto docs

* rename

* local-docs no cache

* automating

* ts-node

* working on something cool

* temp

* try fix travis

* Revert "try fix travis"

This reverts commit 5bcb54659b.

* removed dead files

* main readme inside docs

* softlink

* softlink

* docs working

README.md

@@ -1,210 +0,0 @@
-[![npm (tag)](https://img.shields.io/npm/v/react-native-navigation/alpha.svg)](https://github.com/wix/react-native-navigation/tree/v2#react-native-navigation-v2-wip)
-[![Build Status](https://travis-ci.org/wix/react-native-navigation.svg?branch=v2)](https://travis-ci.org/wix/react-native-navigation)
-[![Join us on Discord](https://img.shields.io/badge/discord-react--native--navigation-738bd7.svg?style=flat)](https://discord.gg/DhkZjq2)
-
-#  React Native Navigation v2 (WIP)
-We are rebuilding react-native-navigation.
-
-> As we are in stage alpha, expect breaking API changes or use a specific version (for example "2.0.1234")
-
-- [Why?](#why-rebuild-react-native-navigation)
-- [v2 Roadmap](#v2-roadmap)
-- [v1 vs v2 feature comparison](#v1-vs-v2-feature-comparison)
-- [Documentation](https://wix.github.io/react-native-navigation/v2/)
-- [Contributing](/docs/docs/CONTRIBUTING.md)
-
-## Why Rebuild react-native-navigation?
-
-### A New & Improved Core Architecture
-react-native-navigation has a few issues which are unsolvable in its current architecture. These issues stem from the same problem: you cannot specify on which screen you wish to make an action. Whenever you want to push a screen, show a modal or any other action, the action defaults to originate from your current screen. In most cases this is fine, but becomes problematic in specific edge cases. For example: <br>
-* What if you want to update your navbar icons and the user pops the screen? Your icons might update on the wrong screen.
-* What if you want to push a screen as a result of a redux action?
-
-There are ways to solve some of these problems in v1 but they are not straightforward. We want to change that.
-
-#### New API
-To solve this problem in v2, every screen receives its `containerId` as a prop. Whenever you want to perform an action from that screen you need to pass the `containerId` to the function:
-```js
-Navigator.pop(this.props.containerId)
-```
-### Built for Contributors
-Currently, it requires a lot of work to accept pull requests. We need to manually make sure that everything works before we approve them because v1 is not thoroughly tested. <br>
-v2 is written with contributors in mind from day one.
-
-#### Written In TDD
-v2 is written in Test Driven Development. We have a test for every feature including features that are not implemented yet. This makes accepting pull requests extremely easy: If our tests pass, your pull request is accepted.
-
-## v2 Roadmap
-
-### Current Priorities
-
-1) buttons in Android
-2) showOverlay in iOS
-3) showOverlay in Android
-4) async commands
-5) currentTab
-6) change Options to be nested
-7) topTabs in both platforms, with API implications
-
-### Top API
-
-|       Top API         | iOS  | Android |
-|--------------------|-----|----|
-| setRoot   |   ✅    |   ✅  |
-| registerContainer |   ✅   |  ✅   |
-| container     |   ✅   |  ✅   |
-| sideMenu             |    ✅  |    ✅ |
-| tabs            |    ✅  |    ✅ |
-| customViewController           |   [Contribute](/docs/docs/CONTRIBUTING.md)  |   [Contribute](/docs/docs/CONTRIBUTING.md) |
-| splitView           |   [Contribute](/docs/docs/CONTRIBUTING.md)   |   [Contribute](/docs/docs/CONTRIBUTING.md) |
-
-### Screen API
-
-|       Screen API         | iOS  | Android |
-|--------------------|-----|----|
-| push              |   ✅       |	✅		|
-| pop               |  ✅        |	✅	|
-| popToRoot              |   ✅         |✅	|
-| resetTo             |   ✅        |	✅|
-| showModal              |  ✅        |	✅|
-| dismissModal           |     ✅       |	✅|
-| showOverlay             |  ✅         |	✅ |
-| dismissOverlay             |  ✅   |	✅ |
-| customTransition            |   ✅        |	[Contribute](/docs/docs/CONTRIBUTING.md) |
-| Screen Visibility        | ✅     |✅|
-| async commands (await push)     |  ✅        |✅   |
-
-### Navigation Options
-
-|       topBar         | iOS  | Android | contributors|
-|--------------------|-----|----|-----|
-| title         |        	✅    | 	✅| Wix|
-| textColor    | ✅     |     ✅        | Wix|
-| textFontSize       |    ✅      |     ✅        | Wix|
-| textFontFamily     |      ✅     |     ✅        | Wix |
-| backgroundColor    |  ✅       |     ✅         | Wix|
-| buttonColor         |    ✅      |     [Contribute](/docs/docs/CONTRIBUTING.md)        | Wix|
-| hidden             |   ✅      |     ✅        | Wix|
-| hideOnScroll         |  ✅    |     [Contribute](/docs/docs/CONTRIBUTING.md)        | Wix|
-| translucent         |   ✅     |     [Contribute](/docs/docs/CONTRIBUTING.md)        | Wix|
-| transparent         |  ✅        |     [Contribute](/docs/docs/CONTRIBUTING.md)        |
-| noBorder             |    ✅     |     [Contribute](/docs/docs/CONTRIBUTING.md)        |  @gtchance|
-| drawUnder         |    ✅     |      [Contribute](/docs/docs/CONTRIBUTING.md)       ||
-| blur               |    ✅     |      [Contribute](/docs/docs/CONTRIBUTING.md)       | @gtchance|
-| custom          |     WIP @gran33     | [Contribute](/docs/docs/CONTRIBUTING.md)|
-| subtitleColor            |   [Contribute](/docs/docs/CONTRIBUTING.md)     |      [Contribute](/docs/docs/CONTRIBUTING.md)      |
-| subtitleFontFamily      |    [Contribute](/docs/docs/CONTRIBUTING.md)    |     [Contribute](/docs/docs/CONTRIBUTING.md)       |
-| largeTitle (iOS 11)      |    ✅     |     /iOS Specific       |
-
-|       tabBar         | iOS  | Android | contributors|
-|--------------------|-----|----|-----|
-| drawUnder          |    ✅     |      [Contribute](/docs/docs/CONTRIBUTING.md)       | |
-| hidden   |   ✅     |    ✅        | @gtchance |
-| tabBadge          |       ✅    | [Contribute](/docs/docs/CONTRIBUTING.md)| Wix|
-| currentTab by Index          |       ✅    | ✅ | Wix |
-| currentTab by cointainerId         |       [Contribute](/docs/docs/CONTRIBUTING.md)    | ✅ | Wix |
-
-|       buttons        | iOS  | Android | contributors|
-|--------------------|-----|----|-----|
-| id    |   ✅      |     @Johan-dutoit  |@Johan-dutoit|
-| testID   |     ✅   |   [Contribute](/docs/docs/CONTRIBUTING.md)  | @Johan-dutoit|
-| color             |    ✅     |     @Johan-dutoit     | @Johan-dutoit|
-| icon          |   ✅     |    @Johan-dutoit     | @Johan-dutoit|
-| disableTint        |    ✅       |    @Johan-dutoit    | @Johan-dutoit|
-| fontSize        |    ✅       |    @Johan-dutoit    | @Johan-dutoit |
-| fontWeight        |    ✅       |    [Contribute](/docs/docs/CONTRIBUTING.md)   |  [Contribute](/docs/docs/CONTRIBUTING.md) |
-
-|       statusBar        | iOS  | Android | contributors|
-|--------------------|-----|----|-----|
-| textColorScheme    |   in development      |      / iOS specific    |
-| textColorSchemeSingleScreen   |     in development    |     / iOS specific      |
-| blur             |    ✅     |      [Contribute](/docs/docs/CONTRIBUTING.md)       | @gtchance|
-| hideWithTopBar          |   ✅     |     [Contribute](/docs/docs/CONTRIBUTING.md)       | @gtchance|
-| hidden         |    ✅       |     [Contribute](/docs/docs/CONTRIBUTING.md)      | WIX |
-
-|       other        | iOS  | Android | contributors|
-|--------------------|-----|----|-----|
-| screenBackgroundColor        |   ✅     |     [Contribute](/docs/docs/CONTRIBUTING.md)       |  Wix|
-| orientation       |    ✅     |   [Contribute](/docs/docs/CONTRIBUTING.md)          | Wix|
-| disabledBackGesture        |    ✅     |    / iOS specific     |
-| screenBackgroundImageName        |   ✅      |    [Contribute](/docs/docs/CONTRIBUTING.md)        |
-| rootBackgroundImageName              |    ✅     |    [Contribute](/docs/docs/CONTRIBUTING.md)       |
-| sideMenuVisible          |      ✅   | [Contribute](/docs/docs/CONTRIBUTING.md) |
-
-
-## v1 vs v2 Feature Comparison
-v2 currently supports most of react-native-navigation’s basic functionality but it is still behind v1.
-Here is the full comparison of features between v1 and v2 (will be updated regularly):
-### Top Level API
-
-|    API              | v1  | v2 |
-|--------------------|-----|----|
-| startTabBasedApp   |   ✅    |   ✅  |
-| startSinglePageApp |   ✅   |  ✅   |
-| registerScreen     |   ✅   |  ✅   |
-| drawer             |    ✅  |    ✅ |
-### Screen API
-
-|  API              | v1     | v2  iOS      |	v2 Android |
-|---------------------|--------|------------|--------------|
-| push                |  ✅     |   ✅       |	✅		|
-| pop                 |  ✅     |  ✅        |	✅	|
-| showModal           |  ✅     |  ✅        |	✅|
-| popToRoot           |   ✅     |   ✅         |✅	|
-| resetTo             |   ✅     |    ✅        |	✅|
-| dismissModal        |   ✅     |     ✅       |	✅|
-| dismissAllModals    |   ✅     |      ✅      |	✅|
-| showContextualMenu      |   ✅     |     / Android specific       |[Contribute](/docs/docs/CONTRIBUTING.md) |
-| dismissContextualMenu      |   ✅     |   / Androic specific        |[Contribute](/docs/docs/CONTRIBUTING.md)  |
-| showFab      |   ✅     |    / Android specific     |  [Contribute](/docs/docs/CONTRIBUTING.md)  |
-| dismissFab      |   ✅     |    / Android specific       | [Contribute](/docs/docs/CONTRIBUTING.md) |
-| showSnackBar     |   ✅     |     / Android specific    |   [Contribute](/docs/docs/CONTRIBUTING.md) |
-| dismissSnackBar     |   ✅     |    / Android specific      |  [Contribute](/docs/docs/CONTRIBUTING.md) |
-| showLightBox        |   ✅     |      [Contribute](/docs/docs/CONTRIBUTING.md)      | [Contribute](/docs/docs/CONTRIBUTING.md)  |
-| dismissLightBox     |   ✅     |       [Contribute](/docs/docs/CONTRIBUTING.md)       | [Contribute](/docs/docs/CONTRIBUTING.md) |
-| handleDeepLink      |   ✅     |       [Contribute](/docs/docs/CONTRIBUTING.md)       | [Contribute](/docs/docs/CONTRIBUTING.md) |
-| Screen Visibility   |   ✅     |       ✅     |✅|
-
-### Styles
-
-Note:  v1 properties with names beginning with 'navBar' are replaced in v2 with properties beginning with 'topBar' to avoid confusion with the Android native bottom nav bar.
-
-|                       | v1  | v2 iOS | v2 Android | Contributors |
-|-----------------------|-----|--------|------------|------------|
-| topBarTextColor |   ✅    |    ✅     |     ✅        | Wix|
-| topBarTextFontSize    |   ✅    |    ✅      |     ✅        | Wix|
-| topBarTextFontFamily  |  ✅     |      ✅     |     ✅        | Wix |
-| topBarBackgroundColor |  ✅     |  ✅       |     ✅         | Wix|
-| topBarButtonColor     |  ✅     |    ✅      |     [Contribute](/docs/docs/CONTRIBUTING.md)        | Wix|
-| topBarHidden          |   ✅    |   ✅      |     ✅        | Wix|
-| topBarHideOnScroll    |  ✅     |  ✅    |     [Contribute](/docs/docs/CONTRIBUTING.md)        | Wix|
-| topBarTranslucent     |  ✅     |   ✅     |     [Contribute](/docs/docs/CONTRIBUTING.md)        | Wix|
-| topBarTransparent     | ✅      |   WIP @bogobogo     |     [Contribute](/docs/docs/CONTRIBUTING.md)        |
-| topBarNoBorder        |  ✅     |    ✅     |     [Contribute](/docs/docs/CONTRIBUTING.md)        |  @gtchance|
-| drawUnderTabBar       |  ✅     |    ✅     |      [Contribute](/docs/docs/CONTRIBUTING.md)       | |
-| drawUnderTopBar       |  ✅     |    ✅     |      [Contribute](/docs/docs/CONTRIBUTING.md)       ||
-| statusBarBlur         |  ✅     |    ✅     |      [Contribute](/docs/docs/CONTRIBUTING.md)       | @gtchance|
-| topBarBlur            | ✅      |    ✅     |      [Contribute](/docs/docs/CONTRIBUTING.md)       | @gtchance|
-| tabBarHidden  |   ✅  |   ✅     |    [Contribute](/docs/docs/CONTRIBUTING.md)        | @gtchance|
-| statusBarTextColorScheme |  ✅   |   in development      |      / iOS specific    |
-| statusBarTextColorSchemeSingleScreen|  ✅   |     in development    |     / iOS specific      |
-| topBarSubtitleColor          |  ✅   |   [Contribute](/docs/docs/CONTRIBUTING.md)     |      [Contribute](/docs/docs/CONTRIBUTING.md)      |
-| topBarSubtitleFontFamily    |   ✅  |    [Contribute](/docs/docs/CONTRIBUTING.md)    |     [Contribute](/docs/docs/CONTRIBUTING.md)       |
-| screenBackgroundColor     | ✅    |   ✅     |     [Contribute](/docs/docs/CONTRIBUTING.md)       |  Wix|
-| orientation     |  ✅   |    ✅     |   [Contribute](/docs/docs/CONTRIBUTING.md)          | Wix|
-| statusBarHideWithTopBar        |  ✅   |   ✅     |     [Contribute](/docs/docs/CONTRIBUTING.md)       | @gtchance|
-| statusBarHidden       |  ✅   |    ✅       |     [Contribute](/docs/docs/CONTRIBUTING.md)      | WIX |
-| disabledBackGesture       |   ✅  |   ✅  |    / iOS specific     |
-| screenBackgroundImageName         |   ✅  |   ✅      |    [Contribute](/docs/docs/CONTRIBUTING.md)        |
-| rootBackgroundImageName            |  ✅   |    ✅     |    [Contribute](/docs/docs/CONTRIBUTING.md)       |
-| setButtons          |   ✅     |    ✅    | [Contribute](/docs/docs/CONTRIBUTING.md) | @Johan-dutoit|
-| title            |   ✅     |        	✅    | 	✅| Wix|
-| toggleDrawer        |   ✅     |       ✅    | [Contribute](/docs/docs/CONTRIBUTING.md) |
-| setTabBadge         |    ✅    |       ✅    | [Contribute](/docs/docs/CONTRIBUTING.md)| Wix|
-| switchToTab         |    ✅    |       ✅   |[Contribute](/docs/docs/CONTRIBUTING.md) |
-| topBarCustomView        |   ✅     |     WIP @gran33     | [Contribute](/docs/docs/CONTRIBUTING.md)|
-| customTransition(shared element)       |     :x:  |     WIP @bogobogo     | [Contribute](/docs/docs/CONTRIBUTING.md)|
-| splitViewScreen       |     :x:  |    [Contribute](/docs/docs/CONTRIBUTING.md)      | [Contribute](/docs/docs/CONTRIBUTING.md)|
-
-Element transitions, adding buttons and styles are not yet implemented. [Contribute](/docs/docs/CONTRIBUTING.md)
-

README.md

@@ -0,0 +1 @@
+docs/README.md

docs/README.md

@@ -1 +1,213 @@
-# React Native Navigation V2
+[![npm (tag)](https://img.shields.io/npm/v/react-native-navigation/alpha.svg)](https://github.com/wix/react-native-navigation/tree/v2#react-native-navigation-v2-wip)
+[![Build Status](https://travis-ci.org/wix/react-native-navigation.svg?branch=v2)](https://travis-ci.org/wix/react-native-navigation)
+[![Join us on Discord](https://img.shields.io/badge/discord-react--native--navigation-738bd7.svg?style=flat)](https://discord.gg/DhkZjq2)
+[![StackExchange](https://img.shields.io/stackexchange/stackoverflow/t/react-native-navigation.svg)](https://stackoverflow.com/questions/tagged/react-native-navigation)
+
+
+#  React Native Navigation v2 (WIP)
+We are rebuilding react-native-navigation.
+
+> As we are in stage alpha, expect breaking API changes or use a specific version (for example "2.0.1234")
+
+- [Why?](#why-rebuild-react-native-navigation)
+- [v2 Roadmap](#v2-roadmap)
+- [v1 vs v2 feature comparison](#v1-vs-v2-feature-comparison)
+- [Documentation](https://wix.github.io/react-native-navigation/v2/)
+- [Contributing](/docs/WorkingLocally.md)
+
+## Why Rebuild react-native-navigation?
+
+### A New & Improved Core Architecture
+react-native-navigation has a few issues which are unsolvable in its current architecture. These issues stem from the same problem: you cannot specify on which screen you wish to make an action. Whenever you want to push a screen, show a modal or any other action, the action defaults to originate from your current screen. In most cases this is fine, but becomes problematic in specific edge cases. For example: <br>
+* What if you want to update your navbar icons and the user pops the screen? Your icons might update on the wrong screen.
+* What if you want to push a screen as a result of a redux action?
+
+There are ways to solve some of these problems in v1 but they are not straightforward. We want to change that.
+
+#### New API
+To solve this problem in v2, every screen receives its `componentId` as a prop. Whenever you want to perform an action from that screen you need to pass the `componentId` to the function:
+```js
+Navigator.pop(this.props.componentId)
+```
+Another big architectural change is that now you can compose arbitrary native layout hierarchies, and assign a custom `id` to each and control them individually.
+
+### Built for Contributors
+Currently, it requires a lot of work to accept pull requests. We need to manually make sure that everything works before we approve them because v1 is not thoroughly tested. <br>
+v2 is written with contributors in mind from day one.
+
+#### Written In TDD
+v2 is written in Test Driven Development. We have a test for every feature including features that are not implemented yet. This makes accepting pull requests extremely easy: If our tests pass, your pull request is accepted.
+
+## v2 Roadmap
+
+### Current Priorities
+
+1) buttons in Android
+2) showOverlay in iOS
+3) showOverlay in Android
+4) async commands
+5) currentTab
+6) change Options to be nested
+7) topTabs in both platforms, with API implications
+
+### Top API
+
+|       Top API         | iOS  | Android |
+|--------------------|-----|----|
+| setRoot   |   ✅    |   ✅  |
+| registerContainer |   ✅   |  ✅   |
+| container     |   ✅   |  ✅   |
+| sideMenu             |    ✅  |    ✅ |
+| tabs            |    ✅  |    ✅ |
+| customViewController           |   [Contribute](/docs/WorkingLocally.md)  |   [Contribute](/docs/WorkingLocally.md) |
+| splitView           |   [Contribute](/docs/WorkingLocally.md)   |   [Contribute](/docs/WorkingLocally.md) |
+
+### Screen API
+
+|       Screen API         | iOS  | Android |
+|--------------------|-----|----|
+| push              |   ✅       |	✅		|
+| pop               |  ✅        |	✅	|
+| popToRoot              |   ✅         |✅	|
+| resetTo             |   ✅        |	✅|
+| showModal              |  ✅        |	✅|
+| dismissModal           |     ✅       |	✅|
+| showOverlay             |  ✅         |	✅ |
+| dismissOverlay             |  ✅   |	✅ |
+| customTransition            |   ✅        |	[Contribute](/docs/WorkingLocally.md) |
+| Screen Visibility        | ✅     |✅|
+| async commands (await push)     |  ✅        |✅   |
+
+### Navigation Options
+
+|       topBar         | iOS  | Android | contributors|
+|--------------------|-----|----|-----|
+| title         |        	✅    | 	✅| Wix|
+| textColor    | ✅     |     ✅        | Wix|
+| textFontSize       |    ✅      |     ✅        | Wix|
+| textFontFamily     |      ✅     |     ✅        | Wix |
+| backgroundColor    |  ✅       |     ✅         | Wix|
+| buttonColor         |    ✅      |     [Contribute](/docs/WorkingLocally.md)        | Wix|
+| hidden             |   ✅      |     ✅        | Wix|
+| hideOnScroll         |  ✅    |     [Contribute](/docs/WorkingLocally.md)        | Wix|
+| translucent         |   ✅     |     [Contribute](/docs/WorkingLocally.md)        | Wix|
+| transparent         |  ✅        |     [Contribute](/docs/WorkingLocally.md)        |
+| noBorder             |    ✅     |     [Contribute](/docs/WorkingLocally.md)        |  @gtchance|
+| drawUnder         |    ✅     |      [Contribute](/docs/WorkingLocally.md)       ||
+| blur               |    ✅     |      [Contribute](/docs/WorkingLocally.md)       | @gtchance|
+| custom          |     WIP @gran33     | [Contribute](/docs/WorkingLocally.md)|
+| subtitleColor            |   [Contribute](/docs/WorkingLocally.md)     |      [Contribute](/docs/WorkingLocally.md)      |
+| subtitleFontFamily      |    [Contribute](/docs/WorkingLocally.md)    |     [Contribute](/docs/WorkingLocally.md)       |
+| largeTitle (iOS 11)      |    ✅     |     /iOS Specific       |
+
+|       tabBar         | iOS  | Android | contributors|
+|--------------------|-----|----|-----|
+| drawUnder          |    ✅     |      [Contribute](/docs/WorkingLocally.md)       | |
+| hidden   |   ✅     |    ✅        | @gtchance |
+| tabBadge          |       ✅    | [Contribute](/docs/WorkingLocally.md)| Wix|
+| currentTab by Index          |       ✅    | ✅ | Wix |
+| currentTab by cointainerId         |       [Contribute](/docs/WorkingLocally.md)    | ✅ | Wix |
+
+|       buttons        | iOS  | Android | contributors|
+|--------------------|-----|----|-----|
+| id    |   ✅      |     @Johan-dutoit  |@Johan-dutoit|
+| testID   |     ✅   |   [Contribute](/docs/WorkingLocally.md)  | @Johan-dutoit|
+| color             |    ✅     |     @Johan-dutoit     | @Johan-dutoit|
+| icon          |   ✅     |    @Johan-dutoit     | @Johan-dutoit|
+| disableTint        |    ✅       |    @Johan-dutoit    | @Johan-dutoit|
+| fontSize        |    ✅       |    @Johan-dutoit    | @Johan-dutoit |
+| fontWeight        |    ✅       |    [Contribute](/docs/WorkingLocally.md)   |  [Contribute](/docs/WorkingLocally.md) |
+
+|       statusBar        | iOS  | Android | contributors|
+|--------------------|-----|----|-----|
+| textColorScheme    |   in development      |      / iOS specific    |
+| textColorSchemeSingleScreen   |     in development    |     / iOS specific      |
+| blur             |    ✅     |      [Contribute](/docs/WorkingLocally.md)       | @gtchance|
+| hideWithTopBar          |   ✅     |     [Contribute](/docs/WorkingLocally.md)       | @gtchance|
+| hidden         |    ✅       |     [Contribute](/docs/WorkingLocally.md)      | WIX |
+
+|       other        | iOS  | Android | contributors|
+|--------------------|-----|----|-----|
+| screenBackgroundColor        |   ✅     |     [Contribute](/docs/WorkingLocally.md)       |  Wix|
+| orientation       |    ✅     |   [Contribute](/docs/WorkingLocally.md)          | Wix|
+| disabledBackGesture        |    ✅     |    / iOS specific     |
+| screenBackgroundImageName        |   ✅      |    [Contribute](/docs/WorkingLocally.md)        |
+| rootBackgroundImageName              |    ✅     |    [Contribute](/docs/WorkingLocally.md)       |
+| sideMenuVisible          |      ✅   | [Contribute](/docs/WorkingLocally.md) |
+
+
+## v1 vs v2 Feature Comparison
+v2 currently supports most of react-native-navigation’s basic functionality but it is still behind v1.
+Here is the full comparison of features between v1 and v2 (will be updated regularly):
+### Top Level API
+
+|    API              | v1  | v2 |
+|--------------------|-----|----|
+| startTabBasedApp   |   ✅    |   ✅  |
+| startSinglePageApp |   ✅   |  ✅   |
+| registerScreen     |   ✅   |  ✅   |
+| drawer             |    ✅  |    ✅ |
+### Screen API
+
+|  API              | v1     | v2  iOS      |	v2 Android |
+|---------------------|--------|------------|--------------|
+| push                |  ✅     |   ✅       |	✅		|
+| pop                 |  ✅     |  ✅        |	✅	|
+| showModal           |  ✅     |  ✅        |	✅|
+| popToRoot           |   ✅     |   ✅         |✅	|
+| resetTo             |   ✅     |    ✅        |	✅|
+| dismissModal        |   ✅     |     ✅       |	✅|
+| dismissAllModals    |   ✅     |      ✅      |	✅|
+| showContextualMenu      |   ✅     |     / Android specific       |[Contribute](/docs/WorkingLocally.md) |
+| dismissContextualMenu      |   ✅     |   / Androic specific        |[Contribute](/docs/WorkingLocally.md)  |
+| showFab      |   ✅     |    / Android specific     |  [Contribute](/docs/WorkingLocally.md)  |
+| dismissFab      |   ✅     |    / Android specific       | [Contribute](/docs/WorkingLocally.md) |
+| showSnackBar     |   ✅     |     / Android specific    |   [Contribute](/docs/WorkingLocally.md) |
+| dismissSnackBar     |   ✅     |    / Android specific      |  [Contribute](/docs/WorkingLocally.md) |
+| showLightBox        |   ✅     |      [Contribute](/docs/WorkingLocally.md)      | [Contribute](/docs/WorkingLocally.md)  |
+| dismissLightBox     |   ✅     |       [Contribute](/docs/WorkingLocally.md)       | [Contribute](/docs/WorkingLocally.md) |
+| handleDeepLink      |   ✅     |       [Contribute](/docs/WorkingLocally.md)       | [Contribute](/docs/WorkingLocally.md) |
+| Screen Visibility   |   ✅     |       ✅     |✅|
+
+### Styles
+
+Note:  v1 properties with names beginning with 'navBar' are replaced in v2 with properties beginning with 'topBar' to avoid confusion with the Android native bottom nav bar.
+
+|                       | v1  | v2 iOS | v2 Android | Contributors |
+|-----------------------|-----|--------|------------|------------|
+| topBarTextColor |   ✅    |    ✅     |     ✅        | Wix|
+| topBarTextFontSize    |   ✅    |    ✅      |     ✅        | Wix|
+| topBarTextFontFamily  |  ✅     |      ✅     |     ✅        | Wix |
+| topBarBackgroundColor |  ✅     |  ✅       |     ✅         | Wix|
+| topBarButtonColor     |  ✅     |    ✅      |     [Contribute](/docs/WorkingLocally.md)        | Wix|
+| topBarHidden          |   ✅    |   ✅      |     ✅        | Wix|
+| topBarHideOnScroll    |  ✅     |  ✅    |     [Contribute](/docs/WorkingLocally.md)        | Wix|
+| topBarTranslucent     |  ✅     |   ✅     |     [Contribute](/docs/WorkingLocally.md)        | Wix|
+| topBarTransparent     | ✅      |   WIP @bogobogo     |     [Contribute](/docs/WorkingLocally.md)        |
+| topBarNoBorder        |  ✅     |    ✅     |     [Contribute](/docs/WorkingLocally.md)        |  @gtchance|
+| drawUnderTabBar       |  ✅     |    ✅     |      [Contribute](/docs/WorkingLocally.md)       | |
+| drawUnderTopBar       |  ✅     |    ✅     |      [Contribute](/docs/WorkingLocally.md)       ||
+| statusBarBlur         |  ✅     |    ✅     |      [Contribute](/docs/WorkingLocally.md)       | @gtchance|
+| topBarBlur            | ✅      |    ✅     |      [Contribute](/docs/WorkingLocally.md)       | @gtchance|
+| tabBarHidden  |   ✅  |   ✅     |    [Contribute](/docs/WorkingLocally.md)        | @gtchance|
+| statusBarTextColorScheme |  ✅   |   in development      |      / iOS specific    |
+| statusBarTextColorSchemeSingleScreen|  ✅   |     in development    |     / iOS specific      |
+| topBarSubtitleColor          |  ✅   |   [Contribute](/docs/WorkingLocally.md)     |      [Contribute](/docs/WorkingLocally.md)      |
+| topBarSubtitleFontFamily    |   ✅  |    [Contribute](/docs/WorkingLocally.md)    |     [Contribute](/docs/WorkingLocally.md)       |
+| screenBackgroundColor     | ✅    |   ✅     |     [Contribute](/docs/WorkingLocally.md)       |  Wix|
+| orientation     |  ✅   |    ✅     |   [Contribute](/docs/WorkingLocally.md)          | Wix|
+| statusBarHideWithTopBar        |  ✅   |   ✅     |     [Contribute](/docs/WorkingLocally.md)       | @gtchance|
+| statusBarHidden       |  ✅   |    ✅       |     [Contribute](/docs/WorkingLocally.md)      | WIX |
+| disabledBackGesture       |   ✅  |   ✅  |    / iOS specific     |
+| screenBackgroundImageName         |   ✅  |   ✅      |    [Contribute](/docs/WorkingLocally.md)        |
+| rootBackgroundImageName            |  ✅   |    ✅     |    [Contribute](/docs/WorkingLocally.md)       |
+| setButtons          |   ✅     |    ✅    | [Contribute](/docs/WorkingLocally.md) | @Johan-dutoit|
+| title            |   ✅     |        	✅    | 	✅| Wix|
+| toggleDrawer        |   ✅     |       ✅    | [Contribute](/docs/WorkingLocally.md) |
+| setTabBadge         |    ✅    |       ✅    | [Contribute](/docs/WorkingLocally.md)| Wix|
+| switchToTab         |    ✅    |       ✅   |[Contribute](/docs/WorkingLocally.md) |
+| topBarCustomView        |   ✅     |     WIP @gran33     | [Contribute](/docs/WorkingLocally.md)|
+| customTransition(shared element)       |     :x:  |     WIP @bogobogo     | [Contribute](/docs/WorkingLocally.md)|
+| splitViewScreen       |     :x:  |    [Contribute](/docs/WorkingLocally.md)      | [Contribute](/docs/WorkingLocally.md)|
+
+Element transitions, adding buttons and styles are not yet implemented. [Contribute](/docs/WorkingLocally.md)

docs/_navbar.md

@@ -1 +0,0 @@
-- [Github](https://github.com/wix/react-native-navigation/tree/v2)

docs/_sidebar.md

@@ -1,18 +1,5 @@
-- Getting started
- - [Installation - iOS](/docs/installation-ios)
- - [Installation - Android](/docs/installation-android)
- - [Usage](/docs/usage)
+- Getting Started
+  - [Installing](/docs/Installing)
+  - [Working Locally](/docs/WorkingLocally)
+  - [Usage](/docs/Usage)
 - API
- - [Top Level](/docs/Navigation)
-- Params
- - [Root](/docs/Root)
- - [Component](/docs/Component)
- - [SideMenu](/docs/SideMenu)
-- Options
- - [NavigationOptions](/docs/options/NavigationOptions)
- - [TopBar](/docs/options/TopBar)
- - [TopTabs](/docs/options/TopTabs)
- - [TopTab](/docs/options/TopTab)
- - [Button](/docs/options/Button)
- - [BottomTabs](/docs/options/BottomTabs)
- - [BottomTab](/docs/options/BottomTab)

docs/api/README.md

@@ -0,0 +1 @@
+WIP

docs/docs/Component.md

@@ -1,11 +0,0 @@
-<h1>Component</h1>
-
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| name | <code>string</code> | The components registered name |
-| topTabs | [<code>Array.&lt;Component&gt;</code>](#Component) |  |
-| passProps | <code>object</code> | props |
-| options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Options">Options</a> |  |
-

docs/docs/INSTALLING.md

@@ -1,40 +0,0 @@
-# Installing
-
-### Add dependency
-`npm install --save react-native-navigation@alpha`
-
-### Configure Xcode
-drag-drop `node_modules/react-native-navigation/lib/ios/ReactNativeNavigation.xcodeproj` into Libraries folder in xcode (along the rest of react)
-
-Add ReactNativeNavigation into build-phases
-
-### Configure Gradle
-add `compile project(':react-native-navigation')` in build.gradle under dependencies.
-
-add
-
-```
-include ':react-native-navigation'
-project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/lib/android/app/')
-```
-in settings.gradle
-
-### Setup iOS
-in AppDelegate:
-
-add:
-
-`#import <ReactNativeNavigation/ReactNativeNavigation.h>`
-
-remove everything in the method didFinishLaunchingWithOptions and add:
-
-```
-NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
-[ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
-```
-
-### Setup Android
-
-Make your Application object extend from `NavigationApplication` and implement `isDebug` as `{YOUR_PACKAGE_NAME}.BuildConfig.DEBUG`
-
-Make your Acitivty extend from `NavigationActivity`

docs/docs/Installing.md

@@ -0,0 +1,157 @@
+# Installing
+
+## Requirements
+* node >= 8
+* react-native >= 0.51
+
+## npm
+* `npm install --save react-native-navigation@alpha`
+
+## iOS
+
+> Make sure your Xcode is updated. We recommend editing `.h` and `.m` files in Xcode as the IDE will usually point out common errors.
+
+1. In Xcode, in Project Navigator (left pane), right-click on the `Libraries` > `Add files to [project name]`. Add `node_modules/react-native-navigation/lib/ios/ReactNativeNavigation.xcodeproj` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking)).
+
+2. In Xcode, in Project Navigator (left pane), click on your project (top), then click on your *target* row (on the "project and targets list", which is on the left column of the right pane) and select the `Build Phases` tab (right pane). In the `Link Binary With Libraries` section add `libReactNativeNavigation.a` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-2)).
+
+3. In Xcode, you will need to edit this file: `AppDelegate.m`. This function is the main entry point for your app:
+
+	```objectivec
+	 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { ... }
+
+	```
+  
+  Its contents must be replaced with the contents of this [reference](https://github.com/wix/react-native-navigation/blob/v2/playground/ios/playground/AppDelegate.m#L16).
+  
+
+## Android
+
+> Make sure your Android Studio installation is updated. We recommend editing `gradle` and `java` files in Android Studio as the IDE will suggest fixes and point out errors, this way you avoid most common pitfalls.
+
+1. Add the following in `android/settings.gradle`:
+
+	```groovy
+	include ':react-native-navigation'
+	project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/lib/android/app/')
+	```
+
+2. Update `android/build.gradle`:
+
+	```diff
+	buildscript {
+	    repositories {
+	+        google()
+	+        mavenLocal()
+	+        mavenCentral()
+	+        jcenter()
+	    }
+	    dependencies {
+	+        classpath 'com.android.tools.build:gradle:3.0.1'
+	-        classpath 'com.android.tools.build:gradle:2.2.3'
+	    }
+	}
+	
+	allprojects {
+	    repositories {
+	+		google()
+	+		mavenCentral()
+	+		mavenLocal()
+			jcenter()
+			maven {
+	           // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+	           url "$rootDir/../../node_modules/react-native/android"
+			}
+		}
+	}
+	```
+
+3. Update project dependencies in `android/app/build.gradle`.
+
+	```groovy
+	android {
+	    compileSdkVersion 25
+	    buildToolsVersion "27.0.3"
+	    
+	    defaultConfig {
+	        minSdkVersion 19
+	        targetSdkVersion 25
+		...
+	    }
+	
+	    compileOptions {
+	        sourceCompatibility JavaVersion.VERSION_1_8
+	        targetCompatibility JavaVersion.VERSION_1_8
+	    }
+	    ...
+	}
+	
+	dependencies {
+	    implementation fileTree(dir: "libs", include: ["*.jar"])
+	    implementation "com.android.support:appcompat-v7:25.4.0"
+	    implementation "com.facebook.react:react-native:+"
+	    implementation project(':react-native-navigation')
+	}
+	```
+	
+4. Make sure you're using the new gradle plugin, edit `android/gradle/wrapper/gradle-wrapper.properties`
+
+	```diff
+	distributionBase=GRADLE_USER_HOME
+	distributionPath=wrapper/dists
+	zipStoreBase=GRADLE_USER_HOME
+	zipStorePath=wrapper/dists
+	+distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip
+	-distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
+	```
+
+5. Update `gradle.properties` and disable incremental resource processing
+
+	```diff
+	+# Disable incremental resource processing as it broke relase build
+	+android.enableAapt2=false
+	```
+
+6. In `MainActivity.java` it should extend `com.reactnativenavigation.NavigationActivity` instead of `ReactActivity`.
+
+	This file can be located in `android/app/src/main/java/com/yourproject/`.
+
+	```java
+	import com.reactnativenavigation.NavigationActivity;
+
+	public class MainActivity extends NavigationActivity {
+
+	}
+	```
+
+	If you have any **react-native** related methods, you can safely delete them.
+
+7. In `MainApplication.java`, add the following
+	
+	```java
+	import com.reactnativenavigation.NavigationApplication;
+
+	public class MainApplication extends NavigationApplication {
+		@Override
+		public boolean isDebug() {
+			return BuildConfig.DEBUG;
+		}
+
+		@Override
+		public List<ReactPackage> createAdditionalReactPackages() {
+			return Arrays.<ReactPackage>asList(
+				// eg. new VectorIconsPackage()
+			);
+		}
+ 	}
+	```
+    Make sure that `isDebug` method is implemented.
+
+8. Update `AndroidManifest.xml` and set `application` **android:name** value to `.MainApplication`
+	
+	```xml
+	<application
+		android:name=".MainApplication"
+		...
+	/>
+	```

docs/docs/Navigation.md

@@ -1,167 +0,0 @@
-<a name="Navigation"></a>
-
-# Navigation
-
-* [Navigation](#Navigation)
-    * [.registerComponent(componentName, getComponentFunc)](#Navigation+registerComponent)
-    * [.setRoot(root)](#Navigation+setRoot)
-    * [.setDefaultOptions(options)](#Navigation+setDefaultOptions)
-    * [.setOptions(componentId, options)](#Navigation+setOptions)
-    * [.showModal(params)](#Navigation+showModal)
-    * [.dismissModal(componentId)](#Navigation+dismissModal)
-    * [.dismissAllModals()](#Navigation+dismissAllModals)
-    * [.push(componentId, component)](#Navigation+push)
-    * [.pop(componentId, params)](#Navigation+pop)
-    * [.popTo(componentId)](#Navigation+popTo)
-    * [.popToRoot(componentId)](#Navigation+popToRoot)
-    * [.events()](#Navigation+events)
-
-
-* * *
-
-<a name="Navigation+registerComponent"></a>
-
-## navigation.registerComponent(componentName, getComponentFunc)
-Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
-
-
-| Param | Type | Description |
-| --- | --- | --- |
-| componentName | <code>string</code> | Unique component name |
-| getComponentFunc | <code>function</code> | generator function, typically `() => require('./myComponent')` |
-
-
-* * *
-
-<a name="Navigation+setRoot"></a>
-
-## navigation.setRoot(root)
-Reset the navigation stack to a new screen (the stack root is changed).
-
-
-| Param | Type |
-| --- | --- |
-| root | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Root">Root</a> |
-
-
-* * *
-
-<a name="Navigation+setDefaultOptions"></a>
-
-## navigation.setDefaultOptions(options)
-Set default options to all screens. Useful for declaring a consistent style across the app.
-
-
-| Param | Type |
-| --- | --- |
-| options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/NavigationOptions">NavigationOptions</a> |
-
-
-* * *
-
-<a name="Navigation+setOptions"></a>
-
-## navigation.setOptions(componentId, options)
-Change a components navigation options
-
-
-| Param | Type | Description |
-| --- | --- | --- |
-| componentId | <code>string</code> | The component's id. |
-| options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/NavigationOptions">NavigationOptions</a> |  |
-
-
-* * *
-
-<a name="Navigation+showModal"></a>
-
-## navigation.showModal(params)
-Show a screen as a modal.
-
-
-| Param | Type |
-| --- | --- |
-| params | <code>object</code> |
-
-
-* * *
-
-<a name="Navigation+dismissModal"></a>
-
-## navigation.dismissModal(componentId)
-Dismiss a modal by componentId. The dismissed modal can be anywhere in the stack.
-
-
-| Param | Type | Description |
-| --- | --- | --- |
-| componentId | <code>string</code> | The component's id. |
-
-
-* * *
-
-<a name="Navigation+dismissAllModals"></a>
-
-## navigation.dismissAllModals()
-Dismiss all Modals
-
-
-* * *
-
-<a name="Navigation+push"></a>
-
-## navigation.push(componentId, component)
-Push a new screen into this screen's navigation stack.
-
-
-| Param | Type | Description |
-| --- | --- | --- |
-| componentId | <code>string</code> | The component's id. |
-| component | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component</a> |  |
-
-
-* * *
-
-<a name="Navigation+pop"></a>
-
-## navigation.pop(componentId, params)
-Pop a component from the stack, regardless of it's position.
-
-
-| Param | Type | Description |
-| --- | --- | --- |
-| componentId | <code>string</code> | The component's id. |
-| params | <code>*</code> |  |
-
-
-* * *
-
-<a name="Navigation+popTo"></a>
-
-## navigation.popTo(componentId)
-Pop the stack to a given component
-
-
-| Param | Type | Description |
-| --- | --- | --- |
-| componentId | <code>string</code> | The component's id. |
-
-
-* * *
-
-<a name="Navigation+popToRoot"></a>
-
-## navigation.popToRoot(componentId)
-Pop the component's stack to root.
-
-
-| Param | Type |
-| --- | --- |
-| componentId | <code>*</code> |
-
-
-* * *
-
-<a name="Navigation+events"></a>
-
-## navigation.events()
-Obtain the events registery instance

docs/docs/Root.md

@@ -1,10 +0,0 @@
-<h1>Root</h1>
-
-**Properties**
-
-| Name | Type |
-| --- | --- |
-| component | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component</a> | 
-| sideMenu | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/SideMenu">SideMenu</a> | 
-| bottomTabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component[]</a> | 
-

docs/docs/SideMenu.md

@@ -1,10 +0,0 @@
-<h1>SideMenu</h1>
-
-**Properties**
-
-| Name | Type |
-| --- | --- |
-| left | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component</a> | 
-| center | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component</a> | 
-| right | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component</a> | 
-

docs/docs/UPDATING.md

@@ -1,2 +0,0 @@
-# V1 to V2 - Whats missing? (WIP)
-

docs/docs/Usage.md

@@ -0,0 +1,219 @@
+
+# Usage
+
+- If you don't like reading, just jump into the fully working [playground](https://github.com/wix/react-native-navigation/tree/v2/playground) project. All feature are implemented there and it's the basis for the e2e tests.
+- We fully support redux, mobx and other state management libraries. See the integration tests [here](https://github.com/wix/react-native-navigation/tree/v2/integration).
+- Navigation is written with `TypeScript` and shipped with the type definitions alongside the transpiled JS code. Use an IDE that supports it like VSCode or Webstorm to enjoy API autocompletion.
+- Take a loot at this excellent showcase app [JuneDomingo/movieapp](https://github.com/JuneDomingo/movieapp). (using v1 of React Native Navigation with redux).
+
+## The Basics
+
+### Navigation
+```js
+import { Navigation } from 'react-native-navigation';
+```
+
+### registerComponent(screenID, generator)
+Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending `React.Component` or `React.PureComponent`. It can also be a HOC to provide context (or provide a redux store). Similar to ReactNative's `AppRegistry.registerComponent`.
+
+```js
+Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
+```
+
+
+### onAppLaunched(callback)
+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(() => {
+  Navigation.setRoot({
+    component: {
+      name: 'navigation.playground.WelcomeScreen'
+    }
+  });
+});
+```
+
+## Layout Examples
+
+The layout api is completely open in terms of what you can construct with it.
+
+You can compose arbitrary native layout hierarchies, although some weird edge cases may not be possible or produce errors. In such cases, open an issue so that we either fix it or warn in dev time.
+
+
+For all layout types see [API](/api/README).
+
+
+### Single page app with two side menus:
+
+```js
+Navigation.setRoot({
+  sideMenu: {
+    left: {
+      component: {
+        name: 'navigation.playground.TextScreen',
+        passProps: {
+          text: 'This is a left side menu screen'
+        }
+      }
+    },
+    center: {
+      component: {
+        name: 'navigation.playground.WelcomeScreen'
+      },
+    },
+    right: {
+      component: {
+        name: 'navigation.playground.TextScreen',
+        passProps: {
+          text: 'This is a right side menu screen'
+        }
+      }
+    }
+  }
+});
+```
+
+### Tab based app (with passProps example):
+
+```js
+Navigation.setRoot({
+  bottomTabs: {
+    children: [
+      {
+        component: {
+          name: 'navigation.playground.TextScreen',
+          passProps: {
+            text: 'This is tab 1',
+            myFunction: () => 'Hello from a function!',
+          },
+        },
+      },
+      {
+        component: {
+          name: 'navigation.playground.TextScreen',
+          passProps: {
+            text: 'This is tab 2',
+          },
+        },
+      },
+    ],
+  },
+});
+```
+
+### Stack based app (with options example, initialised with 2 screens):
+
+```js
+Navigation.setRoot({
+  stack: {
+    options: {
+      topBar: {
+        hidden: true,
+      },
+    },
+    children: [
+      {
+        component: {
+          name: 'navigation.playground.TextScreen',
+          passProps: {
+            text: 'This is tab 1',
+            myFunction: () => 'Hello from a function!',
+          },
+        },
+      },
+      {
+        component: {
+          name: 'navigation.playground.TextScreen',
+          passProps: {
+            text: 'This is tab 2',
+          },
+        },
+      },
+    ],
+  },
+});
+```
+
+## Navigating The Stack
+
+For all commands see [API](/api/README).
+
+### push
+Push a new instance of a screen (component) on top of `this` screen's navigation stack.
+
+```js
+Navigation.push(this.props.componentId, {
+  component: {
+    name: 'navigation.playground.PushedScreen'
+  }
+});
+```
+
+### pop
+Pop the top screen from `this` screen's navigation stack.
+
+```js
+Navigation.pop(this.props.componentId);
+```
+
+### showModal
+Show a screen as a modal. (not part of the stack)
+
+```js
+Navigation.showModal({
+  component: {
+    name: 'navigation.playground.ModalScreen'
+  }
+});
+```
+### dismissModal
+Dismiss modal.
+
+```js
+Navigation.dismissModal(this.props.componentId);
+```
+
+## Screen Lifecycle
+
+The `didAppear` and `didDisappear` functions are lifecycle callbacks that are called by React Native Navigation on the component when it appears and disappears. 
+
+These are similar to react's `componentDidMount` and `componentWillUnmount` but are related to the actual visibility of a component to the user. While the component is `mounted` as soon as it's part of a layout, it is not always `visible` (for example when another screen is `pushed` on top of it), and therefore some performance optimizations measures are taken by React Native Navigation.
+
+They are also useful for a lot of use cases, for example starting and stopping an animation while the component is shown onscreen.
+
+> 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:
+
+```js
+class LifecycleScreenExample extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      text: 'nothing yet'
+    };
+  }
+
+  didAppear() {
+    this.setState({ text: 'didAppear' });
+  }
+
+  didDisappear() {
+    alert('didDisappear');
+  }
+
+  componentWillUnmount() {
+    alert('componentWillUnmount');
+  }
+
+  render() {
+    return (
+      <View style={styles.root}>
+        <Text style={styles.h1}>{`Lifecycle Screen`}</Text>
+	      <Text style={styles.h1}>{this.state.text}</Text>
+      </View>
+    );
+  }
+}
+```

docs/docs/CONTRIBUTING.md → docs/docs/WorkingLocally.md

@@ -1,82 +1,29 @@
-# Contributing
+# Working Locally
 
-Thanks for you interest in helping out! We'd love your contributions, and there's plenty of work to be done regardless of your skill level. Before you start, you'll need to have some things installed in your environment so that you can run locally.
+> Thanks for your interest in helping out! We'd love your contributions, and there's plenty of work to be done regardless of your skill level
 
 ## Environment Requirements
 
 * Mac OSX
-* Latest stable XCode
-* Latest stable Node:
-
-```
-curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
-export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
-nvm install stable
-nvm use stable
-```
-
-* Android SDK:
-
-```
-export ANDROID_HOME=$HOME/android-sdk-macosx
-export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
-
-# fix for https://code.google.com/p/android/issues/detail?id=223424
-mkdir -p ~/.android
-
-# download android SDK
-echo "Downloading Android SDK"
-curl --location https://dl.google.com/android/android-sdk_r24.4.1-macosx.zip | tar -x -z -C $HOME
-```
-
+* [Latest stable Xcode](https://developer.apple.com/xcode/)
+* [Android SDK](https://developer.android.com/studio/index.html)
+* [Node 8+](https://nodejs.org/en/)
 * [AppleSimulatorUtils](https://github.com/wix/AppleSimulatorUtils)
 
-```
-brew tap wix/brew
-brew install --HEAD applesimutils
-```
-
-## Basics - Getting Started
+## Running The Project
 
 Got your environment set up? Go ahead and clone the repo. (Fork it first so you can open a PR when you're ready.)
 
 Then:
 
-1. Install dependencies:
-
-    ```
-    npm install
-    ```
-
-1. Run the playground project in Android and iOS so that you can get a feel for the project.
-
-    1. `npm run start` to get the package running in a terminal, leave it open
-
-    1. iOS: `npm run xcode` & run the project from XCode
-
-    1. Android: Open the app in Android Studio and click `Run`
-
-1. Run the tests. Before you start changing things, make sure everything works.
-
-     ```
-     npm run test-all
-     ```
+1. Install dependencies `npm install`
+2. Run the playground project in Android and iOS so that you can get a feel for the project.
+    - `npm run start` to get the packager running in a terminal, leave it open
+    - **iOS**: `npm run xcode` & run the project from Xcode
+    - **Android**: `npm run install-android`, or open the app in Android Studio and click `Run`
+3. Run the tests (using the scripts below). Before you start changing things, make sure everything works.
+	- To easily run all tests in parallel `npm run test-all`
 
-## Troubleshooting
-
-* If the tests fail with an error like `Ineligible destinations for the "ReactNativeNavigation" scheme`, double check that you have the latest XCode installed.
-* If the tests fail because an Android emulator isn't available (something like `com.android.builder.testing.api.DeviceException: No connected devices!`), start the Android project from Android Studio and leave the emulator running, then try again.
-* If the tests fail with an error such as:
-
-```js
-
- beforeEach(async () => {
-                   ^
-SyntaxError: Unexpected token (
-
-```
-
-You probably have an old node version which doesn't support async functions. Update your node using nvm according to the instructions above.
 
 ## Workflow
 This project is driven by tests. Before implementing any feature or fixing any bug, a failing test (e2e or unit or both) should be added, depending on the environment of where the fix should be implemented. For example, for an API change, a failing e2e should be written. For a small bug fix in Android, for example, a unit test in Android should be added.
@@ -97,8 +44,8 @@ No PR will be accepted without adequate test coverage.
 | `lib/dist/index.js` | the entry point for `import Navigation from 'react-native-navigation'` |
 | `e2e` | [detox](https://github.com/wix/detox) iOS e2e tests (in the future, once detox supports it, we will have android e2e here as well) |
 | `AndroidE2E` | Android e2e tests using native uiautomator (until detox for android is ready) |
-| `playground` | The end-user project all e2e tests run against. Contains its own `src`, `android` and `ios`. Does not have its own package.json, depends on the local `<root>/lib` in order not to go through npm. |
-| `integration` | misc javascript integration tests |
+| `playground` | The end-user project all e2e tests run against. Contains its own `src`, `android` and `ios`. Does not have its own package.json, depends on the local `<root>/lib` for faster local development (no need to `npm install` locally). |
+| `integration` | misc javascript integration tests, proving integration with other libraries like redux |
 | `scripts` | all scripts |
 
 ## Scripts
@@ -118,4 +65,20 @@ No PR will be accepted without adequate test coverage.
 | `npm run test-e2e-ios` | runs the ios e2e suite (with detox) in debug/release <br> **Options:** `-- --release`|
 | `npm run test-e2e-android` | runs the android e2e suite (with uiautomator) in debug/release on running devices/emulators <br> **Options:** `-- [--release] [--just com.TestClass#testMethod]` |
 | `npm run test-all` | runs all tests in parallel |
+| `npm run gen-docs` | generates api docs |
+| `npm run local-docs` | serve the docs locally for `http://localhost:3000/` |
+
+## Common Problems
+
+* If the tests fail with an error like `Ineligible destinations for the "ReactNativeNavigation" scheme`, double check that you have the latest XCode installed.
+* If the tests fail because an Android emulator isn't available (something like `com.android.builder.testing.api.DeviceException: No connected devices!`), start the Android project from Android Studio and leave the emulator running, then try again.
+* If the tests fail with an error such as:
+		
+	```js
+	 beforeEach(async () => {
+	                   ^
+	SyntaxError: Unexpected token (
+	```
+		
+	You probably have an old node version which doesn't support async functions. Update your nodejs to 8+.
 

docs/docs/installation-android.md

@@ -1,138 +0,0 @@
-# Android Installation
-
-!> Make sure your Android Studio installation is updated. We recommend editing `gralde` and `java` files in Android Studio as the ide will suggest fixes and point out errors, this way you avoid most common pitfalls.
-
-
-1. Install `react-native-navigation` latest stable version.
-
-	```sh
-	yarn add react-native-navigation@alpha
-	```
-
-2. Add the following in `android/settings.gradle`.
-
-	```groovy
-	include ':react-native-navigation'
-	project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/lib/android/app/')
-	```
-	
-3. Update `android/build.gradle`
-
-	```diff
-	buildscript {
-	    repositories {
-	+        mavenLocal()
-	+        mavenCentral()
-	+        google()
-	+        jcenter()
-	    }
-	    dependencies {
-	+        classpath 'com.android.tools.build:gradle:3.0.1'
-	-        classpath 'com.android.tools.build:gradle:2.2.3'
-	    }
-	}
-	
-	allprojects {
-	    repositories {
-	        mavenLocal()
-	+        mavenCentral()
-	+        google()
-	        jcenter()
-	        maven {
-	            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-	            url "$rootDir/../../node_modules/react-native/android"
-	        }
-	    }
-	}
-	```
-
-4. Update project dependencies in `android/app/build.gradle`.
-
-	```groovy
-	android {
-	    compileSdkVersion 25
-	    buildToolsVersion "27.0.3"
-	    
-	    defaultConfig {
-	        minSdkVersion 19
-	        targetSdkVersion 25
-		...
-	    }
-	
-	    compileOptions {
-	        sourceCompatibility JavaVersion.VERSION_1_8
-	        targetCompatibility JavaVersion.VERSION_1_8
-	    }
-	    ...
-	}
-	
-	dependencies {
-	    implementation fileTree(dir: "libs", include: ["*.jar"])
-	    implementation "com.android.support:appcompat-v7:25.4.0"
-	    implementation "com.facebook.react:react-native:+"
-	    implementation project(':react-native-navigation')
-	}
-	```
-	
-5. Make sure you're using the new gradle plugin, edit `android/gradle/wrapper/gradle-wrapper.properties`
-
-	```diff
-	distributionBase=GRADLE_USER_HOME
-	distributionPath=wrapper/dists
-	zipStoreBase=GRADLE_USER_HOME
-	zipStorePath=wrapper/dists
-	+distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip
-	-distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip
-	```
-
-6. Update `gradle.properties` and disable incremental resource processing
-
-	```diff
-	+# Disable incremental resource processing as it broke relase build
-	+android.enableAapt2=false
-	```
-
-7. In `MainActivity.java` it should extend `com.reactnativenavigation.NavigationActivity` instead of `ReactActivity`.
-
-	This file can be located in `android/app/src/main/java/com/yourproject/`.
-
-	```java
-	import com.reactnativenavigation.NavigationActivity;
-
-	public class MainActivity extends NavigationActivity {
-
-	}
-	```
-
-	If you have any **react-native** related methods, you can safely delete them.
-
-8. In `MainApplication.java`, add the following
-	
-	```java
-	import com.reactnativenavigation.NavigationApplication;
-
-	public class MainApplication extends NavigationApplication {
-     @Override
-	public boolean isDebug() {
-		return BuildConfig.DEBUG;
-	}
-
-	@Override
-	public List<ReactPackage> createAdditionalReactPackages() {
-		return Arrays.<ReactPackage>asList(
-			// eg. new VectorIconsPackage()
-		);
-	}
- 	}
-	```
-
-	Make sure that `isDebug` methods is implemented.
-
-9. Update `AndroidManifest.xml` and set **android:name** value to `.MainApplication`
-	
-	```xml
-	<application
-		android:name=".MainApplication"
-		...
-	/>
-	```

docs/docs/installation-ios.md

@@ -1,26 +0,0 @@
-# iOS Installation
-
-1. Install `react-native-navigation` latest stable version.
-
-    ```sh
-    npm install --save react-native-navigation@alpha
-    ```
-
-2. In Xcode, in Project Navigator (left pane), right-click on the `Libraries` > `Add files to [project name]`. Add `./node_modules/react-native-navigation/lib/ios/ReactNativeNavigation.xcodeproj` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-1))
-
-3. In Xcode, in Project Navigator (left pane), click on your project (top) and select the `Build Phases` tab (right pane). In the `Link Binary With Libraries` section add `libReactNativeNavigation.a` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-2))
-
-4. In Xcode, in Project Navigator (left pane), click on your project (top) and select the `Build Settings` tab (right pane). In the `Header Search Paths` section add `$(SRCROOT)/../node_modules/react-native-navigation/lib/ios`. Make sure on the right to mark this new path `recursive` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-3))
-
-5. In Xcode, under your project files, modify `AppDelegate.m`. add:
-
-`#import <ReactNativeNavigation/ReactNativeNavigation.h>`
-
-remove everything in the method didFinishLaunchingWithOptions and add:
-
-```
-NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
-[ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
-
-return YES;
-```

docs/docs/options/BottomTab.md

@@ -1,13 +0,0 @@
-<h1>BottomTab</h1>
-
-**Properties**
-
-| Name | Type |
-| --- | --- |
-| title | <code>string</code> | 
-| tag | <code>number</code> | 
-| icon | <code>object</code> | 
-| visible | <code>boolean</code> | 
-| badge | <code>string</code> | 
-| testID | <code>string</code> | 
-

docs/docs/options/BottomTabs.md

@@ -1,13 +0,0 @@
-<h1>BottomTabs</h1>
-
-**Properties**
-
-| Name | Type |
-| --- | --- |
-| currentTabId | <code>string</code> | 
-| currentTabIndex | <code>number</code> | 
-| hidden | <code>boolean</code> | 
-| animate | <code>boolean</code> | 
-| testID | <code>string</code> | 
-| drawUnder | <code>boolean</code> | 
-

docs/docs/options/Button.md

@@ -1,15 +0,0 @@
-<h1>Button</h1>
-
-**Properties**
-
-| Name | Type |
-| --- | --- |
-| id | <code>string</code> | 
-| testID | <code>string</code> | 
-| title | <code>string</code> | 
-| buttonColor | <code>string</code> | 
-| showAsAction | <code>string</code> | 
-| buttonFontWeight | <code>int</code> | 
-| disableIconTint | <code>boolean</code> | 
-| disabled | <code>boolean</code> | 
-

docs/docs/options/NavigationOptions.md

@@ -1,14 +0,0 @@
-<h1>NavigationOptions</h1>
-
-**Properties**
-
-| Name | Type |
-| --- | --- |
-| topBar | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/TopBar">TopBar</a> | 
-| bottomTabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/BottomTabs">BottomTabs</a> | 
-| bottomTab | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/BottomTab">BottomTab</a> | 
-| orientation | <code>string</code> | 
-| topTabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/TopTabs">TopTabs</a> | 
-| rightButtons | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/Button">Button[]</a> | 
-| leftButtons | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/Button">Button[]</a> | 
-

docs/docs/options/TopBar.md

@@ -1,23 +0,0 @@
-<h1>TopBar</h1>
-
-**Properties**
-
-| Name | Type |
-| --- | --- |
-| title | <code>string</code> | 
-| backgroundColor | <code>string</code> | 
-| textColor | <code>string</code> | 
-| buttonColor | <code>string</code> | 
-| textFontSize | <code>number</code> | 
-| textFontFamily | <code>string</code> | 
-| testID | <code>string</code> | 
-| hidden | <code>boolean</code> | 
-| animate | <code>boolean</code> | 
-| hideOnScroll | <code>boolean</code> | 
-| transparent | <code>boolean</code> | 
-| translucent | <code>boolean</code> | 
-| blur | <code>boolean</code> | 
-| noBorder | <code>boolean</code> | 
-| largeTitle | <code>boolean</code> | 
-| drawUnder | <code>boolean</code> | 
-

docs/docs/options/TopTab.md

@@ -1,9 +0,0 @@
-<h1>TopTab</h1>
-
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| title | <code>string</code> | The tab's title in the TopTabs view |
-| titleFontFamily | <code>string</code> | Change the tab's title font family |
-

docs/docs/options/TopTabs.md

@@ -1,10 +0,0 @@
-<h1>TopTabs</h1>
-
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| selectedTabColor | <code>string</code> | Selected tab color |
-| unselectedTabColor | <code>string</code> | Unselected tab color |
-| fontSize | <code>int</code> |  |
-

docs/docs/usage.md

@@ -1,206 +0,0 @@
-# Usage
-
-## Top Screen API
-
-### Navigation
-```js
-import { Navigation } from 'react-native-navigation';
-```
-### Events - On App Launched
-How to initiate your app.
-
-```js
-Navigation.events().onAppLaunched(() => {
-  Navigation.setRoot({
-    component: {
-      name: 'navigation.playground.WelcomeScreen'
-    }
-  });
-});
-```
-
-### registerComponent(screenID, generator)
-Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
-
-```js
-Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
-```
-
-### setRoot({params})
-Start a Single page app with two side menus:
-
-```js
-Navigation.setRoot({
-  sideMenu: {
-    left: {
-      component: {
-        name: 'navigation.playground.TextScreen',
-        passProps: {
-          text: 'This is a left side menu screen'
-        }
-      }
-    },
-    center: {
-      component: {
-        name: 'navigation.playground.WelcomeScreen'
-      },
-    },
-    right: {
-      component: {
-        name: 'navigation.playground.TextScreen',
-        passProps: {
-          text: 'This is a right side menu screen'
-        }
-      }
-    }
-  }
-});
-```
-Start a tab based app:
-
-```js
-Navigation.setRoot({
-  bottomTabs: {
-    children: [
-      {
-        component: {
-          name: 'navigation.playground.TextScreen',
-          passProps: {
-            text: 'This is tab 1',
-            myFunction: () => 'Hello from a function!',
-          },
-        },
-      },
-      {
-        component: {
-          name: 'navigation.playground.TextScreen',
-          passProps: {
-            text: 'This is tab 2',
-          },
-        },
-      },
-    ],
-  },
-});
-```
-
-Start a stack based app (with options):
-
-```js
-Navigation.setRoot({
-  stack: {
-    options: {
-      topBar: {
-        hidden: true,
-      },
-    },
-    children: [
-      {
-        component: {
-          name: 'navigation.playground.TextScreen',
-          passProps: {
-            text: 'This is tab 1',
-            myFunction: () => 'Hello from a function!',
-          },
-        },
-      },
-      {
-        component: {
-          name: 'navigation.playground.TextScreen',
-          passProps: {
-            text: 'This is tab 2',
-          },
-        },
-      },
-    ],
-  },
-});
-```
-## Screen API
-
-### push(params)
-Push a new screen into this screen's navigation stack.
-
-```js
-Navigation.push(this.props.componentId, {
-  component: {
-    name: 'navigation.playground.PushedScreen',
-    passProps: {}
-  }
-});
-```
-### pop(componentId)
-Pop the top screen from this screen's navigation stack.
-
-```js
-Navigation.pop(this.props.componentId);
-```
-### popTo(componentId)
-```js
-Navigation.popTo(previousScreenId);
-```
-### popToRoot()
-Pop all the screens until the root from this screen's navigation stack
-
-```js
-Navigation.popToRoot(this.props.componentId);
-```
-### showModal(params = {})
-Show a screen as a modal.
-
-```js
-Navigation.showModal({
-  component: {
-    name: 'navigation.playground.ModalScreen',
-    passProps: {
-        key: 'value'
-    }
-  }
-});
-```
-### dismissModal(componentId)
-Dismiss modal.
-
-```js
-Navigation.dismissModal(this.props.componentId);
-```
-### dismissAllModals()
-Dismiss all the current modals at the same time.
-```js
-Navigation.dismissAllModals();
-```
-### Screen Lifecycle - didDisappear() and didAppear()
-
-The didDisappear() and didAppear() functions are lifecycle functions that are added to the screen and run when a screen apears and disappears from the screen. To use them simply add them to your component like any other react lifecycle function:
-
-```js
-class LifecycleScreen extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      text: 'nothing yet'
-    };
-  }
-
-  didAppear() {
-    this.setState({ text: 'didAppear' });
-  }
-
-  didDisappear() {
-    alert('didDisappear');
-  }
-
-  componentWillUnmount() {
-    alert('componentWillUnmount');
-  }
-
-  render() {
-    return (
-      <View style={styles.root}>
-        <Text style={styles.h1}>{`Lifecycle Screen`}</Text>
-	      <Text style={styles.h1}>{this.state.text}</Text>
-      </View>
-    );
-  }
-}
-```

docs/docs/v1tov2diff.md

@@ -1,339 +0,0 @@
-#  React Native Navigation v2 (WIP)
-We are rebuilding react-native-navigation
-
-- [Why?](#why-rebuild-react-native-navigation)
-- [Where is it standing now?](#where-is-it-standing-now)
-- [Getting Started](#getting-started-with-v2)
-- [Usage](#usage)
-
-## Why Rebuild react-native-navigation?
-
-### A New Improved Core Architecture
-react-native-navigation has a few issues which are unsolvable in it’s current architecture. <br>
-These issues originate from the same problem: you cannot specify on which screen you wish to make an action. Whenever you want to push a screen, show a modal or any other action, the action defaults to originate from your current screen. This covers most use cases but there are some edge cases: <br>
-* What if you want to update your navbar icons and the user pops the screen? Your icons might update on the wrong screen.
-* What if you want to push a screen as a result of a redux action?
-
-There are ways to solve some of these problems in v1 but they are not straightforward. We want to change that.
-
-#### New API
-To solve this problem in v2, every screen receives as a prop it’s componentId. Whenever you want to perform an action from that screen you need to pass the componentId to the function:
-```js
-Navigator.pop(this.props.componentId)
-```
-### Built for Contributors
-Currently, it requires a lot of work to accept pull requests. We need to manually make sure that everything works before we approve them because v1 is not thoroughly tested. <br>
-v2 is written with contributors in mind from day one.
-
-#### Written In TDD
-v2 is written in Test Driven Development. We have a test for every feature including features that are not implemented yet. This makes accepting pull requests extremely easy: If our tests pass, your pull request is accepted.
-
-
-## Where is it standing now?
-v2 currently supports most of react-native-navigation’s basic functions but it is still behind v1.
-Here is the full comparison of features between v1 and v2 (will be updated regulary):
-### Top Level API
-
-|    API              | v1  | v2 |
-|--------------------|-----|----|
-| startTabBasedApp   |   ✅    |   ✅  |
-| startSinglePageApp |   ✅   |  ✅   |
-| registerScreen     |   ✅   |  ✅   |
-| drawer             |    ✅  |    ✅ |
-### Screen API
-
-|  API              | v1     | v2         |
-|---------------------|--------|------------|
-| push                |  ✅     |   ✅       |
-| pop                 |  ✅     |  ✅        |
-| showModal           |  ✅     |  ✅        |
-| popToRoot           |   ✅     |   ✅         |
-| resetTo             |   ✅     |    ✅        |
-| dismissModal        |   ✅     |     ✅       |
-| dismissAllModals    |   ✅     |      ✅      |
-| showLightBox        |   ✅     |      [Contribute](CONTRIBUTING.md)      |
-| dismissLightBox     |   ✅     |       [Contribute](CONTRIBUTING.md)       |
-| handleDeepLink      |   ✅     |       [Contribute](CONTRIBUTING.md)       |
-| setOnNavigatorEvent |   ✅     |       [Contribute](CONTRIBUTING.md)       |
-| setButtons          |   ✅     |         [Contribute](CONTRIBUTING.md)     |
-| setTitle            |   ✅     |         [Contribute](CONTRIBUTING.md)     |
-| toggleDrawer        |   ✅     |        [Contribute](CONTRIBUTING.md)   |
-| toggleTabs          |   ✅     |        [Contribute](CONTRIBUTING.md)     |
-| setTabBadge         |    ✅    |       [Contribute](CONTRIBUTING.md)     |
-| switchToTab         |    ✅    |        [Contribute](CONTRIBUTING.md)    |
-| toggleNavBar        |   ✅     |      [Contribute](CONTRIBUTING.md)      |
-| Element tranisitions  |   ✅     |     [Contribute](CONTRIBUTING.md)       |
-| static styles   |   ✅     |       [Contribute](CONTRIBUTING.md)     |
-| dynamic styles   |   ✅     |       [Contribute](CONTRIBUTING.md)     |
-
-
-## Getting started with v2
-If v2 supports everything you need for your app we encourage you to use it.
-
-### Installation
-1. Download react-native-navigation v2
-```bash
-npm install --save react-native-navigation@alpha
-```
-##### iOS
-2. In Xcode, in Project Navigator (left pane), right-click on the `Libraries` > `Add files to [project name]`. Add `./node_modules/react-native-navigation/lib/ios/ReactNativeNavigation.xcodeproj` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-1))
-
-3. In Xcode, in Project Navigator (left pane), click on your project (top) and select the `Build Phases` tab (right pane). In the `Link Binary With Libraries` section add `libReactNativeNavigation.a` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-2))
-
-4. In Xcode, in Project Navigator (left pane), click on your project (top) and select the `Build Settings` tab (right pane). In the `Header Search Paths` section add `$(SRCROOT)/../node_modules/react-native-navigation/lib/ios`. Make sure on the right to mark this new path `recursive` ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-3))
-
-5. In Xcode, under your project files, modify `AppDelegate.m`. add:
-
-`#import <ReactNativeNavigation/ReactNativeNavigation.h>`
-
-remove everything in the method didFinishLaunchingWithOptions and add:
-
-```
-NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
-[ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
-```
-
-##### Android
-2. Add the following in `android/settings.gradle`.
-
-	```groovy
-	include ':react-native-navigation'
-	project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-	navigation/lib/android/app/')
-	```
-
-3. Update project dependencies in `android/app/build.gradle`.
-	```groovy
-	android {
-		compileSdkVersion 25
-		buildToolsVersion "25.0.1"
-		...
-	}
-
-	dependencies {
-		compile fileTree(dir: "libs", include: ["*.jar"])
-		compile "com.android.support:appcompat-v7:23.0.1"
-		compile "com.facebook.react:react-native:+"
-		compile project(':react-native-navigation')
-	}
-	```
-
-4. In `MainActivity.java` it should extend `com.reactnativenavigation.controllers.SplashActivity` instead of `ReactActivity`.
-
-	This file can be located in `android/app/src/main/java/com/yourproject/`.
-
-	```java
-	import com.reactnativenavigation.controllers.SplashActivity;
-
-	public class MainActivity extends SplashActivity {
-
-	}
-	```
-
-	If you have any **react-native** related methods, you can safely delete them.
-
-5. In `MainApplication.java`, add the following
-	```java
-	import com.reactnativenavigation.NavigationApplication;
-
-	public class MainApplication extends NavigationApplication {
-
-		@Override
-		public boolean isDebug() {
-			// Make sure you are using BuildConfig from your own application
-			return BuildConfig.DEBUG;
-		}
-
-		protected List<ReactPackage> getPackages() {
-			// Add additional packages you require here
-			// No need to add RnnPackage and MainReactPackage
-			return Arrays.<ReactPackage>asList(
-				// eg. new VectorIconsPackage()
-			);
-		}
-
-		@Override
-		public List<ReactPackage> createAdditionalReactPackages() {
-			return getPackages();
-		}
-	}
-	```
-
-	Make sure that `isDebug` and `createAdditionalReactPackages` methods are implemented.
-
-6. Update `AndroidManifest.xml` and set **android:name** value to `.MainApplication`
-	```xml
-	<application
-		android:name=".MainApplication"
-		...
-	/>
-## Usage
-### Top Screen API
-
-#### Navigation
-```js
-import Navigation from 'react-native-navigation';
-```
-#### Events - On App Launched
-How to initiate your app.
-
-```js
-Navigation.events().onAppLaunched(() => {
-    Navigation.setRoot({
-      component: {
-        name: 'navigation.playground.WelcomeScreen'
-      }
-    });
-  });
-```
-
-#### registerComponent(screenID, generator)
-Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
-
-```js
-Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
-```
-
-#### setRoot({params})
-Start a Single page app with two side menus:
-
-```js
-Navigation.setRoot({
-      component: {
-        name: 'navigation.playground.WelcomeScreen'
-      },
-      sideMenu: {
-        left: {
-          component: {
-            name: 'navigation.playground.TextScreen',
-            passProps: {
-              text: 'This is a left side menu screen'
-            }
-          }
-        },
-        right: {
-          component: {
-            name: 'navigation.playground.TextScreen',
-            passProps: {
-              text: 'This is a right side menu screen'
-            }
-          }
-        }
-      }
-    });
-```
-Start a tab based app:
-
-```js
-Navigation.setRoot({
-      tabs: [
-        {
-          component: {
-            name: 'navigation.playground.TextScreen',
-            passProps: {
-              text: 'This is tab 1',
-              myFunction: () => 'Hello from a function!'
-            }
-          }
-        },
-        {
-          component: {
-            name: 'navigation.playground.TextScreen',
-            passProps: {
-              text: 'This is tab 2'
-            }
-          }
-        }
-      ]
-    });
-```
-### Screen API
-
-#### push(params)
-Push a new screen into this screen's navigation stack.
-
-```js
-Navigation.push(this.props.componentId, {
-      name: 'navigation.playground.PushedScreen',
-      passProps: {}
-    });
-```
-#### pop(componentId)
-Pop the top screen from this screen's navigation stack.
-
-```js
-Navigation.pop(this.props.componentId);
-```
-#### popTo(params)
-
-```js
-Navigation.popTo(this.props.componentId, this.props.previousScreenIds[0]);
-```
-#### popToRoot()
-Pop all the screens until the root from this screen's navigation stack
-
-```js
-Navigation.popToRoot(this.props.componentId);
-```
-#### showModal(params = {})
-Show a screen as a modal.
-
-```js
-Navigation.showModal({
-      component: {
-        name: 'navigation.playground.ModalScreen',
-        passProps: {
-            key: 'value'
-        }
-      }
-    });
-```
-#### dismissModal(componentId)
-Dismiss modal.
-
-```js
-Navigation.dismissModal(this.props.componentId);
-```
-#### dismissAllModals()
-Dismiss all the current modals at the same time.
-
-```js
-Navigation.dismissAllModals();
-```
-#### Screen Lifecycle - didDisappear() and didAppear()
-
-The didDisappear() and didAppear() functions are lifecycle functions that are added to the screen and run when a screen apears and disappears from the screen. To use them simply add them to your component like any other react lifecycle function:
-
-```js
-class LifecycleScreen extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      text: 'nothing yet'
-    };
-  }
-
-  didAppear() {
-    this.setState({ text: 'didAppear' });
-  }
-
-  didDisappear() {
-    alert('didDisappear');
-  }
-
-  componentWillUnmount() {
-    alert('componentWillUnmount');
-  }
-
-  render() {
-    return (
-      <View style={styles.root}>
-        <Text style={styles.h1}>{`Lifecycle Screen`}</Text>
-	<Text style={styles.h1}>{this.state.text}</Text>
-      </View>
-    );
-  }
-}
-```
-
-
-

docs/index.html

@@ -1,56 +1,52 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <title>React Native Navigation - truly native navigation for iOS and Android</title>
-    <meta name="description" content="React Native Navigation - truly native navigation for iOS and Android">
-    <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
-    <link rel="shortcut icon" href="_images/favicon.ico" type="image/x-icon">
-    <link rel="icon" href="_images/favicon.ico" type="image/x-icon">
+  <meta charset="UTF-8">
+  <title>React Native Navigation - truly native navigation for iOS and Android</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="description" content="React Native Navigation - truly native navigation for iOS and Android">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <link rel="shortcut icon" href="_images/favicon.ico" type="image/x-icon">
+  <link rel="icon" href="_images/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css">
+  <link rel="stylesheet" href="//unpkg.com/docsify-copy-code/styles.css">
 </head>
+
 <body>
-<div id="app">
-    <img src="https://raw.githubusercontent.com/wix/react-native-navigation/master/logo.png"
-         alt="react-native-navigation logo">
-</div>
-</body>
-<script>
+  <div id="app">Please wait...</div>
+  <script src="//unpkg.com/docsify-copy-code/index.js"></script>
+  <script>
     window.$docsify = {
-        repo: '',
-        name: 'React Native Navigation',
-        search: 'auto',
-        themeColor: '#21B8F0',
-        loadSidebar: true,
-        loadNavbar: true,
-        maxLevel: 4,
-        subMaxLevel: 2,
-        auto2top: true,
-        ga: 'UA-XXXXX-Y',
-        plugins: [
-            function (hook) {
-                var footer = [
-                    '<hr/>',
-                    '<footer class="Test">',
-                    `<span>Caught a mistake or want to contribute to the documentation? <a href="https://github.com/wix/react-native-navigation/tree/v2/docs" target="_blank">Edit documentation on Github!</a>.</span>`,
-                    '</footer>'
-                ].join('');
+      name: 'React Native Navigation',
+      repo: 'wix/react-native-navigation',
+      themeColor: '#21B8F0',
+      search: 'auto',
+      loadSidebar: true,
+      alias: {
+        '/.*/_sidebar.md': '/_sidebar.md'
+      },
+      subMaxLevel: 2,
+      auto2top: true,
+      plugins: [
+        window.DocsifyCopyCodePlugin.init()
+      ]
+    }
+  </script>
+  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+  <script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
+  <script src="//unpkg.com/prismjs/components/prism-typescript.min.js"></script>
+  <script src="//unpkg.com/prismjs/components/prism-jsx.min.js"></script>
+  <script src="//unpkg.com/prismjs/components/prism-java.min.js"></script>
+  <script src="//unpkg.com/prismjs/components/prism-c.min.js"></script>
+  <script src="//unpkg.com/prismjs/components/prism-objectivec.min.js"></script>
+
+  <!-- this allows us to re-run docs even when offline -->
+  <script>
+    if (typeof navigator.serviceWorker !== 'undefined') {
+      navigator.serviceWorker.register('sw.js')
+    }
+  </script>
+</body>
 
-                hook.afterEach(function (html) {
-                    return html + footer;
-                });
-            }
-        ]
-    };
-</script>
-<script src="//unpkg.com/docsify/lib/docsify.js"></script>
-<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
-<script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
-<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
-<script>
-  if (typeof navigator.serviceWorker !== 'undefined') {
-    navigator.serviceWorker.register('sw.js')
-  }
-</script>
-</html>
+</html>

docs/linkify.js

@@ -1,9 +0,0 @@
-const URL = 'https://wix.github.io/react-native-navigation/v2/#/docs/';
-const isLetter = (c) => c.toLowerCase() !== c.toUpperCase();
-const isClass = (type) => isLetter(type[0]) && (type.includes(':') || type[0] === type[0].toUpperCase());
-const stripArray = (type) => type.substring(type.indexOf('<') + 1, type.indexOf('>'));
-const classUrl = (type) => URL + (type.includes('Array.<') ? stripArray(type) : type).replace(':', '/');
-const className = (type) => type.includes('Array.<') ? className(stripArray(type)) + '[]' : type.substring(type.indexOf(':') + 1);
-const url = (type) => `<a href="${classUrl(type)}">${className(type)}</a>`;
-const simpleString = (type) => `<code>${type}</code>`;
-exports.linkify = (type) => isClass(type) ? url(type) : simpleString(type);

docs/stringify.js

@@ -1 +0,0 @@
-exports.stringify = (obj) => JSON.stringify(obj);

docs/templates/class.hbs

@@ -0,0 +1,7 @@
+# {{name}}
+
+## Methods
+
+{{#each methods}}
+{{> method}}
+{{/each}}

docs/templates/docs.hbs

@@ -1,5 +0,0 @@
-{{>header~}}
-{{>body}}
-{{>member-index~}}
-{{#unless @last}}{{>separator~}}{{/unless}}
-{{~>members~}}

docs/templates/header.hbs

@@ -1,3 +0,0 @@
-<h1>{{anchorName}}</h1>
-
-{{>sig-name}}

docs/templates/link.hbs

@@ -1,25 +0,0 @@
-{{! usage: link to="namepath" html=true/false caption="optional caption"~}}
-
-{{~#if html~}}
-<code>
-
-{{~#link to~}}
-{{#if url~}}
-<a href="{{{url}}}">{{#if ../../caption}}{{../../../caption}}{{else}}{{name}}{{/if}}</a>
-{{~else~}}
-{{#if ../../caption}}{{../../../caption}}{{else}}{{name}}{{/if~}}
-{{/if~}}
-{{/link~}}
-
-</code>
-{{~else~}}
-
-{{#link to~}}
-{{#if url~}}
-[<code>{{#if ../../caption}}{{escape ../../../caption}}{{else}}{{escape name}}{{/if}}</code>]({{{url}}})
-{{~else~}}
-{{#if ../../caption}}<code>{{escape ../../../caption}}</code>{{else}}{{{linkify name}}}{{/if~}}
-{{~/if~}}
-{{/link~}}
-
-{{/if~}}

docs/templates/linked-type-list.hbs

@@ -1,4 +0,0 @@
-{{#each types~}}
-{{>link to=this html=../html ~}}
-{{#unless @last}}{{{../../delimiter}}}{{/unless~}}
-{{/each}}

docs/templates/main.hbs

@@ -0,0 +1 @@
+{{> class}}

docs/templates/method.hbs

@@ -0,0 +1,13 @@
+### `{{name}}(arg0: x, arg1: y): {{returnValue}}`
+
+[source]({{source}})
+
+{{comment}}
+
+#### Arguments
+TBD
+
+#### Returns
+TBD
+
+---

docs/templates/param-table-name.hbs

@@ -1,4 +0,0 @@
-{{#if optional}}[{{/if~}}
-{{#if variable}}...{{/if~}}
-{{{name}~}}
-{{#if optional}}]{{/if}}

docs/templates/params-table.hbs

@@ -1,12 +0,0 @@
-{{#if params}}
-
-{{tableHead params "name|Param" "type|Type" "defaultvalue|Default" "description|Description" ~}}
-
-{{#tableRow params "name" "type" "defaultvalue" "description" ~}}
-| {{#if @col1}}{{>param-table-name}} | {{/if~}}
-{{#if @col2}}{{>linked-type-list types=type.names delimiter=" \| " }} | {{/if~}}
-{{#if @col3}}{{>defaultvalue}} | {{/if~}}
-{{#if @col4}}{{{stripNewlines (inlineLinks description)}}} |{{/if}}
-{{/tableRow}}
-
-{{/if}}

docs/templates/sig-name.hbs

@@ -1,14 +0,0 @@
-{{#if virtual}}*{{/if}}{{#with (parentObject)}}{{#if virtual}}*{{/if~}}{{/with~}}
-{{#if name}}{{#sig~}}
-{{{@depOpen}~}}
-{{{@codeOpen}~}}
-{{#if @prefix}}{{@prefix}} {{/if~}}
-{{@parent~}}
-{{#if @methodSign}}{{#if (isEvent)}} {{@methodSign}}{{else}}{{@methodSign}}{{/if}}{{/if~}}
-{{{@codeClose}~}}
-{{#if @returnSymbol}} {{@returnSymbol}}{{/if~}}
-{{#if @returnTypes}} {{>linked-type-list types=@returnTypes delimiter=" \| " }}{{/if~}}
-{{#if @suffix}} {{@suffix}}{{/if~}}
-{{{@depClose}~}}
-{{~/sig}}{{/if~}}
-{{#if virtual}}*{{/if}}{{#with (parentObject)}}{{#if virtual}}*{{/if~}}{{/with~}}

integration/env.test.js

@@ -1,19 +1,19 @@
 const _ = require('lodash');
 
-describe('test environment', () => {
-  it('handles object spread', () => {
+describe('testing that the environment is working properly', () => {
+  it('object spread', () => {
     const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
     expect(x).toEqual(1);
     expect(y).toEqual(2);
     expect(z).toEqual({ a: 3, b: 4 });
   });
 
-  it('handles async await', async () => {
+  it('async await', async () => {
     const result = await new Promise((r) => r('hello'));
     expect(result).toEqual('hello');
   });
 
-  it('lodash equality tests', () => {
+  it('equality tests', () => {
     expect(_.eq('hello', 'hello')).toBe(true);
     expect(_.isEqual('hello', 'hello')).toBe(true);
 

lib/src/Navigation.ts

@@ -41,116 +41,101 @@ export class Navigation {
   }
 
   /**
-   * Every navigation component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
-   * @param {string} componentName Unique component name
-   * @param {function} getComponentClassFunc generator function, typically `() => require('./myComponent')`
+   * Every navigation component in your app must be registered with a unique name.
+   * The component itself is a traditional React component extending React.Component.
    */
   public registerComponent(componentName: string, getComponentClassFunc: ComponentProvider) {
     this.componentRegistry.registerComponent(componentName, getComponentClassFunc);
   }
 
   /**
-   * Reset the navigation stack to a new component (the stack root is changed).
-   * @param {Root} root
+   * Reset the app to a new layout
    */
-  public setRoot(params) {
-    return this.commands.setRoot(params);
+  public setRoot(layout): Promise<any> {
+    return this.commands.setRoot(layout);
   }
 
   /**
    * Set default options to all screens. Useful for declaring a consistent style across the app.
-   * @param {options:Options} options
    */
-  public setDefaultOptions(options) {
+  public setDefaultOptions(options): void {
     this.commands.setDefaultOptions(options);
   }
 
   /**
-   * Change a components navigation options
-   * @param {string} componentId The component's id.
-   * @param {options:Options} options
+   * Change a component's navigation options
    */
-  public setOptions(componentId, options) {
+  public setOptions(componentId: string, options): void {
     this.commands.setOptions(componentId, options);
   }
 
   /**
    * Show a screen as a modal.
-   * @param {object} params
    */
-  public showModal(params) {
-    return this.commands.showModal(params);
+  public showModal(layout): Promise<any> {
+    return this.commands.showModal(layout);
   }
 
   /**
    * Dismiss a modal by componentId. The dismissed modal can be anywhere in the stack.
-   * @param {string} componentId The component's id.
    */
-  public dismissModal(componentId) {
+  public dismissModal(componentId: string): Promise<any> {
     return this.commands.dismissModal(componentId);
   }
 
   /**
    * Dismiss all Modals
    */
-  public dismissAllModals() {
+  public dismissAllModals(): Promise<any> {
     return this.commands.dismissAllModals();
   }
 
   /**
-   * Push a new screen into this screen's navigation stack.
-   * @param {string} componentId The component's id.
-   * @param {Component} component
+   * Push a new layout into this screen's navigation stack.
    */
-  public push(componentId, component) {
-    return this.commands.push(componentId, component);
+  public push(componentId: string, layout): Promise<any> {
+    return this.commands.push(componentId, layout);
   }
 
   /**
    * Pop a component from the stack, regardless of it's position.
-   * @param {string} componentId The component's id.
-   * @param {*} params
    */
-  public pop(componentId, params) {
+  public pop(componentId: string, params): Promise<any> {
     return this.commands.pop(componentId, params);
   }
 
   /**
    * Pop the stack to a given component
-   * @param {string} componentId The component's id.
    */
-  public popTo(componentId: string) {
+  public popTo(componentId: string): Promise<any> {
     return this.commands.popTo(componentId);
   }
 
   /**
    * Pop the component's stack to root.
-   * @param {*} componentId
    */
-  public popToRoot(componentId: string) {
+  public popToRoot(componentId: string): Promise<any> {
     return this.commands.popToRoot(componentId);
   }
 
   /**
-   * Show overlay on top of the window
-   * @param {*} params
+   * Show overlay on top of the entire app
    */
-  public showOverlay(params) {
-    return this.commands.showOverlay(params);
+  public showOverlay(layout): Promise<any> {
+    return this.commands.showOverlay(layout);
   }
 
   /**
    * dismiss overlay by componentId
-   * @param {string} componentId
    */
-  public dismissOverlay(componentId: string) {
+  public dismissOverlay(componentId: string): Promise<any> {
     return this.commands.dismissOverlay(componentId);
   }
 
   /**
    * Obtain the events registry instance
    */
-  public events() {
+  public events(): PublicEventsRegistry {
     return this.publicEventsRegistry;
   }
 }

lib/src/components/Lifecycle.ts

@@ -1,8 +1,5 @@
 export class Lifecycle {
-  private store;
-
-  constructor(store) {
-    this.store = store;
+  constructor(private readonly store) {
     this.componentDidAppear = this.componentDidAppear.bind(this);
     this.componentDidDisappear = this.componentDidDisappear.bind(this);
     this.onNavigationButtonPressed = this.onNavigationButtonPressed.bind(this);

lib/src/events/PrivateEventsListener.ts

@@ -1,12 +1,12 @@
 import { Lifecycle } from '../components/Lifecycle';
 
 export class PrivateEventsListener {
-  private nativeEventsReceiver;
   private lifecycle;
 
-  constructor(nativeEventsReceiver, store) {
-    this.nativeEventsReceiver = nativeEventsReceiver;
-    this.lifecycle = new Lifecycle(store);
+  constructor(
+    private readonly nativeEventsReceiver,
+    private readonly store) {
+    this.lifecycle = new Lifecycle(this.store);
   }
 
   public listenAndHandlePrivateEvents() {

package.json

@@ -27,23 +27,25 @@
   "scripts": {
     "build": "rm -rf ./lib/dist && tsc",
     "xcode": "open playground/ios/playground.xcodeproj",
-    "install-android": "node ./scripts/install-android.js",
+    "install-android": "node ./scripts/install-android",
     "uninstall-android": "cd playground/android && ./gradlew uninstallAll",
-    "clean": "node ./scripts/clean.js",
+    "clean": "node ./scripts/clean",
     "prestart": "npm run build",
-    "start": "node ./scripts/start.js",
+    "start": "node ./scripts/start",
     "pretest-js": "npm run build",
-    "test-js": "node ./scripts/test-js.js",
-    "test-unit-android": "node ./scripts/test.unit.android.js",
-    "test-unit-ios": "node ./scripts/test.unit.ios.js",
+    "test-js": "node ./scripts/test-js",
+    "test-unit-android": "node ./scripts/test-unit-android",
+    "test-unit-ios": "node ./scripts/test-unit-ios",
     "pretest-e2e-android": "npm run build",
-    "test-e2e-android": "node ./scripts/test.e2e.android.js",
-    "test-e2e-android-detox": "node ./scripts/test.e2e.android.detox.js",
+    "test-e2e-android": "node ./scripts/test-e2e-android",
+    "test-e2e-android-detox": "node ./scripts/test-e2e-android-detox",
     "pretest-e2e-ios": "npm run build",
-    "test-e2e-ios": "node ./scripts/test.e2e.ios.js",
-    "test-all": "node ./scripts/test.all.js",
+    "test-e2e-ios": "node ./scripts/test-e2e-ios",
+    "test-all": "node ./scripts/test-all",
     "prerelease": "npm run build",
-    "release": "node ./scripts/release.js"
+    "release": "node ./scripts/release",
+    "local-docs": "node ./scripts/local-docs",
+    "gen-docs": "./tsn.sh ./scripts/gen-docs"
   },
   "peerDependencies": {
     "react": "*",
@@ -58,7 +60,8 @@
     "@types/lodash": "4.x.x",
     "@types/prop-types": "15.x.x",
     "@types/react-test-renderer": "16.x.x",
-    "@types/jest": "22.x.x"
+    "@types/jest": "22.x.x",
+    "@types/node": "9.x.x"
   },
   "devDependencies": {
     "detox": "7.x.x",
@@ -73,7 +76,10 @@
     "semver": "5.x.x",
     "shell-utils": "1.x.x",
     "tslint": "5.x.x",
-    "typescript": "2.x.x"
+    "typescript": "2.x.x",
+    "ts-node": "5.x.x",
+    "typedoc": "0.x.x",
+    "handlebars": "4.x.x"
   },
   "babel": {
     "env": {

playground/README.md

@@ -1,3 +1,4 @@
 # Navigation Playground
 
-An local playground project using `react-native-navigation`.
+A local example project using `react-native-navigation`.
+The target app for all e2e tests.

scripts/gen-docs.ts

@@ -0,0 +1,116 @@
+import * as _ from 'lodash';
+import * as Typedoc from 'typedoc';
+import * as Handlebars from 'handlebars';
+import * as fs from 'fs';
+
+const ROOT_DIR = `${__dirname}/..`;
+const SRC_DIR = `${ROOT_DIR}/lib/src`;
+const DOCS_DIR = `${ROOT_DIR}/docs`;
+const TEMPLATES_DIR = `${DOCS_DIR}/templates`;
+const API_DIR = `${DOCS_DIR}/api`;
+
+class Main {
+  public generateApiDocsMarkdown() {
+    const moduleName = 'Navigation';
+    const reflections = new ReflectionsReader().read(moduleName);
+    const classRef = new Parser().parseClass(reflections);
+    new MarkdownCreator().create(classRef);
+  }
+}
+
+class MarkdownCreator {
+  private handlebarsFn: HandlebarsTemplateDelegate<any>;
+  constructor() {
+    this.handlebarsFn = this.setupHandlebars();
+  }
+
+  public create(context: ClassReflection) {
+
+    const result = this.handlebarsFn(context);
+
+    // console.log(result);
+    API_DIR.toString();
+  }
+
+  private setupHandlebars(): HandlebarsTemplateDelegate<any> {
+    const mainTemplate = readFile(`${TEMPLATES_DIR}/main.hbs`);
+    const classTemplate = readFile(`${TEMPLATES_DIR}/class.hbs`);
+    const methodTemplate = readFile(`${TEMPLATES_DIR}/method.hbs`);
+    Handlebars.registerPartial('class', classTemplate);
+    Handlebars.registerPartial('method', methodTemplate);
+    return Handlebars.compile(mainTemplate, { strict: true });
+  }
+}
+
+interface ClassReflection {
+  name: string;
+  methods: MethodReflection[];
+}
+
+interface MethodReflection {
+  name: string;
+  argumentValues: string[];
+  returnValue: string;
+  comment: string;
+  source: string;
+}
+
+class Parser {
+  public parseClass(reflections): ClassReflection {
+    const theModuleRaw = reflections.children[0];
+    const theClassRaw = theModuleRaw.children[0];
+
+    const methods = this.parseMethods(theClassRaw);
+    const result = {
+      name: theClassRaw.name,
+      methods
+    };
+    return result;
+  }
+
+  private parseMethods(theClassRaw): MethodReflection[] {
+    const methodsRaw = _.filter(theClassRaw.children, (child) => child.kind === Typedoc.ReflectionKind.Method);
+    methodsRaw.toString();
+    const result = [{
+      name: 'theName',
+      argumentValues: ['asd', 'zxc'],
+      returnValue: 'returnVal',
+      comment: 'bla bla bla',
+      source: 'fromHere'
+    }];
+
+    return result;
+  }
+}
+
+class ReflectionsReader {
+  private typedocApp: Typedoc.Application;
+  constructor() {
+    const tsconfig = JSON.parse(readFile(`${ROOT_DIR}/tsconfig.json`));
+    this.typedocApp = new Typedoc.Application({
+      excludeExternals: true,
+      excludePrivate: true,
+      excludeProtected: true,
+      includeDeclarations: true,
+      module: 'commonjs',
+      readme: 'none',
+      target: 'ES6',
+      ...tsconfig.compilerOptions
+    });
+  }
+  read(moduleName) {
+    return this.typedocApp.serializer.projectToObject(
+      this.typedocApp.convert(
+        this.typedocApp.expandInputFiles(
+          [`${SRC_DIR}/${moduleName}.ts`]
+        )
+      )
+    );
+  }
+}
+
+function readFile(f) {
+  return fs.readFileSync(f).toString();
+}
+
+new Main().generateApiDocsMarkdown();

scripts/generate-js-doc.js

@@ -1,83 +0,0 @@
-throw new Error('temporarily disabled, until newAPI is complete');
-/*
-const jsdoc2md = require('jsdoc-to-markdown');
-const fs = require('fs');
-const path = require('path');
-
-const BASE_DIR = './lib/src/params/';
-const OPTIONS_DIR = BASE_DIR + 'options/';
-const CONTAINERS_DIR = BASE_DIR + 'components/';
-const OUTPUT_DIR = './docs/docs/';
-const PARAMS_PARTIALS = ['./docs/templates/header.hbs', './docs/templates/sig-name.hbs'];
-const PARTIALS = [
-  './docs/templates/scope.hbs',
-  './docs/templates/docs.hbs',
-  './docs/templates/param-table-name.hbs',
-  '/docs/templates/linked-type-list.hbs',
-  './docs/templates/link.hbs',
-  './docs/templates/params-table.hbs'
-];
-
-const generateMarkdownForFile = ({ file, outputDir, partial, separator }) => {
-  const templateData = jsdoc2md.getTemplateDataSync({ files: file });
-  const classNames = getClassesInFile(templateData);
-  classNames.forEach((className) => createDocFileForClass({ className, templateData, outputDir, partial, separator }));
-};
-
-function getClassesInFile(templateData) {
-  const classNames = templateData.reduce((classNames, identifier) => {
-    if (identifier.kind === 'class') {
-      classNames.push(identifier.name);
-    }
-    return classNames;
-  }, []);
-  return classNames;
-}
-
-function createDocFileForClass({ className, templateData, outputDir, partial = [], separator = true }) {
-  const template = `{{#class name="${className}"}}{{>docs}}{{/class}}`;
-  const options = {
-    data: templateData,
-    template,
-    separators: separator,
-    'heading-depth': 1,
-    helper: ['./docs/linkify.js', './docs/stringify.js'],
-    partial: [...PARTIALS, ...partial]
-  };
-  console.log(`rendering ${className}`);
-  const output = jsdoc2md.renderSync(options);
-  fs.writeFileSync(path.resolve(outputDir, `${className}.md`), output);
-}
-
-function inputFiles() {
-  return [
-    { file: './lib/src/Navigation.js', outputDir: OUTPUT_DIR },
-    ...fs.readdirSync(OPTIONS_DIR).map((file) => {
-      return {
-        file: OPTIONS_DIR + file,
-        outputDir: OUTPUT_DIR + 'options/',
-        partial: PARAMS_PARTIALS,
-        separator: false
-      };
-    }),
-    ...fs.readdirSync(CONTAINERS_DIR)
-      .map((file) => {
-        return {
-          file: CONTAINERS_DIR + file,
-          outputDir: OUTPUT_DIR,
-          partial: PARAMS_PARTIALS,
-          separator: false
-        };
-      }),
-    ...fs.readdirSync(BASE_DIR)
-      .filter((file) => fs.statSync(BASE_DIR + file).isFile())
-      .map((file) => {
-        return {
-          file: BASE_DIR + file,
-          outputDir: OUTPUT_DIR
-        };
-      })
-  ];
-}
-
-inputFiles().forEach((inputFile) => generateMarkdownForFile(inputFile)); */

scripts/local-docs.js

@@ -0,0 +1,32 @@
+const http = require('http');
+const fs = require('fs');
+
+const PORT = 3000;
+const ROOT = `${__dirname}/../docs`;
+
+run();
+
+function run() {
+
+  http.createServer((req, res) => {
+    console.log(req.url);
+    const path = `${ROOT}${req.url === '/' ? '/index.html' : req.url}`;
+    fs.readFile(path, (err, data) => {
+      if (err) {
+        console.error(err);
+        res.writeHead(404, err.message);
+      } else {
+        res.writeHead(200, {
+          'Content-Type': 'text/html',
+          'Cache-Control': 'private, no-cache, no-store, must-revalidate',
+          'Expires': '-1',
+          'Pragma': 'no-cache'
+        });
+        res.write(data);
+      }
+      res.end();
+    });
+  }).listen(PORT, () => {
+    console.log(`Listening for ${ROOT} on localhost:${PORT}`);
+  });
+}

tsconfig.json

@@ -6,7 +6,15 @@
     "target": "esnext",
     "module": "commonjs",
     "jsx": "react-native",
-    "declaration": true
+    "declaration": true,
+    "types": [
+      "jest",
+      "lodash",
+      "prop-types",
+      "react",
+      "react-native",
+      "react-test-renderer"
+    ]
   },
   "include": [
     "./lib/src/**/*"

tsn.sh

@@ -0,0 +1,3 @@
+#!/bin/bash -e
+
+ts-node --typeCheck --compilerOptions '{"types":["node"]}' $1