New documentation site (#6098)

* Completely rewritten the docs from scratch
* More coherent separation between guides and API documentation
* Switched to Docusaurus 2 since Docsify is deprecated
* More code samples
* Images and animated gifs were added where appropriate improve clarity (more will be added in the future)

.gitignore

@@ -3,6 +3,10 @@ dist
 package-lock.json
 .history/
 
+# Docusaurus
+.docusaurus
+.cache-loader
+
 ############
 # Node
 ############

.npmignore

@@ -4,6 +4,7 @@ e2e/
 integration/
 playground/
 scripts/
+website/
 .travis.yml
 wallaby.js
 package-lock.json

README.md

@@ -6,7 +6,7 @@
 [![StackExchange](https://img.shields.io/stackexchange/stackoverflow/t/react-native-navigation.svg)](https://stackoverflow.com/questions/tagged/wix-react-native-navigation)
 
 <h1 align="center">
-  <img src=".logo.png"/><br>
+  <img src=".logo.png"/><br/>
   React Native Navigation
 </h1>
 

docs/_sidebar.md

@@ -1,21 +0,0 @@
-- [Home](/)
-- Getting Started
-  - [Installing](/docs/Installing)
-  - [Working Locally](/docs/WorkingLocally)
-  - [Usage](/docs/Usage)
-  - [Showcases](/docs/showcases)
-- Guide
-  - [Launching the App](/docs/app-launch)
-  - [Top Level](/docs/top-level-api)
-  - [Screen](/docs/screen-api)
-  - [Events](/docs/events)
-  - [Layouts](/docs/layout-types)
-  - [Styling](/docs/styling)
-  - [TopBar Buttons](/docs/topBar-buttons) 
-  - [Animations](/docs/animations)
-  - [Constants](/docs/constants)
-  - [Third Party Libraries Support](/docs/third-party)
-- Migration from v1
-  - [Top Level](/docs/top-level-api-migration)
-  - [Options](/docs/options-migration)
-- [API](/api/README)

docs/api/Commands.md

@@ -1,115 +0,0 @@
-# Commands
-
-## setRoot
-
-`setRoot(simpleApi: any): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L15)
-
----
-
-## setDefaultOptions
-
-`setDefaultOptions(options: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L38)
-
----
-
-## mergeOptions
-
-`mergeOptions(componentId: any, options: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L46)
-
----
-
-## showModal
-
-`showModal(simpleApi: any): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L54)
-
----
-
-## dismissModal
-
-`dismissModal(componentId: any): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L65)
-
----
-
-## dismissAllModals
-
-`dismissAllModals(): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L72)
-
----
-
-## push
-
-`push(componentId: any, simpleApi: any): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L79)
-
----
-
-## pop
-
-`pop(componentId: any, options: any): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L91)
-
----
-
-## popTo
-
-`popTo(componentId: any): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L98)
-
----
-
-## popToRoot
-
-`popToRoot(componentId: any): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L105)
-
----
-
-## setStackRoot
-
-`setStackRoot(componentId: any, simpleApi: any): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L112)
-
----
-
-## showOverlay
-
-`showOverlay(simpleApi: any): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L124)
-
----
-
-## dismissOverlay
-
-`dismissOverlay(componentId: any): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L136)
-
----
-
-## getLaunchArgs
-
-`getLaunchArgs(): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/Commands.ts#L143)
-
----
-
-

docs/api/CommandsObserver.md

@@ -1,19 +0,0 @@
-# CommandsObserver
-
-## register
-
-`register(listener: CommandsListener): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/CommandsObserver.ts#L9)
-
----
-
-## notify
-
-`notify(commandName: string, params: __type): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/CommandsObserver.ts#L17)
-
----
-
-

docs/api/ComponentEventsObserver.md

@@ -1,67 +0,0 @@
-# ComponentEventsObserver
-
-## registerOnceForAllComponentEvents
-
-`registerOnceForAllComponentEvents(): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/ComponentEventsObserver.ts#L25)
-
----
-
-## bindComponent
-
-`bindComponent(component: Component<any>): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/ComponentEventsObserver.ts#L35)
-
----
-
-## unmounted
-
-`unmounted(componentId: string): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/ComponentEventsObserver.ts#L49)
-
----
-
-## notifyComponentDidAppear
-
-`notifyComponentDidAppear(event: ComponentDidAppearEvent): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/ComponentEventsObserver.ts#L53)
-
----
-
-## notifyComponentDidDisappear
-
-`notifyComponentDidDisappear(event: ComponentDidDisappearEvent): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/ComponentEventsObserver.ts#L57)
-
----
-
-## notifyNavigationButtonPressed
-
-`notifyNavigationButtonPressed(event: NavigationButtonPressedEvent): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/ComponentEventsObserver.ts#L61)
-
----
-
-## notifySearchBarUpdated
-
-`notifySearchBarUpdated(event: SearchBarUpdatedEvent): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/ComponentEventsObserver.ts#L65)
-
----
-
-## notifySearchBarCancelPressed
-
-`notifySearchBarCancelPressed(event: SearchBarCancelPressedEvent): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/ComponentEventsObserver.ts#L69)
-
----
-
-

docs/api/ComponentRegistry.md

@@ -1,11 +0,0 @@
-# ComponentRegistry
-
-## registerComponent
-
-`registerComponent(componentName: string, getComponentClassFunc: ComponentProvider, ReduxProvider: any, userStore: any): ComponentType<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/ComponentRegistry.ts#L10)
-
----
-
-

docs/api/ComponentWrapper.md

@@ -1,19 +0,0 @@
-# ComponentWrapper
-
-## wrap
-
-`wrap(componentName: string, OriginalComponentClass: React.ComponentType<any>, store: any, componentEventsObserver: any, ReduxProvider: any, reduxStore: any): React.ComponentType<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/ComponentWrapper.tsx#L7)
-
----
-
-## wrapWithRedux
-
-`wrapWithRedux(WrappedComponent: any, ReduxProvider: any, reduxStore: any): React.ComponentType<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/ComponentWrapper.tsx#L64)
-
----
-
-

docs/api/Constants.md

@@ -1,32 +0,0 @@
-# Constants
-
-## backButtonId
-
-`backButtonId (string)`
-
----
-## bottomTabsHeight
-
-`bottomTabsHeight (number)`
-
----
-## statusBarHeight
-
-`statusBarHeight (number)`
-
----
-## topBarHeight
-
-`topBarHeight (number)`
-
----
-
-## get
-
-`get(): Promise<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/Constants.ts#L4)
-
----
-
-

docs/api/Element.md

@@ -1,32 +0,0 @@
-# Element
-
-## context
-
-`context (any)`
-
----
-## props
-
-`props (Readonly<object> & Readonly<object>)`
-
----
-## refs
-
-`refs (object)`
-
----
-## state
-
-`state (Readonly<any>)`
-
----
-
-## render
-
-`render(): Element`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/Element.tsx#L18)
-
----
-
-

docs/api/EventSubscription.md

@@ -1,11 +0,0 @@
-# EventSubscription
-
-## remove
-
-`remove(): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/interfaces/EventSubscription.ts#L2)
-
----
-
-

docs/api/EventsRegistry.md

@@ -1,83 +0,0 @@
-# EventsRegistry
-
-## registerAppLaunchedListener
-
-`registerAppLaunchedListener(callback: function): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L17)
-
----
-
-## registerComponentDidAppearListener
-
-`registerComponentDidAppearListener(callback: function): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L21)
-
----
-
-## registerComponentDidDisappearListener
-
-`registerComponentDidDisappearListener(callback: function): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L25)
-
----
-
-## registerCommandCompletedListener
-
-`registerCommandCompletedListener(callback: function): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L29)
-
----
-
-## registerBottomTabSelectedListener
-
-`registerBottomTabSelectedListener(callback: function): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L33)
-
----
-
-## registerNavigationButtonPressedListener
-
-`registerNavigationButtonPressedListener(callback: function): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L37)
-
----
-
-## registerSearchBarUpdatedListener
-
-`registerSearchBarUpdatedListener(callback: function): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L41)
-
----
-
-## registerSearchBarCancelPressedListener
-
-`registerSearchBarCancelPressedListener(callback: function): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L45)
-
----
-
-## registerCommandListener
-
-`registerCommandListener(callback: function): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L49)
-
----
-
-## bindComponent
-
-`bindComponent(component: Component<any>): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/events/EventsRegistry.ts#L53)
-
----
-
-

docs/api/LayoutTreeCrawler.md

@@ -1,65 +0,0 @@
-# LayoutTreeCrawler
-
-## store
-
-`store (any)`
-
----
-
-## crawl
-
-`crawl(node: LayoutNode): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeCrawler.ts#L27)
-
----
-
-## processOptions
-
-`processOptions(options: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeCrawler.ts#L39)
-
----
-
-## _handleComponent
-
-`_handleComponent(node: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeCrawler.ts#L43)
-
----
-
-## _savePropsToStore
-
-`_savePropsToStore(node: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeCrawler.ts#L49)
-
----
-
-## _applyStaticOptions
-
-`_applyStaticOptions(node: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeCrawler.ts#L53)
-
----
-
-## _assertKnownLayoutType
-
-`_assertKnownLayoutType(type: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeCrawler.ts#L60)
-
----
-
-## _assertComponentDataName
-
-`_assertComponentDataName(component: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeCrawler.ts#L66)
-
----
-
-

docs/api/LayoutTreeParser.md

@@ -1,75 +0,0 @@
-# LayoutTreeParser
-
-## parse
-
-`parse(api: any): LayoutNode`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L10)
-
----
-
-## _topTabs
-
-`_topTabs(api: any): LayoutNode`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L29)
-
----
-
-## _sideMenu
-
-`_sideMenu(api: any): LayoutNode`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L38)
-
----
-
-## _sideMenuChildren
-
-`_sideMenuChildren(api: any): LayoutNode[]`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L47)
-
----
-
-## _bottomTabs
-
-`_bottomTabs(api: any): LayoutNode`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L77)
-
----
-
-## _stack
-
-`_stack(api: any): LayoutNode`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L86)
-
----
-
-## _component
-
-`_component(api: any): LayoutNode`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L95)
-
----
-
-## _externalComponent
-
-`_externalComponent(api: any): LayoutNode`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L104)
-
----
-
-## _splitView
-
-`_splitView(api: any): LayoutNode`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/LayoutTreeParser.ts#L113)
-
----
-
-

docs/api/LayoutType.md

@@ -1,12 +0,0 @@
-# LayoutType
-
-- BottomTabs
-- Component
-- ExternalComponent
-- SideMenuCenter
-- SideMenuLeft
-- SideMenuRight
-- SideMenuRoot
-- SplitView
-- Stack
-- TopTabs

docs/api/NativeCommandsSender.md

@@ -1,115 +0,0 @@
-# NativeCommandsSender
-
-## setRoot
-
-`setRoot(commandId: string, layout: object): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L9)
-
----
-
-## setDefaultOptions
-
-`setDefaultOptions(options: object): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L13)
-
----
-
-## mergeOptions
-
-`mergeOptions(componentId: string, options: object): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L17)
-
----
-
-## push
-
-`push(commandId: string, onComponentId: string, layout: object): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L21)
-
----
-
-## pop
-
-`pop(commandId: string, componentId: string, options: object): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L25)
-
----
-
-## popTo
-
-`popTo(commandId: string, componentId: string): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L29)
-
----
-
-## popToRoot
-
-`popToRoot(commandId: string, componentId: string): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L33)
-
----
-
-## setStackRoot
-
-`setStackRoot(commandId: string, onComponentId: string, layout: object): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L37)
-
----
-
-## showModal
-
-`showModal(commandId: string, layout: object): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L41)
-
----
-
-## dismissModal
-
-`dismissModal(commandId: string, componentId: string): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L45)
-
----
-
-## dismissAllModals
-
-`dismissAllModals(commandId: string): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L49)
-
----
-
-## showOverlay
-
-`showOverlay(commandId: string, layout: object): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L53)
-
----
-
-## dismissOverlay
-
-`dismissOverlay(commandId: string, componentId: string): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L57)
-
----
-
-## getLaunchArgs
-
-`getLaunchArgs(commandId: string): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeCommandsSender.ts#L61)
-
----
-
-

docs/api/NativeEventsReceiver.md

@@ -1,67 +0,0 @@
-# NativeEventsReceiver
-
-## registerAppLaunchedListener
-
-`registerAppLaunchedListener(callback: function): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L28)
-
----
-
-## registerComponentDidAppearListener
-
-`registerComponentDidAppearListener(callback: function): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L32)
-
----
-
-## registerComponentDidDisappearListener
-
-`registerComponentDidDisappearListener(callback: function): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L36)
-
----
-
-## registerNavigationButtonPressedListener
-
-`registerNavigationButtonPressedListener(callback: function): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L40)
-
----
-
-## registerSearchBarUpdatedListener
-
-`registerSearchBarUpdatedListener(callback: function): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L44)
-
----
-
-## registerSearchBarCancelPressedListener
-
-`registerSearchBarCancelPressedListener(callback: function): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L48)
-
----
-
-## registerCommandCompletedListener
-
-`registerCommandCompletedListener(callback: function): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L52)
-
----
-
-## registerBottomTabSelectedListener
-
-`registerBottomTabSelectedListener(callback: function): EventSubscription`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/NativeEventsReceiver.ts#L56)
-
----
-
-

docs/api/Navigation.md

@@ -1,196 +0,0 @@
-# Navigation
-
-## Element
-
-`Element (React.ComponentType<object>)`
-
----
-## store
-
-`store (Store)`
-
----
-
-## registerComponent
-
-`registerComponent(componentName: string, getComponentClassFunc: ComponentProvider): ComponentType<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L52)
-
-Every navigation component in your app must be registered with a unique name.
-The component itself is a traditional React component extending React.Component.
-
----
-
-## registerComponentWithRedux
-
-`registerComponentWithRedux(componentName: string, getComponentClassFunc: ComponentProvider, ReduxProvider: any, reduxStore: any): ComponentType<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L60)
-
-Utility helper function like registerComponent,
-wraps the provided component with a react-redux Provider with the passed redux store
-
----
-
-## setRoot
-
-`setRoot(layout: any): Promise<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L67)
-
-Reset the app to a new layout
-
----
-
-## setDefaultOptions
-
-`setDefaultOptions(options: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L74)
-
-Set default options to all screens. Useful for declaring a consistent style across the app.
-
----
-
-## mergeOptions
-
-`mergeOptions(componentId: string, options: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L81)
-
-Change a component's navigation options
-
----
-
-## showModal
-
-`showModal(layout: any): Promise<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L88)
-
-Show a screen as a modal.
-
----
-
-## dismissModal
-
-`dismissModal(componentId: string): Promise<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L95)
-
-Dismiss a modal by componentId. The dismissed modal can be anywhere in the stack.
-
----
-
-## dismissAllModals
-
-`dismissAllModals(): Promise<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L102)
-
-Dismiss all Modals
-
----
-
-## push
-
-`push(componentId: string, layout: any): Promise<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L109)
-
-Push a new layout into this screen's navigation stack.
-
----
-
-## pop
-
-`pop(componentId: string, params: any): Promise<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L116)
-
-Pop a component from the stack, regardless of it's position.
-
----
-
-## popTo
-
-`popTo(componentId: string): Promise<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L123)
-
-Pop the stack to a given component
-
----
-
-## popToRoot
-
-`popToRoot(componentId: string): Promise<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L130)
-
-Pop the component's stack to root.
-
----
-
-## setStackRoot
-
-`setStackRoot(componentId: string, layout: any): Promise<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L137)
-
-Sets new root component to stack.
-
----
-
-## showOverlay
-
-`showOverlay(layout: any): Promise<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L144)
-
-Show overlay on top of the entire app
-
----
-
-## dismissOverlay
-
-`dismissOverlay(componentId: string): Promise<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L151)
-
-dismiss overlay by componentId
-
----
-
-## getLaunchArgs
-
-`getLaunchArgs(): Promise<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L158)
-
-Resolves arguments passed on launch
-
----
-
-## events
-
-`events(): EventsRegistry`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L165)
-
-Obtain the events registry instance
-
----
-
-## constants
-
-`constants(): Promise<any>`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/Navigation.ts#L172)
-
-Constants coming from native
-
----
-
-

docs/api/OptionsModalPresentationStyle.md

@@ -1,10 +0,0 @@
-# OptionsModalPresentationStyle
-
-- currentContext
-- formSheet
-- fullScreen
-- none
-- overCurrentContext
-- overFullScreen
-- pageSheet
-- popover

docs/api/OptionsProcessor.md

@@ -1,22 +0,0 @@
-# OptionsProcessor
-
-## store
-
-`store (any)`
-
----
-## uniqueIdProvider
-
-`uniqueIdProvider (any)`
-
----
-
-## processOptions
-
-`processOptions(options: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/commands/OptionsProcessor.ts#L8)
-
----
-
-

docs/api/README.md

@@ -1,20 +0,0 @@
-- [Home](/)
-- [Navigation](/api/Navigation)
-- [Constants](/api/Constants)
-- [Element](/api/Element)
-- [NativeCommandsSender](/api/NativeCommandsSender)
-- [NativeEventsReceiver](/api/NativeEventsReceiver)
-- [UniqueIdProvider](/api/UniqueIdProvider)
-- [Commands](/api/Commands)
-- [LayoutTreeCrawler](/api/LayoutTreeCrawler)
-- [LayoutTreeParser](/api/LayoutTreeParser)
-- [OptionsProcessor](/api/OptionsProcessor)
-- [ComponentRegistry](/api/ComponentRegistry)
-- [ComponentWrapper](/api/ComponentWrapper)
-- [Store](/api/Store)
-- [CommandsObserver](/api/CommandsObserver)
-- [ComponentEventsObserver](/api/ComponentEventsObserver)
-- [EventsRegistry](/api/EventsRegistry)
-- [EventSubscription](/api/EventSubscription)
-- [LayoutType](/api/LayoutType)
-- [OptionsModalPresentationStyle](/api/OptionsModalPresentationStyle)

docs/api/Store.md

@@ -1,43 +0,0 @@
-# Store
-
-## setPropsForId
-
-`setPropsForId(componentId: string, props: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L7)
-
----
-
-## getPropsForId
-
-`getPropsForId(componentId: string): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L11)
-
----
-
-## setComponentClassForName
-
-`setComponentClassForName(componentName: string, ComponentClass: any): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L15)
-
----
-
-## getComponentClassForName
-
-`getComponentClassForName(componentName: string): any`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L19)
-
----
-
-## clearComponent
-
-`clearComponent(id: string): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/components/Store.ts#L23)
-
----
-
-

docs/api/TouchablePreview.md

@@ -1,65 +0,0 @@
-# TouchablePreview
-
-## peeking
-
-`peeking (boolean)`
-
----
-
-## onRef
-
-`onRef(ref: Component<any>): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/TouchablePreview.tsx#L54)
-
----
-
-## onPress
-
-`onPress(): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/TouchablePreview.tsx#L58)
-
----
-
-## onPressIn
-
-`onPressIn(): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/TouchablePreview.tsx#L68)
-
----
-
-## onTouchStart
-
-`onTouchStart(event: GestureResponderEvent): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/TouchablePreview.tsx#L85)
-
----
-
-## onTouchMove
-
-`onTouchMove(event: GestureResponderEventWithForce): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/TouchablePreview.tsx#L90)
-
----
-
-## onTouchEnd
-
-`onTouchEnd(): void`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/TouchablePreview.tsx#L106)
-
----
-
-## render
-
-`render(): Element`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/TouchablePreview.tsx#L115)
-
----
-
-

docs/api/UniqueIdProvider.md

@@ -1,11 +0,0 @@
-# UniqueIdProvider
-
-## generate
-
-`generate(prefix: string): string`
-
-[source](https://github.com/wix/react-native-navigation/blob/v2/lib/src/adapters/UniqueIdProvider.ts#L4)
-
----
-
-

docs/api/_sidebar.md

@@ -1,20 +0,0 @@
-- [Home](/)
-- [Navigation](/api/Navigation)
-- [Constants](/api/Constants)
-- [Element](/api/Element)
-- [NativeCommandsSender](/api/NativeCommandsSender)
-- [NativeEventsReceiver](/api/NativeEventsReceiver)
-- [UniqueIdProvider](/api/UniqueIdProvider)
-- [Commands](/api/Commands)
-- [LayoutTreeCrawler](/api/LayoutTreeCrawler)
-- [LayoutTreeParser](/api/LayoutTreeParser)
-- [OptionsProcessor](/api/OptionsProcessor)
-- [ComponentRegistry](/api/ComponentRegistry)
-- [ComponentWrapper](/api/ComponentWrapper)
-- [Store](/api/Store)
-- [CommandsObserver](/api/CommandsObserver)
-- [ComponentEventsObserver](/api/ComponentEventsObserver)
-- [EventsRegistry](/api/EventsRegistry)
-- [EventSubscription](/api/EventSubscription)
-- [LayoutType](/api/LayoutType)
-- [OptionsModalPresentationStyle](/api/OptionsModalPresentationStyle)

docs/docs/Usage.md

@@ -1,106 +0,0 @@
-# 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 features 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. To enjoy API autocompletion, use an IDE that supports it, like VSCode or Webstorm.
-- Take a look 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 a Redux store). Analgous to ReactNative's `AppRegistry.registerComponent`.
-
-```js
-Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
-```
-
-
-### registerAppLaunchedListener(callback)
-This event is called once the app is launched. It's where you will initialize the app with the layout you want, via the SetRoot command. This creates the native layout hierarchy, loading React components into the `component` by name. 
-
-Afterwards, the app is ready for user interaction. (Common gotcha: Be sure not to run setRoot before registerAppLaunchedListener() has fired!)
-
-```js
-Navigation.events().registerAppLaunchedListener(() => {
-  Navigation.setRoot({
-    root: {
-      component: {
-        name: 'navigation.playground.WelcomeScreen'
-      }
-    }
-  });
-});
-```
-
-As specified in the [LayoutTypes](docs/layout-types) part of the documentation, we use the layout type `component` here, which renders a React component but does not allow you to navigate to others.
-
-If you want to navigate, use a `stack` layout type:
-```js
-Navigation.events().registerAppLaunchedListener(() => {
-  Navigation.setRoot({
-    root: {
-      stack: {
-        children: [{
-          component: {
-            name: "navigation.playground.WelcomeScreen"
-          }
-        }]
-      }
-    }
-  });
-});
-```
-
-## Screen Lifecycle
-
-The `componentDidAppear` and `componentDidDisappear` functions are special React Native Navigation lifecycle callbacks that are called on the component when it appears and disappears (after it was bounded using `Navigation.events().bindComponent(this)`). 
-
-Similar to React's `componentDidMount` and `componentWillUnmount`, what's different is that they represent whether the user can actually see the component in question -- and not just whether it's been mounted or not. Because of the way React Native Navigation optimizes performance, a component is actually `mounted` as soon as it's part of a layout -- but it is not always `visible` (for example, when another screen is `pushed` on top of it).
-
-There are lots of use cases for these. For example: starting and stopping an animation while the component is shown on-screen.
-
-> 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, and bind the screen to the Navigation events module which will call all functions automatically:
-
-```js
-class LifecycleScreenExample extends Component {
-  constructor(props) {
-    super(props);
-    Navigation.events().bindComponent(this);
-    this.state = {
-      text: 'nothing yet'
-    };
-  }
-
-  componentDidAppear() {
-    this.setState({ text: 'componentDidAppear' });
-  }
-
-  componentDidDisappear() {
-    alert('componentDidDisappear');
-  }
-
-  navigationButtonPressed({buttonId}) {
-    // a navigation-based button (for example in the topBar) was clicked. See section on buttons.
-  }
-
-  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/WorkingLocally.md

@@ -1,88 +0,0 @@
-# Working 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](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)
-
-## 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`
-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`
-
-
-## 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.
-
-This will ensure good quality throughout the life of the project and will avoid unexpected breakages.
-
-No PR will be accepted without adequate test coverage.
-
-## Folder Structure
-
-| Folder | Description |
-| ------ | ----------- |
-| `lib` | The project itself composed of: |
-| `lib/android` | android sources and unit tests |
-| `lib/ios` | iOS sources and unit tests |
-| `lib/src` | TypeScript sources and unit tests |
-| `lib/dist` | compiled javascript sources and unit tests |
-| `lib/dist/index.js` | the entry point for `import Navigation from 'react-native-navigation'` |
-| `e2e` | [detox](https://github.com/wix/detox) e2e tests on both Android and iOS |
-| `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
-
-| Command | Description |
-| ------- | ----------- |
-| `npm install` | installs dependencies |
-| `npm run build` | compiles TypeScript sources `./lib/src` into javascript `./lib/dist` |
-| `npm run clean` | cleans all build directories, stops packager, fixes flakiness by removing watchman cache, etc. |
-| `npm run start` | starts the react-native packager for local debugging |
-| `npm run start-windows` | starts the react-native packager for local debugging [Windows only] |
-| `npm run xcode` | for convenience, opens xcode in this project |
-| `npm run install-android`  |  builds playground debug/release version and installs on running android devices/emulators. <br> **Options:** `-- --release` |
-| `npm run uninstall-android` | uninstalls playground from running android devices/simulators |
-| `npm run test-js` | runs javascript tests and coverage report |
-| `npm run test-unit-ios` | runs ios unit tests in debug/release <br> **Options:** `-- --release` |
-| `npm run test-unit-android` | runs android unit tests in debug/release <br> **Options:** `-- --release` |
-| `npm run test-e2e-ios` | runs the ios e2e tests using [detox](https://github.com/wix/detox) in debug/release <br> **Options:** `-- --release`|
-| `npm run test-e2e-android` | runs the android e2e tests using [detox](https://github.com/wix/detox) in debug/release <br> **Options:** `-- --release` |
-| `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+.
-* If the bundling fails with an error like `bundling failed: ambiguous resolution`, reset the `rn-packager` cache manually.
-	```
-	node ./node_modules/react-native/local-cli/cli.js start --reset-cache
-	```
-

docs/docs/animations.md

@@ -1,178 +0,0 @@
-# Animations
-
-## Shared element transition
-
-Shared element transitions allows us to provide visual continuity when navigating between destinations. It also
-focuses the user's attention on a significant element which gives the user better context when transitioning to
-another destination.
-
-!> At the moment, the transition is available on iOS for push and pop while on Android it's available only for push commands.
-We will soon add parity and expand the supported commands to show/dismiss modal and changing BottomTabs.
-
-### Example
-In the sections below we will use the following example from the playground app:
-* [Source screen](https://github.com/wix/react-native-navigation/blob/master/playground/src/screens/sharedElementTransition/CocktailsList.js)
-* [Destination screen](https://github.com/wix/react-native-navigation/blob/master/playground/src/screens/sharedElementTransition/CocktailDetailsScreen.js)
-
-<img src="https://github.com/wix/react-native-navigation/blob/master/docs/_images/sharedElement.gif?raw=true"/>
-
-
-
-
-#### Transition breakdown
-Four elements are animated in this example.
-
-* **image** - the item's image is animated to the next screen.
-  * Image scale (resizeMode)
-  * position on screen
-
-* **image background** - each item has a "shadow" view which transitions to the next screen and turns into a colorful header.
-  * scale
-  * position on screen
-
-* **title** - the item's title is animated to the next screen.
-  * font size
-  * font color
-  * position on screen
-
-* **Description** - the item's description in the destination screen.
-  * fade-in
-  * translation y
-
-
-### API
-#### Step 1 - set a nativeID prop to elements in the source screen
-In order for RNN to be able to detect the corresponding native views of the elements,
-each element must include a unique `nativeID` prop.
-
-```jsx
-<Image
-  source={item.image}
-  nativeID={`image${item.id}`}
-  style={styles.image}
-  resizeMode={'contain'} />
-```
-
-#### Step 2 - set a nativeID prop to elements in the destination screen
-
-```jsx
-<Image
-  source={this.props.image}
-  nativeID={`image${this.props.id}Dest`}
-  style={styles.image} />
-```
-
-#### Step 3 - Declare the shared element animation when pushing the screen
-
-```jsx
-Navigation.push(this.props.componentId, {
-  component: {
-    name: Screens.CocktailDetailsScreen,
-    passProps: { ...item },
-    options: {
-      animations: {
-        push: {
-          sharedElementTransitions: [
-            {
-              fromId: `image${item.id}`,
-              toId: `image${item.id}Dest`
-            }
-          ]
-        }
-      }
-    }
-  }
-});
-```
-
-## Element Transitions
-Element transitions allow you to animate elements during shared element transitions.
-
-### Example
-In the sections below we will use the following example from the playground app:
-* [Source screen](https://github.com/wix/react-native-navigation/blob/master/playground/src/screens/sharedElementTransition/CocktailsList.js)
-* [Destination screen](https://github.com/wix/react-native-navigation/blob/master/playground/src/screens/sharedElementTransition/CocktailDetailsScreen.js)
-
-### API
-#### Step 1 - set a nativeID prop to elements either source or destination screens
-
-```jsx
-<Text
-  nativeID='description'
-  style={styles.description}>
-  {this.props.description}
-</Text>
-```
-
-#### Step 2 - Declare the element animation when pushing the screen
-
-```jsx
-Navigation.push(this.props.componentId, {
-  component: {
-    name: Screens.CocktailDetailsScreen,
-    passProps: { ...item },
-    options: {
-      animations: {
-        push: {
-          elementTransitions: [
-            {
-              id: 'description',
-              alpha: {
-                from: 0, // We don't declare 'to' value as that is the element's current alpha value, here we're essentially animating from 0 to 1
-                duration: SHORT_DURATION
-              },
-              translationY: {
-                from: 16, // Animate translationY from 16dp to 0dp
-                duration: SHORT_DURATION
-              }
-            }
-          ]
-        }
-      }
-    }
-  }
-});
-```
-
-## Peek and Pop (iOS 11.4+) (Preview API)
-
-react-native-navigation supports the [Peek and pop](
-https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/Adopting3DTouchOniPhone/#//apple_ref/doc/uid/TP40016543-CH1-SW3) feature in iOS 11.4 and newer.
-
-This works by passing a ref a componentent you would want to transform into a peek view. We have included a handly component to handle all the touches and ref for you.
-
-```jsx
-const handlePress ({ reactTag }) => {
-  Navigation.push(this.props.componentId, {
-    component {
-      name: 'previewed.screen',
-      options: {
-        preview: {
-          reactTag,
-          height: 300,
-          width: 300,
-          commit: true,
-          actions: [{
-            title: "Displayed Name",
-            id: "actionId",
-            style: 'default', /* or 'selected', 'destructive'*/
-            actions: [/*define a submenu of actions with the same options*/]
-          }]
-        },
-      },
-    },
-  });
-};
-
-const Button = (
-  <Navigation.TouchablePreview
-    touchableComponent={TouchableHighlight}
-    onPress={handlePress}
-    onPressIn={handlePress}
-  >
-    <Text>My button</Text>
-  </Navigation.TouchablePreview>
-);
-```
-
-All options except for reactTag are optional. Actions trigger the same event as [navigation button presses](https://wix.github.io/react-native-navigation/#/docs/topBar-buttons?id=handling-button-press-events). To react when a preview is committed, listen to the [previewCompleted](https://wix.github.io/react-native-navigation/#/docs/events?id=previewcompleted-ios-114-only) event.

docs/docs/app-launch.md

@@ -1,28 +0,0 @@
-# App Launch
-When your app is launched for the first time, the bundle is parsed and executed. At this point you need to show your UI. To do so, Listen to the `appLaunched` event and call `Navigation.setRoot` when the event is received.
-
-```js
-Navigation.events().registerAppLaunchedListener(() => {
-  // Each time the event is received we should call Navigation.setRoot
-});
-```
-
-!> Register the listener with `registerAppLaunchedListener` as soon as possible - it should be one of the first lines in your `index.js` file.
-If you're observing a "white screen" or a hanging splash screen after relaunching your app, it probably means `Navigation.setRoot` isn't called once the app has launched. Perhaps the listener was registered too late.
-
-## The difference between the platforms
-When your app is launched, RN makes sure Js context is running. Js context is what enables you to execute JavaScript code.
-There are a few differences between iOS and Android in this regard
-
-### iOS
-Whenever the app is put into the background, the app process could potentially be destroyed by the system. If this destruction of the app takes place, the Js context will be destroyed along with the app process.
-
-### Android
-An Android application is typically bound to two contexts:
-1. Application context - bound to the app process
-2. Activity context - bound to app UI
-
-React's Js Context is executed on and bound to the Application context. This means that even when the Activity context (and thus the UI) is destroyed, React's Js Context remains active until the Application (and your process) are destroyed by the system.
-
-!>*Important!* Because of this, when your app returns to foreground, Js Context might still exist on Android, even when the Activity and UI context has been destroyed - meaning you might not need to initialise all of your app logic; instead you'll only need to call `Navigation.setRoot` to repopulate the UI context. This circumstance can easily be determined by setting a flag on your app's first `appLaunched` event, and checking the value of that flag on subsequent `appLaunched` events -- if the flag is true in your `appLaunched` callback, you need to call `Navigation.setRoot` to repopulate the UI.
-

docs/docs/constants.md

@@ -1,21 +0,0 @@
-# Constants
-
-!> Note! iOS resolves the values from the currently displayed root. If the current root doesn't contain BottomTabs - it will return 0 as the BottomTabs height while Android will always return a static value.
-
-## statusBarHeight
-```js
-const constants = await Navigation.constants();
-const statusBarHeight = constants.statusBarHeight;
-```
-
-## topBarHeight
-```js
-const constants = await Navigation.constants();
-const topBarHeight = constants.topBarHeight;
-```
-
-## bottomTabsHeight
-```js
-const constants = await Navigation.constants();
-const bottomTabsHeight = constants.bottomTabsHeight;
-```

docs/docs/layout-types.md

@@ -1,428 +0,0 @@
-# Layouts
-
-The possibilities of the RNN layout API are wide open in terms of what you can construct with it: stacks, tabs and drawers in many combinations.
-
-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.
-
-## component
-
-Component layout holds a single react component.
-
-```js
-const component = {
-  id: 'component1', // Optional, Auto generated if empty
-  name: 'Your registered component name',
-  options: {},
-  passProps: {
-    text: 'This text will be available in your component.props'
-  }
-}
-```
-
-## stack
-
-Support children layouts of any kind.
-A stack can be initialised with more than one screen, in which case the last screen will be presented at the top of the stack.
-
-```js
-const stack = {
-  children: [
-    {
-      component: {}
-    },
-    {
-      component: {}
-    }
-  ],
-  options: {}
-}
-```
-
-### api
-### TopBar buttons
-#### Android:
-* LeftButtons just support one button 
-* RightButtons support three visable buttons, more getting replaced with a menu button 
-```js
-options: {
-  topBar: {
-    visible: true,
-    leftButtons: [
-      {
-        id: 'back',
-        icon: {
-          uri: 'back',
-        },
-      },
-    ],
-    rightButtons: [
-      {
-        id: 'search',
-        icon: {
-          uri: 'search',
-        },
-      },
-    ],
-  },
-},
-```
-### Customizations
-#### Custom TopBar Title
-It's possible to set a custom topBar title to implement a searchbar for example.
-```js
-options: {
-  topBar: {
-    visible: true,
-    title: {
-      component: {
-        id: 'app.Search.SearchInput',
-        name: 'app.Search.SearchInput', // required
-        alignment: 'center', // 'center' or 'fill'
-        passProps: {
-
-        },
-      },
-    },
-  },
-},
-```
-
-### Back button
-Push a ModalStack which requires a back button on the first screen.
-```js
-options: {
-  topBar: {
-    visible: true,
-    leftButtons: [
-      {
-        id: 'back',
-        icon: {
-          uri: 'back',
-        },
-      },
-    ],
-  },
-},
-```
-Catch the button press event inside the ModalScreen.
-
-```js
-navigationButtonPressed = ({ buttonId }) => {
-  const { componentId } = this.props;
-  if (buttonId === 'back') {
-    Navigation.dismissModal(componentId);
-  }
-}
-```
-
-
-## bottomTabs
-
-```js
-const bottomTabs = {
-  children: [
-    {
-      stack: {
-        children: [],
-        options: {
-          bottomTab: {
-            text: 'Tab 1',
-            icon: require('../images/one.png')
-          }
-        }
-      }
-    },
-    {
-      component: {
-        name: 'secondTabScreen',
-        options: {
-          bottomTab: {
-            text: 'Tab 2',
-            icon: require('../images/two.png')
-          }
-        }
-      }
-    }
-  ],
-  options: {}
-}
-```
-
-!> Note! On Android an `icon` is required when using `bottomTabs`.
-
-### Selecting tabs programmatically
-
-The selected index is a style property which can be updated using the `mergeOptions` command. In order to update the BottomTabs options, Pass the BottomTabs `componentId` or the `componentId` of one of its children.
-
-?>We'll use the following BottomTabs layout to demonstrate programmatic tab selection.
-
-```js
-const bottomTabs = {
-  id: 'BottomTabsId',
-  children: [
-    {
-      component: {
-        name: 'FirstScreen',
-        options: { ... }
-      }
-    },
-    {
-      component: {
-        id: 'SecondScreenId',
-        name: 'SecondScreen',
-        options: { ... }
-      }
-    }
-  ]
-}
-```
-
-#### selecting a tab by index
-
-The following `mergeOptions` command will select the second tab. We're passing the id of our BottomTabs, but we could also use the id of any of the child components, for example `SecondScreenId`.
-
-```js
-Navigation.mergeOptions('BottomTabsId', {
-  bottomTabs: {
-    currentTabIndex: 1
-  }
-});
-```
-
-#### selecting a tab by componentId
-
-Tabs can also be selected by componentId. This is particularly useful in cases where you don't know in which tab a screen is contained.
-
-For example, if invoked from one of the child components;`SecondScreen` or `FirstScreen`, the following merge command will select the tab containing the child.
-
-```js
-Navigation.mergeOptions(this.props.componentId, {
-  bottomTabs: {
-    currentTabId: this.props.componentId
-  }
-});
-```
-
-### Changing BottomTabs visibility
-
-The `visible` property can be used to control the BottomTab visibility.
-
-On **Android**, Visibility can be toggled dynamically using the `mergeOptions` command. When hiding BottomTabs, `drawBehind: true` should be specified in order for the screen to render behind the area which was previously allocated to the BottomTabs.
-
-```js
-Navigation.mergeOptions(componentId, {
-  bottomTabs: {
-    visible: false,
-    ...Platform.select({ android: { drawBehind: true } })
-  },
-});
-```
-
-On **both** platforms visibility can be changed when pushing screens into a stack which is a direct child of a `BottomTabs` layout:
-
-```js
-Navigation.push(componentId, {
-  component: {
-    name: 'pushedScreen',
-    options: {
-      bottomTabs: {
-        visible: false
-      }
-    }
-  }
-});
-```
-
-### Updating options for a specific tab
-
-Updating (merging) tab specific options is done using the `mergeOptions` command. `mergeOptions` expects a `componentId` as first argument, therefore in order to update a specific tab we'll need to pass a `componentId` of a child of that specific tab.
-For example, Using the layout specified above, To update the `badge` property of the second tab we'll call `mergeOptions` with `SecondScreenId`.
-
-```js
-Navigation.mergeOptions('SecondScreenId', {
-  bottomTab: {
-    badge: 'New'
-  }
-});
-```
-
-## sideMenu
-
-This layout allows to implement sidemenus, which can be opened by swiping from one side towards the other side.
-`left` and `right` are optional and contain the components, which gets rendered for the sidemenus. `center` is **required** and contains the main application, which **requires** to have a topBar aka `stack`.
-
-```js
-const sideMenu = {
-  left: {
-    component: {}
-  },
-  center: {
-    stack: {
-      options: {},
-      children: [{
-        component: {}
-      }]
-    }
-  },
-  right: {
-    component: {}
-  }
-}
-```
-
-### Opening the menu programmatically
-The  most common usecase is to open the sidemenus by pressing a [burger button in the topBar](https://wix.github.io/react-native-navigation/#/docs/layout-types?id=adding-a-hamburger-button). To achive this listen on the press event of the burger button and open the sidemenu by calling `Navigation.mergeOptions()` with `visible: true` for the sidemenu.
-```js
-navigationButtonPressed = ({ buttonId }) => {
-  const { componentId } = this.props;
-
-  if (buttonId === 'sideMenu') {
-    Navigation.mergeOptions(componentId, {
-      sideMenu: {
-        left: {
-          visible: true,
-        },
-      },
-    });
-  }
-}
-```
-
-### Adding a hamburger button
-For more information on how to add icons read [this article about react-native-vector-icons](https://wix.github.io/react-native-navigation/#/docs/third-party?id=react-native-vector-icons) or [this article about custom tab icons](https://wix.github.io/react-native-navigation/#/docs/styling?id=custom-tab-icons).
-
-```js
-leftButtons: [
-  {
-    id: 'sideMenu',
-    icon: {
-      uri: 'menu',
-    },
-  },
-],
-```
-
-## splitView (iOS only)
-
-Master and Detail based layout.
-
-You can change the it's options with `Navigation.mergeOptions('splitView1', { maxWidth: 400 })`.
-
-```js
-const splitView = {
-  id: 'splitView1', // Required to update options
-  master: {
-    // All layout types accepted supported by device, eg. `stack`
-  },
-  detail: {
-    // All layout types accepted supported by device, eg. `stack`
-  },
-  options: {
-    splitView: {
-      displayMode: 'auto', // Master view display mode: `auto`, `visible`, `hidden` and `overlay`
-      primaryEdge: 'leading', // Master view side: `leading` or `trailing`
-      minWidth: 150, // Minimum width of master view
-      maxWidth: 300, // Maximum width of master view
-    },
-  },
-}
-```
-
-## Layout Examples
-
-### Single page app with two side menus:
-
-```js
-Navigation.setRoot({
-  root: {
-    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({
-  root: {
-    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({
-  root: {
-    stack: {
-      options: {
-        topBar: {
-          visible: false
-        }
-      },
-      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',
-            }
-          }
-        }
-      ]
-    }
-  }
-});
-```

docs/docs/screen-api.md

@@ -1,278 +0,0 @@
-# Screen API
-
-This API is relevant when in a screen component context - it allows a screen to push other screens, pop screens, change its navigator style, etc. Access to this API is available through the `Navigation` module and expect to receive the current presented component id from screen `props.componentId`.
-Component must initialize in a stack in order to push another component.
-
-## push(componentId, layout)
-
-Push a new screen into this screen's navigation stack.
-
-```js
-Navigation.push(this.props.componentId, {
-  component: {
-    name: 'example.PushedScreen',
-    passProps: {
-      text: 'Pushed screen'
-    },
-    options: {
-      topBar: {
-        title: {
-          text: 'Pushed screen title'
-        }
-      }
-    }
-  }
-});
-```
-
-## pop(componentId, mergeOptions?)
-
-Pop the top screen from this screen's navigation stack.
-
-```js
-Navigation.pop(this.props.componentId);
-```
-
-## popToRoot(componentId, mergeOptions?)
-
-Pop all the screens until the root from this screen's navigation stack.
-
-```js
-Navigation.popToRoot(this.props.componentId);
-```
-## popTo(componentId, mergeOptions?)
-
-Pop the stack to a given component.
-
-```js
-Navigation.popTo(componentId);
-```
-
-## setStackRoot(componentId, params)
-
-Reset the current navigation stack to a new screen component (the stack root is changed, accepts multiple children).
-
-```js
-Navigation.setStackRoot(this.props.componentId, [
-    {
-    component: {
-          name: 'example.NewRootScreen',
-          passProps: {
-            text: 'Root screen'
-          },
-          options: {
-            animations: {
-              setStackRoot: {
-                enabled: true
-              }
-            }
-          }
-        }
-  }
-]);
-```
-
-## showModal(layout = {})
-
-Show a screen as a modal.
-
-```js
-Navigation.showModal({
-  stack: {
-    children: [{
-      component: {
-        name: 'example.ModalScreen',
-        passProps: {
-          text: 'stack with one child'
-        },
-        options: {
-          topBar: {
-            title: {
-              text: 'Modal'
-            }
-          }
-        }
-      }
-    }]
-  }
-});
-```
-
-## dismissModal(componentId, mergeOptions?)
-
-Dismiss the current modal.
-
-```js
-Navigation.dismissModal(this.props.componentId);
-```
-
-## dismissAllModals(mergeOptions?)
-
-Dismiss all the current modals at the same time.
-
-```js
-Navigation.dismissAllModals();
-```
-
-<!-- ## handleDeepLink(params = {})
-
-Trigger a deep link within the app. See [deep links](https://wix.github.io/react-native-navigation/#/deep-links) for more details about how screens can listen for deep link events.
-
-```js
-this.props.navigator.handleDeepLink({
-  link: "chats/2349823023" // the link string (required)
-});
-```
-
-> `handleDeepLink` can also be called statically:
-```js
-  import {Navigation} from 'react-native-navigation';
-  Navigation.handleDeepLink(...);
-``` -->
-
-## mergeOptions(componentId, options = {})
-
-Set options dynamically for component.
-
-WARNING! this is called after the component has been rendered at least once.
-If you want the options to apply as soon as the screen is created, use `static options(passProps){...}` or pass the options as part of the push/modal etc command.
-
-```js
-Navigation.mergeOptions(this.props.componentId, {
-  topBar: {
-    visible: true,
-    title: {
-      text: 'Title'
-    }
-  },
-  bottomTabs: {
-
-  },
-  bottomTab: {
-
-  },
-  sideMenu: {
-
-  },
-  overlay: {
-
-  }
-});
-```
-
-<!-- ## toggleDrawer(params = {})
-
-Toggle the side menu drawer assuming you have one in your app.
-
-```js
-this.props.navigator.toggleDrawer({
-  side: 'left', // the side of the drawer since you can have two, 'left' / 'right'
-  animated: true, // does the toggle have transition animation or does it happen immediately (optional)
-  to: 'open' // optional, 'open' = open the drawer, 'closed' = close it, missing = the opposite of current state
-});
-``` -->
-
-
-<!-- ## setOnNavigatorEvent(callback)
-
-Set a handler for navigator events (like nav button press). This would normally go in your component constructor.
-Can not be used in conjuction with `addOnNavigatorEvent`.
-
-```js
-// this.onNavigatorEvent will be our handler
-this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
-```
-
-## addOnNavigatorEvent(callback)
-
-Add a handler for navigator events (like nav button press). This would normally go in your component constructor.
-If you choose to use `addOnNavigatorEvent` instead of `setOnNavigatorEvent` you will be able to add multiple handlers.
-Bear in mind that you can't use both `addOnNavigatorEvent` and `setOnNavigatorEvent`.
-`addOnNavigatorEvent` returns a function, that once called will remove the registered handler. -->
-
-<!-- # Screen Visibility
-
-`const isVisible = await this.props.navigator.screenIsCurrentlyVisible()`
-
-## Listen visibility events in onNavigatorEvent handler
-
-```js
-export default class ExampleScreen extends Component {
-  constructor(props) {
-    super(props);
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
-  }
-  onNavigatorEvent(event) {
-    switch(event.id) {
-      case 'willAppear':
-       break;
-      case 'didAppear':
-        break;
-      case 'willDisappear':
-        break;
-      case 'didDisappear':
-        break;
-      case 'willCommitPreview':
-        break;
-    }
-  }
-}
-```
-
-## Listen to visibility events globally
-
-```js
-import {ScreenVisibilityListener as RNNScreenVisibilityListener} from 'react-native-navigation';
-
-export class ScreenVisibilityListener {
-
-  constructor() {
-    this.listener = new RNNScreenVisibilityListener({
-      didAppear: ({screen, startTime, endTime, commandType}) => {
-        console.log('screenVisibility', `Screen ${screen} displayed in ${endTime - startTime} millis after [${commandType}]`);
-      }
-    });
-  }
-
-  register() {
-    this.listener.register();
-  }
-
-  unregister() {
-    if (this.listener) {
-      this.listener.unregister();
-      this.listener = null;
-    }
-  }
-}
-```
-
-# Listening to tab selected events
-In order to listen to `bottomTabSelected` event, set an `onNavigatorEventListener` on screens that are pushed to BottomTab. The event is dispatched to the top most screen pushed to the selected tab's stack.
-
-```js
-export default class ExampleScreen extends Component {
-  constructor(props) {
-    super(props);
-    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
-  }
-
-  onNavigatorEvent(event) {
-	if (event.id === 'bottomTabSelected') {
-	  console.log('Tab selected!');
-	}
-	if (event.id === 'bottomTabReselected') {
-	  console.log('Tab reselected!');
-	}
-  }
-}
-```
-
-# Peek and pop (3D touch)
-
-react-native-navigation supports the [Peek and pop](
-https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/Adopting3DTouchOniPhone/#//apple_ref/doc/uid/TP40016543-CH1-SW3) feature by setting a react view reference as a `previewView` parameter when doing a push, more options are available in the `push` section.
-
-You can define actions and listen for interactions on the pushed screen with the `PreviewActionPress` event.
-
-Previewed screens will have the prop `isPreview` that can be used to render different things when the screen is in the "Peek" state and will then recieve a navigator event of `willCommitPreview` when in the "Pop" state. -->

docs/docs/styling.md

@@ -1,429 +0,0 @@
-# Styling Options
-
-You can style the navigator appearance and behavior by passing an `options` object. This object can be passed when the screen is originally created; can be defined per-screen by setting `static options(passProps)` on the screen component; and can be overridden when a screen is pushed, dynamically (after the screen was already rendered at least once) using `mergeOptions()`.
-
-The easiest way to style your screen is by adding `static options(passProps)` to your screen React component definition. `passProps` is the same passProps you can specify as part of the push/modal or other command operation.
-
-```js
-export default class StyledScreen extends Component {
-  static options(passProps) {
-    return {
-      topBar: {
-        title: {
-          text: 'My Screen'
-        },
-        drawBehind: true,
-        visible: false,
-        animate: false
-      }
-    };
-  }
-
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    return (
-      <View style={{flex: 1}}>...</View>
-     );
-  }
-```
-
-## Enabling persistent styling properties
-In v2 we added `setDefaultOptions` API for styles that should be applied on all components.
-
-> `setDefaultOptions` Does not update options of existing component, therefore it should be called before `setRoot`
-
-```js
-Navigation.setDefaultOptions({
-  topBar: {
-    visible: false
-  }
-});
-```
-
-## Setting styles dynamically
-Use the `mergeOptions` method to change a screen's style dynamically. WARNING! these options will be applied on an already rendered screen, after it has been rendered at least once.
-
-```js
-Navigation.mergeOptions(this.props.componentId, {
-  topBar: {
-    visible: true
-  }
-});
-```
-
-## Options object format
-
-### Common options
-
-```js
-{
-  statusBar: {
-    visible: false,
-    style: 'light' | 'dark'
-  },
-  layout: {
-    direction: 'ltr', // Supported directions are: 'rtl', 'ltr'
-    backgroundColor: 'white',
-    orientation: ['portrait', 'landscape'] // An array of supported orientations
-  },
-  modalPresentationStyle: 'overCurrentContext', // Supported styles are: 'default', 'formSheet', 'pageSheet', 'overFullScreen', 'overCurrentContext', 'currentContext', 'popover', 'fullScreen' and 'none'. On Android, only overCurrentContext and none are supported.
-  topBar: {
-    visible: true,
-    animate: false, // Controls whether TopBar visibility changes should be animated
-    hideOnScroll: true,
-    leftButtonColor: 'black',
-    rightButtonColor: 'black',
-    drawBehind: false,
-    testID: 'topBar',
-    title: {
-      text: 'Title',
-      fontSize: 14,
-      color: 'red',
-      fontFamily: 'Helvetica',
-      fontWeight: 'regular', // Available on iOS only, will ignore fontFamily style and use the iOS system fonts instead. Supported weights are: 'regular', 'bold', 'thin', 'ultraLight', 'light', 'medium', 'semibold', 'heavy' and 'black'.
-      component: {
-        name: 'example.CustomTopBarTitle',
-        alignment: 'center'
-      }
-    },
-    subtitle: {
-      text: 'Title',
-      fontSize: 14,
-      color: 'red',
-      fontFamily: 'Helvetica',
-      fontWeight: 'regular', // Available on iOS only, will ignore fontFamily style and use the iOS system fonts instead. Supported weights are: 'regular', 'bold', 'thin', 'ultraLight', 'light', 'medium', 'semibold', 'heavy' and 'black'.
-      alignment: 'center'
-    },
-    backButton: {
-      icon: require('icon.png'),
-      visible: true
-    },
-    background: {
-      color: '#00ff00',
-      component: {
-        name: 'example.CustomTopBarBackground'
-      }
-    }
-  },
-  bottomTabs: {
-    visible: true,
-    animate: false, // Controls whether BottomTabs visibility changes should be animated
-    currentTabIndex: 0,
-    currentTabId: 'currentTabId',
-    testID: 'bottomTabsTestID',
-    drawBehind: false,
-    backgroundColor: 'white'
-  },
-  bottomTab: {
-    text: 'Tab 1',
-    badge: '2',
-    badgeColor: 'red',
-    dotIndicator: {
-      color: 'green', // default red
-      size: 8, // default 6
-      visible: true // default false
-    }
-    testID: 'bottomTabTestID',
-    icon: require('tab.png'),
-    iconColor: 'red',
-    selectedIconColor: 'blue',
-    textColor: 'red',
-    selectedTextColor: 'blue',
-    fontFamily: 'Helvetica',
-    fontWeight: 'regular', // Available on iOS only, will ignore fontFamily style and use the iOS system fonts instead. Supported weights are: 'regular', 'bold', 'thin', 'ultraLight', 'light', 'medium', 'semibold', 'heavy' and 'black'.
-    fontSize: 10
-  },
-  sideMenu: {
-    left: {
-      width: 260,
-      height: 270,
-      visible: false,
-      enabled: true
-    },
-    right: {
-      width: 260,
-      height: 270,
-      visible: false,
-      enabled: true
-    }
-  },
-  overlay: {
-    interceptTouchOutside: true,
-    handleKeyboardEvents: true
-  },
-  modal: {
-    swipeToDismiss: true
-  }
-  preview: {
-    reactTag: 0, // result from findNodeHandle(ref)
-    width: 100,
-    height: 100,
-    commit: false,
-    actions: [{
-      id: 'ActionId1',
-      title: 'Action title',
-      style: 'selected', // default, selected, destructive,
-      actions: [/* ... */]
-    }]
-  }  
-}
-```
-
-### iOS specific options
-```js
-{
-  statusBar: {
-    hideWithTopBar: false,
-    blur: true
-  },
-  popGesture: true,
-  backgroundImage: require('background.png'),
-  rootBackgroundImage: require('rootBackground.png'),
-  topBar: {
-    barStyle: 'default' | 'black',
-    background: {
-      color: 'white',
-      translucent: true,
-      blur: false
-    }
-    noBorder: false,
-    backButton: {
-      title: 'Back',
-      showTitle: false
-    },
-    searchBar: true, // iOS 11+ native UISearchBar inside topBar
-    searchBarHiddenWhenScrolling: true,
-    searchBarPlaceholder: 'Search', // iOS 11+ SearchBar placeholder
-    largeTitle: {
-      visible: true,
-      fontSize: 30,
-      color: 'red',
-      fontFamily: 'Helvetica',
-      fontWeight: 'regular' // Available on iOS only, will ignore fontFamily style and use the iOS system fonts instead. Supported weights are: 'regular', 'bold', 'thin', 'ultraLight', 'light', 'medium', 'semibold', 'heavy' and 'black'.
-    },
-  },
-  sideMenu: {
-    left: {
-      shouldStretchDrawer: false, // defaults to true, when false sideMenu contents not stretched when opened past the width
-      animationVelocity: 2500 // defaults to 840, high number is a faster sideMenu open/close animation
-    },
-    right: {
-      shouldStretchDrawer: false, // defaults to true, when false sideMenu contents not stretched when opened past the width
-      animationVelocity: 2500 // defaults to 840, high number is a faster sideMenu open/close animation
-    },
-    animationType: 'parallax', // defaults to none if not provided, options are 'parallax', 'door', 'slide', or 'slide-and-scale'    
-    openGestureMode: 'entireScreen' | 'bezel'
-  }
-  bottomTabs: {
-    barStyle: 'default' | 'black',
-    translucent: true,
-    hideShadow: false
-  },
-  bottomTab: {
-    iconInsets: { top: 0, left: 0, bottom: 0, right: 0 },
-    selectedIcon: require('selectedTab.png'),
-    disableIconTint: true, //set true if you want to disable the icon tinting
-    disableSelectedIconTint: true
-  }
-}
-```
-
-### Android specific options
-
-```js
-{
-  statusBar: {
-    backgroundColor: 'red',
-    drawBehind: true,
-    visible: false
-  },
-  navigationBar: {
-    backgroundColor: 'red',
-  },
-  layout: {
-    topMargin: (await Navigation.constants()).statusBarHeight, // Set the layout's top margin
-    orientation: ['portrait', 'landscape'] | ['sensorLandscape'], // An array of supported orientations
-    componentBackgroundColor: 'red' // Set background color only for components, helps reduce overdraw if background color is set in default options.
-  },
-  topBar: {
-    height: 70, // TopBar height in dp
-    backButton: {
-      color: 'red'
-    },
-    borderColor: 'red',
-    borderHeight: 1.3,
-    elevation: 1.5, // TopBar elevation in dp
-    topMargin: 24, // top margin in dp
-    title: {
-      height: 70, // TitleBar height in dp
-      alignment: 'center', // Center title
-    }
-  },
-  bottomTabs: {
-    elevation: 8, // BottomTabs elevation in dp
-    titleDisplayMode: 'alwaysShow' | 'showWhenActive' | 'alwaysHide' | 'showWhenActiveForce' // Sets the title state for each tab. (showWhenActiveForce to be used when showWhenActive doesn't work, e.g. with three bottom tabs)
-  },
-  bottomTab: {
-    selectedFontSize: 19 // Selected tab font size in sp
-  },
-  fab: {
-    id: 'fab',  // required
-    backgroundColor: 'green',
-    clickColor: 'blue',
-    rippleColor: 'yellow',
-    visible: true,
-    icon: require('add.png'),
-    iconColor: 'white',
-    alignHorizontally: 'left', // one of 'left', 'right'
-    hideOnScroll: false,
-    size: 24,
-    actions: [{
-      id: 'fab-1',  // required
-      backgroundColor: 'green',
-      clickColor: 'blue',
-      rippleColor: 'yellow',
-      visible: true,
-      icon: require('add.png'),
-      iconColor: 'white',
-      size: 24,
-    }]
-  },
-}
-```
-
-### RTL layout usage
-In order to set layout direction to RTL use following options:
-```javascript
-{
-  layout: {
-    direction: rtl
-  },
-  ...
-}
-```
-
-also __Android__ requires to set `supportsRTL` in _AndroidManifest.xml_
-```xml
-<application
-      android:name=".MainApplication"
-+     android:supportsRtl="true"
-      ...
-      android:theme="@style/AppTheme">
-```
-
-## Styling the StatusBar
-If you set any styles related to the Status Bar, make sure that in Xcode > project > Info.plist, the property `View controller-based status bar appearance` is set to `YES`.
-
-## Custom fonts
-If you'd like to use a custom font, you'll first have to edit your project.
-
-* Android - add the `.ttf` or `.otf` files to `src/main/assets/fonts/`
-
-* iOS - follow this [guide](https://medium.com/@dabit3/adding-custom-fonts-to-react-native-b266b41bff7f)
-
-## Custom tab icons
-
-* Android - add corresponding resolution icons into folders in `android/app/src/main/res`.
-For example, `icon_name.png` in each drawable-x folder.
-* iOS - drag and drop to `Images.xcassets` in Xcode.
-For example, image set `icon_name` in `Images.xcassets` with x1, x2, x3.
-
-Then, the tab icon can be defined with the following syntax:
-
-```js
-bottomTab: {
-  icon: {
-    uri: 'icon_name',
-    ...
-  },
-  ...
-}
-```
-
-## Customizing screen animations
-Animation used for navigation commands that modify the layout hierarchy can be controlled in options. Animations can be modified per command and it's also possible to change the default animation for each command.
-
-## Animation properties
-
-The following properties can be animated:
-* x
-* y
-* alpha
-* scaleX
-* scaleY
-* rotationX
-* rotationY
-* rotation
-
-```js
-{
-  from: 0, // Mandatory, initial value
-  to: 1, // Mandatory, end value
-  duration: 400, // Default value is 300 ms
-  startDelay: 100, // Default value is 0
-  interpolation: 'accelerate' | 'decelerate' // Optional
-}
-```
-
-For example, changing the animation used when the app is first launched (Supported only on Android):
-```js
-Navigation.setDefaultOptions({
-  animations: {
-    setRoot: {
-      enabled: 'true' | 'false', // Optional, used to enable/disable the animation
-      alpha: {
-        from: 0,
-        to: 1,
-        duration: 400,
-        startDelay: 100,
-        interpolation: 'accelerate'
-      }
-    }
-  }
-});
-```
-
-## Customizing navigation commands animation
-
-Animations for the following set of commands can be customized
-* setRoot
-* push
-* pop
-* showModal
-* dismissModal
-
-## Customizing stack command animation
-
-When *pushing* and *popping* screens to and from a stack, you can control the TopBar, BottomTabs and actual content animations as separately.
-
-```js
-animations: {
-  push: {
-    enabled: 'true' | 'false', // Optional, used to enable/disable the animation
-    topBar: {
-      id: 'TEST', // Optional, id of the TopBar we'd like to animate.
-      alpha: {
-        from: 0,
-        to: 1
-      }
-    },
-    bottomTabs: {
-      alpha: {
-        from: 0,
-        to: 1
-      }
-    },
-    content: {
-      alpha: {
-        from: 0,
-        to: 1
-      }
-    }
-  },
-  pop: {
-    ...
-  }
-}
-```

docs/docs/third-party.md

@@ -1,101 +0,0 @@
-# Third Party Libraries Support
-
-## Redux
-
-Create a HOC which provides the redux store.
-```js
-import { Provider } from 'react-redux';
-
-let store;
-function ReduxProvider(Component) {
-    store = store || createStore({});
-
-    return (props) => (
-        <Provider store={store}>
-            <Component {...props} />
-        </Provider>
-    );
-}
-```
-Wrap all Screens, which need the redux store, with the HOC.
-```js
-import { Navigation } from 'react-native-navigation';
-
-export default () => {
-    Navigation.registerComponent('TestScreen', () => ReduxProvider(TestScreen), () => TestScreen);
-}
-```
-
-For more information about how to set up redux read the [react-redux docs](https://react-redux.js.org/)
-
-## react-native-vector-icons
-
-This library can be used to set icons as the following example does.
-For available icons read the [react-native-vector-icons docs](https://github.com/oblador/react-native-vector-icons).
-
-```js
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import { Navigation } from 'react-native-navigation';
-
-export default function startApp() {
-  Promise.all([
-    MaterialIcons.getImageSource('home', 25),
-    MaterialIcons.getImageSource('menu', 25),
-    MaterialIcons.getImageSource('search', 25),
-    MaterialIcons.getImageSource('add', 25),
-  ]).then(([homeIcon, menuIcon, searchIcon, addIcon]) => {
-    Navigation.setRoot({
-      root: {
-        sideMenu: {
-          id: 'main',
-          left: {
-            component: {
-              name: 'App.FirstBottomTab.HomeScreen',
-            },
-          },
-          center: {
-            bottomTabs: {
-              id: 'BottomTabs',
-              children: [{
-                stack: {
-                  id: 'FirstBottomTab',
-                  children: [{
-                    component: {
-                      name: 'App.FirstBottomTab.HomeScreen',
-                    },
-                  }],
-                  options: {
-                    topBar: {
-                      title: {
-                        text: 'Home',
-                      },
-                      leftButtons: [{
-                        id: 'sideMenu',
-                        icon: menuIcon,
-                      }],
-                      rightButtons: [{
-                        id: 'search',
-                        icon: searchIcon,
-                      }],
-                    },
-                    bottomTab: {
-                      text: 'FirstBottomTab',
-                      icon: homeIcon,
-                    },
-                    fab: {
-                      id: 'addRecipe',
-                      icon: addIcon,
-                    },
-                  },
-                },
-              }],
-            },
-          },
-        },
-      },
-    });
-  });
-}
-```
-
-Its also possible to to define custom icons without react-native-vector-icons within the iOS and Android project as described [here](https://wix.github.io/react-native-navigation/#/docs/styling?id=custom-tab-icons).

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

@@ -1,184 +0,0 @@
-# Top Level API Migration
-
-In order to make our API homogenous as much as possible, we provide setRoot function that will receive layout of any kind.
-
-## registerComponent
-Registering screens without redux or any wrapping providers is the same as in v1.
-```js
-Navigation.registerComponent('example.FirstTabScreen', () => FirstTabScreen);
-```
-
-### Registering screens with wrapping provider component
-```js
-Navigation.registerComponent('navigation.playground.ReduxScreen', () => (props) => (
-  <Provider store={reduxStore}>
-    <ReduxScreen {...props} />
-  </Provider>
-), () => ReduxScreen);
-```
-!>Note that `Navigation.registerComponentWithRedux` is deprecated
-
-
-## startTabBasedApp(params) -> setRoot({bottomTabs})
-
-```js
-Navigation.setRoot({
-  root: {
-    bottomTabs: {
-      children: [{
-        stack: {
-          children: [{
-            component: {
-              name: 'example.FirstTabScreen',
-              passProps: {
-                text: 'This is tab 1'
-              }
-            }
-          }],
-          options: {
-            bottomTab: {
-              text: 'Tab 1',
-              icon: require('../images/one.png'),
-              testID: 'FIRST_TAB_BAR_BUTTON'
-            }
-          }
-        }
-      },
-      {
-        component: {
-          name: 'navigation.playground.TextScreen',
-          passProps: {
-            text: 'This is tab 2'
-          },
-          options: {
-            bottomTab: {
-              text: 'Tab 2',
-              icon: require('../images/two.png'),
-              testID: 'SECOND_TAB_BAR_BUTTON'
-            }
-          }
-        }
-      }]
-    }
-  }
-});
-```
-
-## startSingleScreenApp(params) -> setRoot({stack})
-
-Change your app root into an app based on a single screen (like the iOS Calendar or Settings app). The screen will receive its own navigation stack with a native nav bar
-
-```js
-Navigation.setRoot({
-  root: {
-    stack: {
-      children: [{
-        component: {
-          name: 'example.WelcomeScreen',
-          passProps: {
-            text: 'stack with one child'
-          }
-        }
-      }],
-      options: {
-        topBar: {
-          title: {
-            text: 'Welcome screen'
-          }
-        }
-      }
-    }
-  }
-});
-```
-
-## showModal(params = {}) -> showModal(layout = {})
-
-Show a screen as a modal.
-
-```js
-Navigation.showModal({
-  stack: {
-    children: [{
-      component: {
-        name: 'example.ModalScreen',
-        passProps: {
-          text: 'stack with one child'
-        },
-        options: {
-          topBar: {
-            title: {
-              text: 'Modal with stack'
-            }
-          }
-        }
-      }
-    }]
-  }
-});
-```
-
-## dismissModal(params = {}) -> dismissModal(componentId)
-
-Dismiss the current modal.
-
-```js
-Navigation.dismissModal(this.props.componentId);
-```
-
-## dismissAllModals(params = {}) -> dismissAllModals()
-
-Dismiss all the current modals at the same time.
-
-```js
-Navigation.dismissAllModals();
-```
-
-<!-- ## showLightBox(params = {}) - Use showOverlay
-
-Show a screen as a lightbox.
-
-```js
-Navigation.showLightBox({
-  screen: 'example.LightBoxScreen', // unique ID registered with Navigation.registerScreen
-  passProps: {}, // simple serializable object that will pass as props to the lightbox (optional)
-  style: {
-    backgroundBlur: 'dark', // 'dark' / 'light' / 'xlight' / 'none' - the type of blur on the background
-    backgroundColor: '#ff000080', // tint color for the background, you can specify alpha here (optional)
-    tapBackgroundToDismiss: true // dismisses LightBox on background taps (optional)
-  }
-});
-``` -->
-
-<!-- ## dismissLightBox(params = {})
-
-Dismiss the current lightbox.
-
-```js
-Navigation.dismissLightBox();
-``` -->
-
-<!-- ## handleDeepLink(params = {})
-
-Trigger a deep link within the app. See [deep links](https://wix.github.io/react-native-navigation/#/deep-links) for more details about how screens can listen for deep link events.
-
-```js
-Navigation.handleDeepLink({
-  link: 'link/in/any/format',
-  payload: '' // (optional) Extra payload with deep link
-});
-``` -->
-
-<!-- ## registerScreen(screenID, generator)
-
-This is an internal function you probably don't want to use directly. If your screen components extend `Screen` directly (`import { Screen } from 'react-native-navigation'`), you can register them directly with `registerScreen` instead of with `registerComponent`. The main benefit of using `registerComponent` is that it wraps your regular screen component with a `Screen` automatically.
-
-```js
-Navigation.registerScreen('example.AdvancedScreen', () => AdvancedScreen);
-```
-
-## getCurrentlyVisibleScreenId()
-
-In some cases you might need the id of the currently visible screen. This method returns the unique id of the currently visible screen:
-`const visibleScreenInstanceId = await Navigation.getCurrentlyVisibleScreenId()`
-In order to have any use of this method, you'd need to map instanceId to screens your self. -->

docs/docs/top-level-api.md

@@ -1,105 +0,0 @@
-# Top Level API
-
-So as to make the navigation API as consistent and homogenous as possible, we begin with a single, unifying function -- setRoot. SetRoot receives properties for any kind of layout, whether tabs or stacks, or a combination of both (as seen in this example.)
-
-See [Layout types](docs/layout-types)
-
-
-## setRoot(layout)
-
-```js
-Navigation.setRoot({
-  root: {
-    bottomTabs: {
-      children: [{
-        stack: {
-          children: [{
-            component: {
-              name: 'example.FirstTabScreen',
-              passProps: {
-                text: 'This is tab 1'
-              }
-            }
-          }],
-          options: {
-            bottomTab: {
-              text: 'Tab 1',
-              icon: require('../images/one.png'),
-              testID: 'FIRST_TAB_BAR_BUTTON'
-            }
-          }
-        }
-      },
-      {
-        component: {
-          name: 'navigation.playground.TextScreen',
-          passProps: {
-            text: 'This is tab 2'
-          },
-          options: {
-            bottomTab: {
-              text: 'Tab 2',
-              icon: require('../images/two.png'),
-              testID: 'SECOND_TAB_BAR_BUTTON'
-            }
-          }
-        }
-      }]
-    }
-  }
-});
-```
-
-## showOverlay(layout = {})
-
-Shows a component as an overlay.
-
-```js
-Navigation.showOverlay({
-  component: {
-    name: 'example.Overlay',
-    options: {
-      overlay: {
-        interceptTouchOutside: true
-      },
-      layout: {
-        componentBackgroundColor: 'transparent', // Use this if you want your background to be transparent.
-      },
-    }
-  }
-});
-```
-
-## dismissOverlay(componentId)
-
-Dismisses an overlay matching the given overlay componentId.
-
-```js
-Navigation.dismissOverlay(this.props.componentId);
-```
-
-
-<!-- ## handleDeepLink(params = {})
-
-Triggers a deep link within the app. See [deep links](https://wix.github.io/react-native-navigation/#/deep-links) for more details about how screens can listen for deep link events.
-
-```js
-Navigation.handleDeepLink({
-  link: 'link/in/any/format',
-  payload: '' // (optional) Extra payload with deep link
-});
-``` -->
-
-<!-- ## registerScreen(screenID, generator)
-
-This is an internal function you probably don't want to use directly. If your screen components extend `Screen` directly (`import { Screen } from 'react-native-navigation'`), you can register them directly with `registerScreen` instead of with `registerComponent`. The main benefit of using `registerComponent` is that it wraps your regular screen component with a `Screen` automatically.
-
-```js
-Navigation.registerScreen('example.AdvancedScreen', () => AdvancedScreen);
-```
-
-## getCurrentlyVisibleScreenId()
-
-In some cases you might need the id of the currently visible screen. This method returns the unique id of the currently visible screen:
-`const visibleScreenInstanceId = await Navigation.getCurrentlyVisibleScreenId()`
-In order to have any use of this method, you'd need to map instanceId to screens yourself. -->

docs/docs/topBar-buttons.md

@@ -1,177 +0,0 @@
-# Button options
-
-The following options can be used to customise buttons.
-
-```js
-{
-  id: 'buttonOne',
-  icon: require('icon.png'),
-  component: {
-    name: 'example.CustomButtonComponent'
-  },
-  text: 'Button one',
-  enabled: true,
-  disableIconTint: false,
-  color: 'red',
-  disabledColor: 'black',
-  testID: 'buttonOneTestID',
-  fontFamily: 'Helvetica',
-  fontSize: 10
-  fontWeight: 'regular', // Available on iOS only, will ignore fontFamily style and use the iOS system fonts instead. Supported weights are: 'regular', 'bold', 'thin', 'ultraLight', 'light', 'medium', 'semibold', 'heavy' and 'black'.
-  // Android only
-  showAsAction: 'ifRoom', // See below for details.
-  // iOS only
-  systemItem: 'done', // Sets a system bar button item as the icon. Matches UIBarButtonSystemItem naming. See below for details.
-}
-```
-
-## iOS System Items
-On iOS, UIKit supplies some common bar button glyphs for developers to use. The following values can be supplied as values to to `systemItem` to use them as an icon for your button.
-
-* `done`
-* `cancel`
-* `edit`
-* `save`
-* `add`
-* `flexibleSpace`
-* `fixedSpace`
-* `compose`
-* `reply`
-* `action`
-* `organize`
-* `bookmarks`
-* `search`
-* `refresh`
-* `stop`
-* `camera`
-* `trash`
-* `play`
-* `pause`
-* `rewind`
-* `fastForward`
-* `undo`
-* `redo`
-
-More information about these glyphs can be found in [Apple's Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/system-icons/).
-
-
-## Android showAsAction
-
-The keyword `showAsAction` configures when and how an item should appear as an action item in the app bar. 
-A menu item can appear as an action item only when the activity includes an app bar.
-
-* `always`
-* `ifRoom`
-* `never`
-* `withText`
-
-[More info about `showAsAction` values](https://developer.android.com/guide/topics/resources/menu-resource)
-
-# Declaring Buttons statically
-
-Buttons can be defined in a screen's options:
-
-```js
-class MyScreen extends Component {
-  static options(passProps) {
-    return {
-      topBar: {
-        leftButtons: [
-          {
-            id: 'buttonOne',
-            icon: require('icon.png')
-          }
-        ],
-        rightButtons: [],
-      }
-    };
-  }
-  
-}
-```
-
-# Declaring buttons dynamically
-
-TopBar buttons can be declared dynamically as well when adding a screen to the layout hierarchy.
-
-```js
-Navigation.push(this.props.componentId, {
-  component: {
-    name: 'navigation.playground.PushedScreen',
-    options: {
-      topBar: {
-        rightButtons: [
-          {
-            id: 'buttonOne',
-            icon: require('icon.png')
-          }
-        ]
-      }
-    }
-  }
-}
-```
-
-# Handling button press events
-
-Navigation sends events on button clicks, to which you can subscribe from anywhere using `Navigation.events().registerNavigationButtonPressedListener((event) => {})`.
-Additionally the component can listen to the button clicks just for its own buttons (via componentId) by using `events().bindComponent(this)`.
-This has to be called if you want the component to handle navigation events, such as navigationButtonPressed.
-Example:
-
-```js
-class MyScreen extends Component {
-  static options(passProps) {
-    return {
-      topBar: {
-        rightButtons: {
-          id: 'buttonOne',
-          icon: require('icon.png')
-        }
-      }
-    };
-  }
-
-  constructor(props) {
-    super(props);
-    Navigation.events().bindComponent(this); // <== Will be automatically unregistered when unmounted
-  }
-
-  navigationButtonPressed({ buttonId }) {
-    // will be called when "buttonOne" is clicked
-  }
-}
-```
-
-# Modifying buttons at runtime
-
-As buttons are part of a screen's options, they can be modified like any other styling option using the `mergeOptions` command.
-
-## Setting buttons
-
-The following command will set the screen's right buttons. If the screen already has Right Buttons declared - they will be overridden.
-
-```js
-Navigation.mergeOptions(this.props.componentId, {
-  topBar: {
-    rightButtons: [
-      {
-        id: 'myDynamicButton',
-        text: 'My Button'
-      }
-    ]
-  }
-});
-```
-
-## Removing buttons
-
-Buttons can be removed by setting zero buttons, as shown in the snippet below.
-
-```js
-Navigation.mergeOptions(this.props.componentId, {
-  topBar: {
-    rightButtons: []
-  }
-});
-```

docs/index.html

@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <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="https://unpkg.com/docsify@4.7.1/themes/vue.css">
-
-  <style>
-    /* diff syntax highlighting */
-    .token.inserted {
-      color: #42b983;
-      background-color: #f0fff4;
-      border-bottom: none;
-    }
-
-    .token.deleted {
-      color: #f66;
-      background-color: #ffeef0;
-      text-decoration: none;
-    }
-  </style>
-</head>
-
-<body>
-  <div id="app">Please wait...</div>
-  <script src="https://unpkg.com/docsify-copy-code@2"></script>
-  <script>
-    window.$docsify = {
-      name: 'React Native Navigation',
-      repo: 'wix/react-native-navigation',
-      themeColor: '#21B8F0',
-      search: 'auto',
-      loadSidebar: true,
-      alias: {
-        '/api/_sidebar.md': '/api/_sidebar.md',
-        '/.*/_sidebar.md': '/_sidebar.md'
-      },
-      subMaxLevel: 2,
-      auto2top: true,
-    }
-  </script>
-  <script src="https://unpkg.com/docsify@4.7.1/lib/docsify.min.js"></script>
-  <script src="https://unpkg.com/docsify@4.7.1/lib/plugins/search.min.js"></script>
-  <script src="https://unpkg.com/prismjs/components/prism-typescript.min.js"></script>
-  <script src="https://unpkg.com/prismjs/components/prism-jsx.min.js"></script>
-  <script src="https://unpkg.com/prismjs/components/prism-java.min.js"></script>
-  <script src="https://unpkg.com/prismjs/components/prism-c.min.js"></script>
-  <script src="https://unpkg.com/prismjs/components/prism-objectivec.min.js"></script>
-  <script src="https://unpkg.com/prismjs/components/prism-diff.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>
-
-</html>

docs/sw.js

@@ -1,83 +0,0 @@
-/* ===========================================================
- * docsify sw.js
- * ===========================================================
- * Copyright 2016 @huxpro
- * Licensed under Apache 2.0
- * Register service worker.
- * ========================================================== */
-
-const RUNTIME = 'docsify'
-const HOSTNAME_WHITELIST = [
-  self.location.hostname,
-  'fonts.gstatic.com',
-  'fonts.googleapis.com',
-  'unpkg.com'
-]
-
-// The Util Function to hack URLs of intercepted requests
-const getFixedUrl = (req) => {
-  var now = Date.now()
-  var url = new URL(req.url)
-
-  // 1. fixed http URL
-  // Just keep syncing with location.protocol
-  // fetch(httpURL) belongs to active mixed content.
-  // And fetch(httpRequest) is not supported yet.
-  url.protocol = self.location.protocol
-
-  // 2. add query for caching-busting.
-  // Github Pages served with Cache-Control: max-age=600
-  // max-age on mutable content is error-prone, with SW life of bugs can even extend.
-  // Until cache mode of Fetch API landed, we have to workaround cache-busting with query string.
-  // Cache-Control-Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=453190
-  if (url.hostname === self.location.hostname) {
-    url.search += (url.search ? '&' : '?') + 'cache-bust=' + now
-  }
-  return url.href
-}
-
-/**
- *  @Lifecycle Activate
- *  New one activated when old isnt being used.
- *
- *  waitUntil(): activating ====> activated
- */
-self.addEventListener('activate', event => {
-  event.waitUntil(self.clients.claim())
-})
-
-/**
- *  @Functional Fetch
- *  All network requests are being intercepted here.
- *
- *  void respondWith(Promise<Response> r)
- */
-self.addEventListener('fetch', event => {
-  // Skip some of cross-origin requests, like those for Google Analytics.
-  if (HOSTNAME_WHITELIST.indexOf(new URL(event.request.url).hostname) > -1) {
-    // Stale-while-revalidate
-    // similar to HTTP's stale-while-revalidate: https://www.mnot.net/blog/2007/12/12/stale
-    // Upgrade from Jake's to Surma's: https://gist.github.com/surma/eb441223daaedf880801ad80006389f1
-    const cached = caches.match(event.request)
-    const fixedUrl = getFixedUrl(event.request)
-    const fetched = fetch(fixedUrl, { cache: 'no-store' })
-    const fetchedCopy = fetched.then(resp => resp.clone())
-
-    // Call respondWith() with whatever we get first.
-    // If the fetch fails (e.g disconnected), wait for the cache.
-    // If there’s nothing in cache, wait for the fetch.
-    // If neither yields a response, return offline pages.
-    event.respondWith(
-      Promise.race([fetched.catch(_ => cached), cached])
-        .then(resp => resp || fetched)
-        .catch(_ => { /* eat any errors */ })
-    )
-
-    // Update the cache with the version we fetched (only for ok status)
-    event.waitUntil(
-      Promise.all([fetchedCopy, caches.open(RUNTIME)])
-        .then(([response, cache]) => response.ok && cache.put(event.request, response))
-        .catch(_ => { /* eat any errors */ })
-    )
-  }
-})

package.json

@@ -44,7 +44,8 @@
     "prerelease": "npm run build",
     "release": "node ./scripts/release",
     "local-docs": "node ./scripts/local-docs",
-    "gen-docs": "ts-node ./scripts/gen-docs/Main"
+    "gen-docs": "ts-node ./scripts/gen-docs/Main",
+    "docusaurus": "npm start --prefix website"
   },
   "peerDependencies": {
     "react": "*",
@@ -160,4 +161,4 @@
       }
     }
   }
-}
+}

docs/docs/Installing.md → website/docs/Installing.mdx

@@ -1,4 +1,8 @@
-# Installing
+---
+id: installing
+title: Installation
+sidebar_label: Installation
+---
 
 ## Requirements
 * node >= 8
@@ -7,79 +11,55 @@
 ## npm
 * `npm install --save react-native-navigation`
 
-## Installing with react-native link
-If you're using RN 0.60 or higher, you can link RNN automatically with react-native link. Otherwise, follow the manual installation steps. Unlike most other libraries, react-native-navigation requires you to make a few changes to native files. To make all the necessary changes, run `react-native link react-native-navigation` in your project's root folder. Make sure to commit the changes introduced by the link script.
+## Installing with `react-native link`
+If you're using RN 0.60 or higher, you can link RNN automatically with react-native link.
 
-If the link script completed successfully, you're good to go! If one of the steps failed, you'll need to complete the relevant step in the manual installation steps below.
+Unlike most other libraries, react-native-navigation requires you to make a few changes to native files. To make all the necessary changes, run 
 
-## Manual Installation
-If installation with react-native link did not work, follow the manual installation steps.
-
-### 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.
-
-#### Native Installation
-
-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)).
+```react-native link react-native-navigation```
 
-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)).
-
-	a. If you're seeing an error message in Xcode such as:
-	```
-	'ReactNativeNavigation/ReactNativeNavigation.h' file not found.
-	```
-	You may also need to add a Header Search Path: ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-3)).
-	```objectivec
-	$(SRCROOT)/../node_modules/react-native-navigation/lib/ios
-	```
+in your project's root folder. Make sure to commit the changes introduced by the link script.
 
-3. In Xcode, you will need to edit this file: `AppDelegate.m`. This function is the main entry point for your app:
+If the link script completed successfully, you're good to go! If one of the steps failed, you'll need to complete the relevant step in the manual installation steps bellow.
 
-	```objectivec
-	 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { ... }
+## Displaying the app root
 
-	```
+### Update index.js file
+`index.js` is typically used as an entry point into the app. It's first parsed and executed by the JS engine, therefore we'll want to show our UI from there.
 
-	Its content should look like this:
-	```objectivec
-	#import "AppDelegate.h"
+The following diff demonstrates changes needed to be made to `index.js`, initialized by `react-native init`.
 
-	#import <React/RCTBundleURLProvider.h>
-	#import <React/RCTRootView.h>
-	#import <ReactNativeNavigation/ReactNativeNavigation.h>
+```diff
++import { Navigation } from "react-native-navigation";
+-import {AppRegistry} from 'react-native';
+import App from "./App";
+-import {name as appName} from './app.json';
 
-	@implementation AppDelegate
+-AppRegistry.registerComponent(appName, () => App);
++Navigation.registerComponent('com.myApp.WelcomeScreen', () => App);
 
-	- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
-	{
-		NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
-		[ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
++Navigation.events().registerAppLaunchedListener(() => {
++   Navigation.setRoot({
++     root: {
++       stack: {
++         component: {
++           name: 'com.myApp.WelcomeScreen'
++         }
++       }
++     }
++  });
++});
+```
 
-		return YES;
-	}
+⚠️ we use the layout type `component` here, which renders a React component but does not allow you to navigate to others. See [Usage](docs/Usage.md) and [LayoutTypes](docs/layout-types.md) for more options.
+___
 
-	@end
-	```
+## Manual Installation
+If installation with react-native link did not work, follow the manual installation steps below.
 
-    a. If, in Xcode, you see the following error message in `AppDelegate.m` next to `#import "RCTBundleURLProvider.h"`: 
-  	```
-  	! 'RCTBundleURLProvider.h' file not found
-  	```
-  	This is because the `React` scheme is missing from your project. You can verify this by opening the `Product` menu and the `Scheme` submenu. 
-  	To make the `React` scheme available to your project, run `npm install -g react-native-git-upgrade` followed by `react-native-git-upgrade`. Once this is done, you can click back to the menu in Xcode: `Product -> Scheme -> Manage Schemes`, then click '+' to add a new scheme. From the `Target` menu, select "React", and click the checkbox to make the scheme `shared`. This should make the error disappear.
+### iOS
 
-    b. If, in Xcode, you see the following warning message in `AppDelegate.m` next to `#import "@implementation AppDelegate"`:
-  	```
-  	Class 'AppDelegate' does not conform to protocol 'RCTBridgeDelegate'
-  	```
-  	You can remove `RCTBridgeDelegate` from this file: `AppDelegate.h`:
-  	```diff
-  	- #import <React/RCTBridgeDelegate.h>
-  	- @interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
-  	+ @interface AppDelegate : UIResponder <UIApplicationDelegate>
-  		...
-  	```
+> Make sure your Xcode is updated. We recommend editing `.h` and `.m` files in Xcode as the IDE will usually point out common errors.
 
 #### Installation with CocoaPods
 
@@ -127,9 +107,73 @@ end
 
 2. `cd ios && pod install`
 
+#### Native Installation
+
+If all else fails, we can always try and install the hardcore way:
+
+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)).
+
+  a. If you're seeing an error message in Xcode such as:
+  ```
+  'ReactNativeNavigation/ReactNativeNavigation.h' file not found.
+  ```
+  You may also need to add a Header Search Path: ([screenshots](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#step-3)).
+  ```objectivec
+  $(SRCROOT)/../node_modules/react-native-navigation/lib/ios
+  ```
+
+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 content should look like this:
+  ```objectivec
+  #import "AppDelegate.h"
+
+  #import <React/RCTBundleURLProvider.h>
+  #import <React/RCTRootView.h>
+  #import <ReactNativeNavigation/ReactNativeNavigation.h>
+
+  @implementation AppDelegate
+
+  -(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+  {
+    NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
+    [ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
+
+    return YES;
+  }
+
+  @end
+  ```
+
+    a. If, in Xcode, you see the following error message in `AppDelegate.m` next to `#import "RCTBundleURLProvider.h"`: 
+    ```
+    ! 'RCTBundleURLProvider.h' file not found
+    ```
+    This is because the `React` scheme is missing from your project. You can verify this by opening the `Product` menu and the `Scheme` submenu. 
+    To make the `React` scheme available to your project, run `npm install -g react-native-git-upgrade` followed by `react-native-git-upgrade`. Once this is done, you can click back to the menu in Xcode: `Product -> Scheme -> Manage Schemes`, then click '+' to add a new scheme. From the `Target` menu, select "React", and click the checkbox to make the scheme `shared`. This should make the error disappear.
+
+    b. If, in Xcode, you see the following warning message in `AppDelegate.m` next to `#import "@implementation AppDelegate"`:
+    ```
+    Class 'AppDelegate' does not conform to protocol 'RCTBridgeDelegate'
+    ```
+    You can remove `RCTBridgeDelegate` from this file: `AppDelegate.h`:
+    ```diff
+    - #import <React/RCTBridgeDelegate.h>
+    - @interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
+    + @interface AppDelegate : UIResponder <UIApplicationDelegate>
+      ...
+    ```
+
 ### 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.
+> Make sure your Android Studio installation is up to date. 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 Update `android/build.gradle`:
 
@@ -144,34 +188,34 @@ buildscript {
 +   RNNKotlinVersion = "1.3.61" // Or any version above 1.3.x
 +   RNNKotlinStdlib = "kotlin-stdlib-jdk8"
   }
-	repositories {
+  repositories {
         google()
         jcenter()
 +        mavenLocal()
 +        mavenCentral()
-	}
-	dependencies {
+  }
+  dependencies {
 +        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.61" // Or whatever Kotlin version you've specified above
-+        classpath 'com.android.tools.build:gradle:3.4.2' // Or higher
++        classpath 'com.android.tools.build:gradle:3.5.3' // Or higher
 -        classpath 'com.android.tools.build:gradle:2.2.3'
-	}
+  }
 }
 
 allprojects {
-	repositories {
-+		google()
-		mavenLocal()
-		jcenter()
-		maven {
-			// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
-			url "$rootDir/../node_modules/react-native/android"
-		}
+  repositories {
++   google()
+    mavenLocal()
+    jcenter()
+    maven {
+      // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+      url "$rootDir/../node_modules/react-native/android"
+    }
 -        maven {
 -            url 'https://maven.google.com/'
 -            name 'Google'
 -        }
-+		maven { url 'https://jitpack.io' }
-	}
++   maven { url 'https://jitpack.io' }
+  }
 }
 ```
 #### 2 Update `MainActivity.java`
@@ -252,30 +296,9 @@ private final ReactNativeHost mReactNativeHost =
 }
 ```
 
-## You can use react-native-navigation \o/
+### App root
 
-Update `index.js` file
-```diff
-+import { Navigation } from "react-native-navigation";
--import {AppRegistry} from 'react-native';
-import App from "./App";
--import {name as appName} from './app.json';
-
--AppRegistry.registerComponent(appName, () => App);
-+Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => App);
-
-+Navigation.events().registerAppLaunchedListener(() => {
-+  Navigation.setRoot({
-+    root: {
-+      component: {
-+        name: "navigation.playground.WelcomeScreen"
-+      }
-+    }
-+  });
-+});
-```
-
-⚠️ we use the layout type `component` here, which renders a React component but does not allow you to navigate to others. See [Usage](docs/Usage.md) and [LayoutTypes](docs/layout-types.md) for more options.
+Now that you're done, don't forget to update the `index.js` file, as [shown above](#update-indexjs-file).
 
 ## Troubleshooting
 ### Build app with gradle command
@@ -312,7 +335,7 @@ To do so edit `android/build.gradle` and add:
 +}
 ```
 
-**Note**: As more build variants come available in the future, you will need to adjust the list (`names.contains("reactNative51") || names.contains("reactNative55")`). This is why we recommend the first solution.
+**Note**: As more build variants become available in the future, you will need to adjust the list (`names.contains("reactNative51") || names.contains("reactNative55")`). This is why we recommend the first solution.
 
 ### Force the same support library version across all dependencies
 Some of your dependencies might require a different version of one of Google's support library packages. This results in compilation errors similar to this:
@@ -347,4 +370,4 @@ dependencies {
     implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
 }
 
-```
+```

website/docs/Layout.mdx

@@ -0,0 +1,23 @@
+---
+id: layout
+title: Layout
+sidebar_label: Layout
+---
+
+## `id`
+
+| Type   | Required | Description                                                                                                                                                    |
+| ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| string | No       | Unique id used to interact with the view via the Navigation API, usually `Navigation.mergeOptions` which accepts the componentId as it's first argument. |
+
+## `options`
+
+| Type                    | Required | Description                    |
+| ----------------------- | -------- | ------------------------------ |
+| [Options](options-root.mdx) | No       | dynamic options for the layout |
+
+## `children`
+
+| Type               | Required | Description                   |
+| ------------------ | -------- | ----------------------------- |
+| [Layout[]](Layout.mdx) | YES      | Child layouts of any kind. |

docs/README.md → website/docs/README.mdx

@@ -1,5 +1,5 @@
 <h1 align="center">
-  <img src="https://raw.githubusercontent.com/wix/react-native-navigation/master/.logo.png"/><br>
+  <img src="https://raw.githubusercontent.com/wix/react-native-navigation/master/.logo.png"/><br/>
   React Native Navigation
 </h1>
 

website/docs/SplitView.mdx

@@ -0,0 +1,50 @@
+---
+id: splitView
+title: SplitView
+sidebar_label: SplitView
+---
+
+A container view controller implementing a master-detail interface. See [UISplitViewController docs](https://developer.apple.com/documentation/uikit/uisplitviewcontroller).
+Currently implemented only in iOS.
+
+```js
+{
+  id: 'PROFILE_TAB',
+  master: {
+    component: {
+      id: 'MASTER_SCREEN',
+      name: 'MasterScreen'
+    }
+  },
+  detail: {
+    component: {
+      id: 'DETAIL_SCREEN',
+      name: 'DetailScreen'
+    }
+  }
+}
+```
+
+## `id`
+
+| Type   | Required | Description                                                                                                                                                    |
+| ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| string | No       | Unique id used to interact with the view via the Navigation api, usually `Navigation.mergeOptions` which accepts the componentId as it's first argument. |
+
+## `master`
+
+| Type               | Required | Description                                     |
+| ------------------ | -------- | ----------------------------------------------- |
+| [Layout](Layout.mdx) | YES      | Set master layout (the smaller screen, sidebar) |
+
+## `detail`
+
+| Type               | Required | Description                                   |
+| ------------------ | -------- | --------------------------------------------- |
+| [Layout](Layout.mdx) | YES      | Set detail layout (the larger screen, flexes) |
+
+## `options`
+
+| Type                    | Required | Description                                     |
+| ----------------------- | -------- | ----------------------------------------------- |
+| [Options](options-root.mdx) | No       | dynamic options which will apply to all screens |

website/docs/advanced-navigation.mdx

@@ -0,0 +1,295 @@
+---
+id: advanced-navigation
+title: Advanced navigation
+sidebar_label: Advanced navigation
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+## Tab navigation
+
+As mobile applications become bigger and more complex, they usually end up containing multiple primary high-level destinations, which are logically independent from one another. The `BottomTabs` layout is often used when an app contains three to five top-level destinations which should be accessible from anywhere in the app.
+
+Lets return to the example code from the previous section ([Basic navigation](basic-navigation.mdx)) and see how we can convert it to a tab-based application. We'll use the BottomTabs layout to display tabs at the bottom of the screen. Similarly to `Stack` layout, The BottomTabs layout also contains a `children` property where each child will be displayed in a tab.
+
+Lets change our code to the following and reload the app.
+
+```jsx
+const Navigation = require('./services/Navigation');
+const React = require('react');
+const { View, Text, Button, StyleSheet } = require('react-native');
+
+const HomeScreen = (props) => {
+  return (
+    <View style={styles.root}>
+      <Text>Hello React Native Navigation 👋</Text>
+
+      <Button
+        title='Push Settings Screen'
+        color='#710ce3'
+        onPress={() => Navigation.push(props.componentId, {
+          component: {
+            name: 'Settings'
+          }
+        })} />
+    </View>
+  );
+};
+HomeScreen.options = {
+  topBar: {
+    title: {
+      text: 'Home'
+    }
+  },
+  bottomTab: {
+    text: 'Home'
+  }
+};
+
+const SettingsScreen = () => {
+  return (
+    <View style={styles.root}>
+      <Text>Settings Screen</Text>
+    </View>
+  );
+}
+SettingsScreen.options = {
+  topBar: {
+    title: {
+      text: 'Settings'
+    }
+  },
+  bottomTab: {
+    text: 'Settings'
+  }
+}
+
+Navigation.registerComponent('Home', () => HomeScreen);
+Navigation.registerComponent('Settings', () => SettingsScreen);
+
+Navigation.setDefaultOptions({
+  statusBar: {
+    backgroundColor: '#4d089a'
+  },
+  topBar: {
+    title: {
+      color: 'white'
+    },
+    backButton: {
+      color: 'white'
+    },
+    background: {
+      color: '#4d089a'
+    }
+  },
+  bottomTab: {
+    fontSize: 14,
+    selectedFontSize: 14
+  }
+});
+
+Navigation.events().registerAppLaunchedListener(async () => {
+  Navigation.setRoot({
+    root: {
+      bottomTabs: {
+        children: [
+          {
+            stack: {
+              children: [
+                {
+                  component: {
+                    name: 'Home'
+                  }
+                },
+              ]
+            }
+          },
+          {
+            stack: {
+              children: [
+                {
+                  component: {
+                    name: 'Settings'
+                  }
+                }
+              ]
+            }
+          }
+        ]
+      }
+    }
+  });
+});
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'whitesmoke'
+  }
+});
+```
+
+Now our app has two tabs at the bottom of the screen and our users can easily navigate between them.
+
+<img width="40%" src={useBaseUrl('img/stack4.png')} />
+
+## Replacing the root
+
+Up until now, we've discussed how to navigate within the same layout structure. We'll now learn how to replace the entire layout structure to display a new Root. A real life example for this use case would be, for instance, if you need to switch from a login screen to the app's main root. Replacing the root fits this use case since we'd like to discard the previous root (login root) entirely when switching to the main root.
+
+To demonstrate this, we'll make the following changes to our code:
+
+1. Add a login screen with a login button.
+2. When the button is clicked, we will switch to the main root.
+3. Replace our current root with the login screen. We'll also extract both roots to variables to improve code readability.
+
+```jsx
+const LoginScreen = () => {
+  return (
+    <View style={styles.root}>
+      <Button
+        title='Login'
+        color='#710ce3'
+        onPress={() => Navigation.setRoot(mainRoot)}
+      />
+    </View>
+  );
+};
+
+const HomeScreen = (props) => {
+  return (
+    <View style={styles.root}>
+      <Text>Hello React Native Navigation 👋</Text>
+
+      <Button
+        title='Push Settings Screen'
+        color='#710ce3'
+        onPress={() => Navigation.push(props.componentId, {
+          component: {
+            name: 'Settings'
+          }
+        })} />
+    </View>
+  );
+};
+HomeScreen.options = {
+  topBar: {
+    title: {
+      text: 'Home'
+    }
+  },
+  bottomTab: {
+    text: 'Home'
+  }
+};
+
+const SettingsScreen = () => {
+  return (
+    <View style={styles.root}>
+      <Text>Settings Screen</Text>
+    </View>
+  );
+}
+SettingsScreen.options = {
+  topBar: {
+    title: {
+      text: 'Settings'
+    }
+  },
+  bottomTab: {
+    text: 'Settings'
+  }
+}
+
+Navigation.registerComponent('Login', () => LoginScreen);
+Navigation.registerComponent('Home', () => HomeScreen);
+Navigation.registerComponent('Settings', () => SettingsScreen);
+
+const mainRoot = {
+  root: {
+    bottomTabs: {
+      children: [
+        {
+          stack: {
+            children: [
+              {
+                component: {
+                  name: 'Home'
+                }
+              },
+            ]
+          }
+        },
+        {
+          stack: {
+            children: [
+              {
+                component: {
+                  name: 'Settings'
+                }
+              }
+            ]
+          }
+        }
+      ]
+    }
+  }
+};
+const loginRoot = {
+  root: {
+    component: {
+      name: 'Login'
+    }
+  }
+};
+
+
+Navigation.setDefaultOptions({
+  statusBar: {
+    backgroundColor: '#4d089a'
+  },
+  topBar: {
+    title: {
+      color: 'white'
+    },
+    backButton: {
+      color: 'white'
+    },
+    background: {
+      color: '#4d089a'
+    }
+  },
+  bottomTab: {
+    fontSize: 14,
+    selectedFontSize: 14
+  }
+});
+Navigation.events().registerAppLaunchedListener(async () => {
+  Navigation.setRoot(loginRoot);
+});
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'whitesmoke'
+  }
+});
+```
+
+## Conditional roots
+
+Now that our initial root is the Login root, we're facing a new problem - how do we show the Login root only to users that are not logged in? Since our initial root is determined in the `registerAppLaunchedListener` callback, we'll check if a user is logged in there and set the appropriate root accordingly.
+
+```jsx
+Navigation.events().registerAppLaunchedListener(async () => {
+  Navigation.setRoot(isLoggedIn() ? mainRoot : loginRoot);
+});
+
+function isLoggedIn() {
+  // TODO: your business logic goes here
+}
+```

website/docs/animations.mdx

@@ -0,0 +1,304 @@
+---
+id: docs-animations
+title: Animations
+sidebar_label: Animations
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Various UI elements can be animated by declaring animation options.
+You can change the default animations for various commands, like push and pop, and even animate elements in
+your screens during screen transitions.
+
+#### Animation properties
+The following properties can be animated with our animation framework:
+
+* **x** - Translate the view to a coordinate along the x axis.
+* **y** - Translate the view to a coordinate along the y axis.
+* **translationX** - Translate the view along the x axis relative to its current x position.
+* **translationY** - Translate the view along the y axis relative to its current y position.
+* **alpha** - Apply alpha animation to the view. A value of 0 means the view is not visible, 1 means it's visible.
+* **scaleX** - Scale the view on the x axis. A value of 1 means that no scaling is applied.
+* **scaleY** - Scale the view on the y axis. A value of 1 means that no scaling is applied.
+* **rotationX** - Applies rotation around the x axis (in degrees, passed as a float).
+* **rotationY** - Applies rotation around the y axis (in degrees, passed as a float).
+* **rotation** - Rotates the view on all axis. Positive values result in clockwise rotation.
+
+## Layout animations
+
+### Stack animations
+When animating screens in and out of a stack, there are three elements you can work with: 
+
+1. **content** - screen being pushed or popped
+2. **topBar** - stack's TopBar
+3. **bottomTabs** - if stack is a child of a bottomTabs layout, we can control the `hide` and `show` animations of the bottomTabs.
+
+The following example demonstrates how to replace the default push and pop animations with slide animations.
+
+<Tabs
+  defaultValue="push"
+  values={[
+    { label: 'Push', value: 'push', },
+    { label: 'Pop', value: 'pop', },
+  ]
+}>
+<TabItem value="push">
+
+```js
+options: {
+  animations: {
+    push: {
+      content: {
+        translationX: {
+          from: require('react-native').Dimensions.get('window').width,
+          to: 0,
+          duration: 300
+        }
+      }
+    }
+  }
+}
+```
+
+</TabItem>
+<TabItem value="pop">
+
+```js
+options: {
+  animations: {
+    pop: {
+      content: {
+        translationX: {
+          from: 0,
+          to: -require('react-native').Dimensions.get('window').width,
+          duration: 300
+        }
+      }
+    }
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+### Modal animations
+Modal animations are declared similarly to stack animations, only this time we animate the entire view and not only part of the UI (content).
+
+<Tabs
+  defaultValue="show"
+  values={[
+    { label: 'Show', value: 'show', },
+    { label: 'Dismiss', value: 'dismiss', },
+  ]
+}>
+<TabItem value="show">
+
+The following example demonstrates how to show a modal with a fade-in animation.
+
+```js
+options: {
+  showModal: {
+    alpha: {
+      from: 0,
+      to: 1,
+      duration: 300
+    }
+  }
+}
+```
+
+</TabItem>
+<TabItem value="dismiss">
+
+The following example demonstrates how to dismiss a modal with a fade-out animation.
+
+```js
+options: {
+  dismissModal: {
+    alpha: {
+      from: 1,
+      to: 0,
+      duration: 300
+    }
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+## Shared element transitions
+
+Shared element transitions allow us to provide visual continuity when navigating between destinations. This also focuses user attention on a particular significant element, which then also gives such user better context when transitioning to some other destination.
+
+:::caution
+At the moment, the transition is available on iOS for push and pop while on Android it's available only for push commands. We are working on adding parity and expanding supported commands to show/dismiss modal and change BottomTabs.
+:::
+
+### Transition breakdown
+
+Let's take a more in-depth look at the following example, which you can find in the playground app:
+
+> [Source screen](https://github.com/wix/react-native-navigation/blob/master/playground/src/screens/sharedElementTransition/CocktailsList.js) and the [Destination screen](https://github.com/wix/react-native-navigation/blob/master/playground/src/screens/sharedElementTransition/CocktailDetailsScreen.js)
+
+
+<p align="center">
+  <img alt="Shared Element Transition" src={useBaseUrl('img/sharedElement.gif')} />
+</p>
+
+Four elements are animated in this example. Let's list the elements involved in the transition and note which properties are being animated.
+
+* **image** - the item image is animated to the next screen.
+  * image scale (resizeMode)
+  * position on screen
+
+* **image background** - each item has a "shadow" view which transitions to the next screen and turns into a colorful header.
+  * scale
+  * position on screen
+  * color
+
+* **title** - the title of the item is animated to the next screen.
+  * font size
+  * font color
+  * position on screen
+
+* **Description** - the description of the item in the destination screen.
+  * fade-in
+  * translation y
+
+### Implementing shared element transitions
+
+#### Step 1 - set a nativeID prop to elements in the source screen
+In order for RNN to be able to detect the corresponding native views of the elements,
+each element must include a unique `nativeID` prop.
+
+```jsx
+<Image
+  source={item.image}
+  nativeID={`image${item.id}`}
+  style={styles.image}
+  resizeMode={'contain'} />
+```
+
+#### Step 2 - set a nativeID prop to elements in the destination screen
+
+```jsx
+<Image
+  source={this.props.image}
+  nativeID={`image${this.props.id}Dest`}
+  style={styles.image} />
+```
+
+#### Step 3 - Declare the shared element animation when pushing the screen
+
+```jsx
+Navigation.push(this.props.componentId, {
+  component: {
+    name: Screens.CocktailDetailsScreen,
+    passProps: { ...item },
+    options: {
+      animations: {
+        push: {
+          sharedElementTransitions: [
+            {
+              fromId: `image${item.id}`,
+              toId: `image${item.id}Dest`
+            }
+          ]
+        }
+      }
+    }
+  }
+});
+```
+
+## Element Transitions
+Element transitions also allow you to animate elements during shared element transitions.
+
+### Recreating
+#### Step 1 - Set a nativeID prop to the element you'd like to animate
+An element can either be in the source or destination screen.
+
+```jsx
+<Text
+  nativeID='description'
+  style={styles.description}>
+  {this.props.description}
+</Text>
+```
+
+#### Step 2 - Declare the element animation when pushing the screen
+
+```jsx
+Navigation.push(this.props.componentId, {
+  component: {
+    name: Screens.CocktailDetailsScreen,
+    passProps: { ...item },
+    options: {
+      animations: {
+        push: {
+          elementTransitions: [
+            {
+              id: 'description',
+              alpha: {
+                from: 0, // We don't declare 'to' value as that is the element's current alpha value, here we're essentially animating from 0 to 1
+                duration: SHORT_DURATION
+              },
+              translationY: {
+                from: 16, // Animate translationY from 16dp to 0dp
+                duration: SHORT_DURATION
+              }
+            }
+          ]
+        }
+      }
+    }
+  }
+});
+```
+
+## Peek and Pop (iOS 11.4+)
+
+react-native-navigation supports [Peek and pop](
+https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/Adopting3DTouchOniPhone/#//apple_ref/doc/uid/TP40016543-CH1-SW3) feature in iOS 11.4 and newer.
+
+This works by passing a ref to a component you want to transform into peek view. We have included a handy component to handle all the touches and ref for you:
+
+```jsx
+const handlePress ({ reactTag }) => {
+  Navigation.push(this.props.componentId, {
+    component {
+      name: 'previewed.screen',
+      options: {
+        preview: {
+          reactTag,
+          height: 300,
+          width: 300,
+          commit: true,
+          actions: [{
+            title: "Displayed Name",
+            id: "actionId",
+            style: 'default', /* or 'selected', 'destructive'*/
+            actions: [/*define a submenu of actions with the same options*/]
+          }]
+        },
+      },
+    },
+  });
+};
+
+const Button = (
+  <Navigation.TouchablePreview
+    touchableComponent={TouchableHighlight}
+    onPress={handlePress}
+    onPressIn={handlePress}
+  >
+    <Text>My button</Text>
+  </Navigation.TouchablePreview>
+);
+```
+
+All options except for reactTag are optional. Actions trigger the same event as [navigation button presses](https://wix.github.io/react-native-navigation/#/docs/topBar-buttons?id=handling-button-press-events). To react when a preview is committed, listen to the [previewCompleted](https://wix.github.io/react-native-navigation/#/docs/events?id=previewcompleted-ios-114-only) event.

website/docs/api-component.mdx

@@ -0,0 +1,57 @@
+---
+id: component-api
+title: Component
+sidebar_label: Component
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+## `registerComponent`
+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 a Redux store) or a functional component. Similar to React Native's `AppRegistry.registerComponent`.
+
+#### Parameters
+| Name   | Required | Type                | Description                                                                                                            |
+| ------ | -------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| componentName | Yes      | string | Unique component name - not to be confused with **componentId** |
+| componentProvider | Yes      | Function | Anonymous function that returns the React component to register, **OR** the component wrapped with Providers|
+| concreteComponentProvider | No      | Function | Anonymous function that returns the concrete React component. If your component is wrapped with Providers, this must be an instance of the concrete component.|
+
+#### Examples
+##### Registering a component
+```js
+Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
+```
+
+##### Registering a component wrapped with Providers
+```js
+import { Provider } from 'react-redux';
+const store = createStore();
+
+Navigation.registerComponent(`navigation.playground.MyScreen`, () => (props) =>
+  <Provider store={store}>
+    <MyScreen {...props} />
+  </Provider>,
+  () => MyScreen)
+);
+```
+
+## `updateProps`
+Update props of a component registered with [registerComponent](#registercomponent). Updating props triggers the component lifecycle methods related to [updating](https://reactjs.org/docs/react-component.html#updating).
+
+#### Parameters
+| Name   | Required | Type                | Description                                                                                                            |
+| ------ | -------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| componentId | Yes      | string | Unique component id |
+| options | Yes      | object | props object to pass to the component |
+
+#### Example
+```js
+Navigation.updateProps('MY_COMPONENT', {
+  // props to pass to the component
+};
+```
+
+:::important
+`updateProps` is called with a componentId. This is the same unique id components have in props. Don't confuse it with the `componentName` we use when registering components with [Navigation.registerComponent](#registerComponent).
+:::

docs/docs/events.md → website/docs/api-events.mdx

@@ -1,29 +1,33 @@
-# Events
+---
+id: events-api
+title: Events
+sidebar_label: Events
+---
 
 ## onAppLaunched
 
-Called once the app is launched. This event is used to set the Application's initial layout - after which the app is ready for user interaction.
+Called once the app is launched. Used to set the initial layout of the Application - after that the app is ready for user interaction.
 
 ```js
-const appLaunchedListener = Navigation.events().registerAppLaunchedListener(() => {
-
-});
+const appLaunchedListener = Navigation.events().registerAppLaunchedListener(
+  () => {}
+);
 ```
 
 RNN automatically unsubscribes components when they unmount, therefore unsubscribing isn't actually mandatory if you subscribed in `componentDidMount`.
 
-But you can use the following method to unsubscribe manually.
+But you can use the following method to unsubscribe manually:
 
 ```js
 appLaunchedListener.remove();
 ```
 
 ## componentDidAppear
-Called each time this component appears on screen (attached to the view hierarchy)
+
+Called each time this component appears on the screen (attached to the view hierarchy).
 
 ```js
 class MyComponent extends Component {
-
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
@@ -35,9 +39,7 @@ class MyComponent extends Component {
     }
   }
 
-  componentDidAppear() {
-
-  }
+  componentDidAppear() {}
 }
 ```
 
@@ -52,18 +54,19 @@ const screenEventListener = Navigation.events().registerComponentDidAppearListen
 // Unsubscribe
 screenEventListener.remove();
 ```
-|       Parameter         | Description |
-|:--------------------:|:-----|
-|**componentId**| Id of the appearing component|
-|**componentName**|Registered name used when registering the component with `Navigation.registerComponent()`|
-|**passProps**| props passed to the component|
+
+|     Parameter     | Description                                                                               |
+| :---------------: | :---------------------------------------------------------------------------------------- |
+|  **componentId**  | Id of the appearing component                                                             |
+| **componentName** | Registered name used when registering the component with `Navigation.registerComponent()` |
+|   **passProps**   | props passed to the component                                                             |
 
 ## componentDidDisappear
-Called each time this component disappears from screen (detached from the view hierarchy)
+
+Called each time this component disappears from the screen (detached from the view hierarchy).
 
 ```js
 class MyComponent extends Component {
-
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
@@ -75,9 +78,7 @@ class MyComponent extends Component {
     }
   }
 
-  componentDidDisappear() {
-
-  }
+  componentDidDisappear() {}
 }
 ```
 
@@ -92,13 +93,15 @@ const screenEventListener = Navigation.events().registerComponentDidDisappearLis
 // Unsubscribe
 screenEventListener.remove();
 ```
-|       Parameter         | Description |
-|:--------------------:|:-----|
-|**componentId**| Id of the disappearing component|
-|**componentName**|Registered name used when registering the component with `Navigation.registerComponent()`|
+
+|     Parameter     | Description                                                                               |
+| :---------------: | :---------------------------------------------------------------------------------------- |
+|  **componentId**  | Id of the disappearing component                                                          |
+| **componentName** | Registered name used when registering the component with `Navigation.registerComponent()` |
 
 ## registerCommandListener
-The `commandListener` is called whenever a *Navigation command* (i.e push, pop, showModal etc) is invoked.
+
+The `commandListener` is called whenever a _Navigation command_ (i.e push, pop, showModal etc) is invoked.
 
 ```js
 // Subscribe
@@ -109,12 +112,14 @@ const commandListener = Navigation.events().registerCommandListener((name, param
 // Unsubscribe
 commandListener.remove();
 ```
-|       Parameter         | Description |
-|:--------------------:|:-----|
-|**name** | The name of the command that was invoked. For example `push`|
-|**params**|`commandId`: Each command is assigned a unique Id<br>`componentId`: Optional, the componentId passed to the command<br>`layout`: Optional, If the command invoked created a screen. Slim representation of the component and its options |
+
+| Parameter  | Description                                                                                                                                                                                                                                  |
+| :--------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|  **name**  | The name of the command that was invoked. For example `push`                                                                                                                                                                                 |
+| **params** | `commandId`: Each command is assigned a unique Id<br />`componentId`: Optional, the componentId passed to the command<br />`layout`: Optional, if the command invoked created a screen. Slim representation of the component and its options |
 
 ## registerCommandCompletedListener
+
 Invoked when a command finishes executing in native. If the command contains animations, for example pushed screen animation, the listener is invoked after the animation ends.
 
 ```js
@@ -127,54 +132,28 @@ const commandCompletedListener = Navigation.events().registerCommandCompletedLis
 commandCompletedListener.remove();
 ```
 
-|       Parameter         | Description |
-|:--------------------:|:-----|
-|**commandId** | Id of the completed command|
-|**completionTime**|Timestamp when the command, and consecutive animations, completed.|
+|     Parameter      | Description                                                        |
+| :----------------: | :----------------------------------------------------------------- |
+|   **commandId**    | Id of the completed command                                        |
+| **completionTime** | Timestamp when the command, and consecutive animations, completed. |
 
 ## registerModalDismissedListener
 
-Invoked when modal dismissed.
-
-```js
-class MyComponent extends Component {
-
-  componentDidMount() {
-    this.navigationEventListener = Navigation.events().bindComponent(this);
-  }
-
-  componentWillUnmount() {
-    // Not mandatory
-    if (this.navigationEventListener) {
-      this.navigationEventListener.remove();
-    }
-  }
-
-  modalDismissed({ componentId, componentName, modalsDismissed }) {
-
-  }
-}
-```
-
-This event can be observed globally as well:
+Invoked when a modal is dismissed.
 
 ```js
 // Subscribe
-const modalDismissedListener = Navigation.events().registerModalDismissedListener(({ componentId, componentName, modalsDismissed }) => {
+const modalDismissedListener = Navigation.events().registerModalDismissedListener(({ componentId, modalsDismissed }) => {
 
 });
 ...
 // Unsubscribe
 modalDismissedListener.remove();
 ```
-|       Parameter         | Description |
-|:--------------------:|:-----|
-|**componentId**| Id of the dismissing modal|
-|**componentName**|Registered name used when registering the component with `Navigation.registerComponent()`|
-|**modalsDismissed**|Number of modals dismissed.|
 
 ## registerModalAttemptedToDismissListener(iOS 13+ only)
-Invoked only on iOS pageSheet modal when swipeToDismiss flag is set to true and modal swiped down to dismiss.
+
+Invoked only on iOS pageSheet modal when `swipeToDismiss` flag is set to true and modal was swiped down to dismiss.
 
 ```js
 // Subscribe
@@ -185,12 +164,14 @@ const modalAttemptedToDismissListener = Navigation.events().registerModalAttempt
 // Unsubscribe
 modalDismissedListener.remove();
 ```
-|       Parameter         | Description |
-|:--------------------:|:-----|
-|**componentId** | Id of the modal tried to dismiss|
+
+|    Parameter    | Description                      |
+| :-------------: | :------------------------------- |
+| **componentId** | Id of the modal a user is attempting to dismiss |
 
 ## registerScreenPoppedListener
-Invoked when screen is popped.
+
+Invoked when the screen is popped.
 
 ```js
 // Subscribe
@@ -202,13 +183,14 @@ const screenPoppedListener = Navigation.events().registerScreenPoppedListener(({
 screenPoppedListener.remove();
 ```
 
-|       Parameter         | Description |
-|:--------------------:|:-----|
-|**componentId** | Id of the modal|
-|**modalsDismissed**| Number of modal which were dismissed|
+|      Parameter      | Description                          |
+| :-----------------: | :----------------------------------- |
+|   **componentId**   | Id of the modal                      |
+| **modalsDismissed** | Number of modals that were dismissed |
 
 ## registerBottomTabSelectedListener
-Invoked when a BottomTab is selected by the user.
+
+Invoked when BottomTab is selected by a user.
 
 ```js
 // Subscribe
@@ -221,7 +203,8 @@ bottomTabEventListener.remove();
 ```
 
 ## registerBottomTabLongPressedListener
-Invoked when a BottomTab is long pressed by the user.
+
+Invoked when BottomTab is long pressed by a user.
 
 ```js
 // Subscribe
@@ -233,31 +216,29 @@ const bottomTabEventListener = Navigation.events().registerBottomTabLongPressedL
 bottomTabEventListener.remove();
 ```
 
-|       Parameter         | Description |
-|:--------------------:|:-----|
-|**selectedTabIndex** | The index of the newly selected tab|
-|**unselectedTabIndex**|The index of the previously selected tab|
+|       Parameter        | Description                          |
+| :--------------------: | :------------------------------------|
+|  **selectedTabIndex**  | Index of the newly selected tab      |
+| **unselectedTabIndex** | Index of the previously selected tab |
 
 ## navigationButtonPressed event
-This event is emitted whenever a TopBar button is pressed by the user.
+
+This event is emitted whenever a TopBar button is pressed by a user.
 
 ```js
 class MyComponent extends Component {
-
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
 
   componentWillUnmount() {
-    // Not mandatory
+    // Unregistering listeners bound to components isn't mandatory since RNN handles the unregistration for you
     if (this.navigationEventListener) {
       this.navigationEventListener.remove();
     }
   }
-  
-  navigationButtonPressed({ buttonId }) {
 
-  }
+  navigationButtonPressed({ buttonId }) {}
 }
 ```
 
@@ -273,16 +254,16 @@ const navigationButtonEventListener = Navigation.events().registerNavigationButt
 navigationButtonEventListener.remove();
 ```
 
-|Parameter|Description|
-|:-:|:--|
-|**buttonId**|`buttonId`: `id` of the pressed button|
+|  Parameter   | Description                            |
+| :----------: | :------------------------------------- |
+| **buttonId** | `buttonId`: `id` of the pressed button |
 
 ## searchBarUpdated (iOS 11+ only)
-Called when a SearchBar from NavigationBar gets updated.
+
+Called whenever the SearchBar of NavigationBar is updated.
 
 ```js
 class MyComponent extends Component {
-
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
@@ -294,18 +275,16 @@ class MyComponent extends Component {
     }
   }
 
-  searchBarUpdated({ text, isFocused }) {
-
-  }
+  searchBarUpdated({ text, isFocused }) {}
 }
 ```
 
 ## searchBarCancelPressed (iOS 11+ only)
-Called when the cancel button on the SearchBar from NavigationBar gets pressed.
+
+Called when the cancel button of the SearchBar from NavigationBar is pressed.
 
 ```js
 class MyComponent extends Component {
-
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
@@ -317,18 +296,16 @@ class MyComponent extends Component {
     }
   }
 
-  searchBarCancelPressed() {
-
-  }
+  searchBarCancelPressed() {}
 }
 ```
 
 ## previewCompleted (iOS 11.4+ only)
-Called when preview peek is completed
+
+Called when preview peek is completed.
 
 ```js
 class MyComponent extends Component {
-
   componentDidMount() {
     this.navigationEventListener = Navigation.events().bindComponent(this);
   }
@@ -340,8 +317,6 @@ class MyComponent extends Component {
     }
   }
 
-  previewCompleted({ previewComponentId }) {
-
-  }
+  previewCompleted({ previewComponentId }) {}
 }
 ```

website/docs/api-modal.mdx

@@ -0,0 +1,59 @@
+---
+id: modal-api
+title: Modal
+sidebar_label: Modal
+---
+## `showModal()`
+Show a screen as a modal.
+
+#### Parameters
+| Name   | Required | Type                | Description                                                                                                            |
+| ------ | -------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| layout | Yes      | [Layout](Layout.mdx) | Any type of layout. [BottomTabs](layout-BottomTabs.mdx), [Stack](stack-layout.mdx), [SideMenu](sideMenu-layout.mdx), [Component](layout-component.mdx) |
+
+```js
+Navigation.showModal({
+  stack: {
+    children: [{
+      component: {
+        name: 'example.ModalScreen',
+        passProps: {
+          text: 'stack with one child'
+        },
+        options: {
+          topBar: {
+            title: {
+              text: 'Modal'
+            }
+          }
+        }
+      }
+    }]
+  }
+});
+```
+
+## `dismissModal()`
+Dismiss the current modal.
+
+#### Parameters
+| Name         | Required | Type    | Description                                                |
+| ------------ | -------- | ------- | ---------------------------------------------------------- |
+| componentId  | Yes      | string  | Any component id presented in the modal                    |
+| mergeOptions | No       | Options | Options to be merged before dismissing the Modal. |
+
+```js
+Navigation.dismissModal(this.props.componentId);
+```
+
+## `dismissAllModals()`
+Dismiss all current modals at the same time.
+
+#### Parameters
+| Name         | Required | Type    | Description                                                |
+| ------------ | -------- | ------- | ---------------------------------------------------------- |
+| mergeOptions | No       | Options | Options to be merged before dismissing all modals. |
+
+```js
+Navigation.dismissAllModals();
+```

website/docs/api-options.mdx

@@ -0,0 +1,47 @@
+---
+id: options-api
+title: Options Commands
+sidebar_label: Options commands
+---
+
+## `setDefaultOptions`
+
+Set default options for all screens. Useful for declaring a consistent style across the app.
+
+#### Parameters
+
+| Name    | Type                    | Required | Description  |
+| ------- | ----------------------- | -------- | ------------ |
+| options | [Options](options-root.mdx) | Yes      | Options root |
+
+#### Example
+
+```js
+Navigation.setDefaultOptions({
+  bottomTab: {
+    textColor: "black",
+    selectedTextColor: "blue"
+  }
+});
+```
+
+## `mergeOptions`
+
+Change navigation options of a component.
+
+#### Parameters
+
+| Name        | Type                    | Required | Description      |
+| ----------- | ----------------------- | -------- | ---------------- |
+| componentId | string                  | Yes      | The component id |
+| options     | [Options](options-root.mdx) | Yes      | Options root     |
+
+#### Example
+
+```js
+Navigation.mergeOptions('componentId', {
+  bottomTabs: {
+    visible: false
+  }
+});
+```

website/docs/api-overlay.mdx

@@ -0,0 +1,37 @@
+---
+id: overlay-api
+title: Overlay
+sidebar_label: Overlay
+---
+
+## `showOverlay()`
+Shows a component as an overlay.
+
+| Name   | Required | Type                | Description                                                                                                                                                                                                         |
+| ------ | -------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| layout | Yes      | [Layout](Layout.mdx) | Any type of layout. Typically, Component layout is used in Overlays but it's possible to load any other layout ([BottomTabs](layout-BottomTabs.mdx), [Stack](stack-layout.mdx), [SideMenu](sideMenu-layout.mdx), [Component](layout-component.mdx)) |
+
+```js
+Navigation.showOverlay({
+  component: {
+    name: 'example.Overlay',
+    options: {
+      overlay: {
+        interceptTouchOutside: true
+      }
+    }
+  }
+});
+```
+
+## `dismissOverlay()`
+Dismisses an overlay matching the given overlay componentId.
+
+#### Parameters
+| Name        | Required | Type   | Description                           |
+| ----------- | -------- | ------ | ------------------------------------- |
+| componentId | Yes      | string | The component id presented in Overlay |
+
+```js
+Navigation.dismissOverlay(this.props.componentId);
+```

website/docs/api-root.mdx

@@ -0,0 +1,103 @@
+---
+id: root-api
+title: Root
+sidebar_label: Root
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+## `setRoot()`
+Used to set the UI of the application. Read more about the root hierarchy level in the [docs section](docs-root.mdx).
+
+#### Parameters
+| Name   | Required | Type                | Description                                                                                                            |
+| ------ | -------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| layout | Yes      | [Layout](Layout.mdx) | Any type of layout. [BottomTabs](layout-BottomTabs.mdx), [Stack](stack-layout.mdx), [SideMenu](sideMenu-layout.mdx), [Component](layout-component.mdx) |
+
+#### Example
+
+<Tabs
+  defaultValue='stack'
+  values={[
+    { label: 'With Stack layout', value: 'stack' },
+    { label: 'With BottomTabs layout', value: 'bottomTabs' }
+  ]
+}>
+
+<TabItem value='stack'>
+
+```js
+Navigation.setRoot({
+  root: {
+    stack: {
+      children: [{
+        component: {
+          name: 'example.FirstTabScreen',
+          passProps: {
+            text: 'This is tab 1'
+          }
+        }
+      }],
+      options: {
+        bottomTab: {
+          text: 'Tab 1',
+          icon: require('../images/one.png'),
+          testID: 'FIRST_TAB_BAR_BUTTON'
+        }
+      }
+    }
+  }
+});
+```
+
+</TabItem>
+
+<TabItem value='bottomTabs'>
+
+```js
+Navigation.setRoot({
+  root: {
+    bottomTabs: {
+      children: [{
+        stack: {
+          children: [{
+            component: {
+              name: 'example.FirstTabScreen',
+              passProps: {
+                text: 'This is tab 1'
+              }
+            }
+          }],
+          options: {
+            bottomTab: {
+              text: 'Tab 1',
+              icon: require('../images/one.png'),
+              testID: 'FIRST_TAB_BAR_BUTTON'
+            }
+          }
+        }
+      },
+      {
+        component: {
+          name: 'navigation.playground.TextScreen',
+          passProps: {
+            text: 'This is tab 2'
+          },
+          options: {
+            bottomTab: {
+              text: 'Tab 2',
+              icon: require('../images/two.png'),
+              testID: 'SECOND_TAB_BAR_BUTTON'
+            }
+          }
+        }
+      }]
+    }
+  }
+});
+```
+
+</TabItem>
+
+</Tabs>

website/docs/api-sideMenu.mdx

@@ -0,0 +1,33 @@
+---
+id: sideMenu-api
+title: Side Menu
+sidebar_label: Side Menu
+---
+
+This layout allows to implement sidemenus, which can be opened by swiping from one side towards the other side.
+
+```js
+{
+  left: {
+    component: {}
+  },
+  center: {
+    stack: {
+      options: {},
+      children: [{
+        component: {}
+      }]
+    }
+  },
+  right: {
+    component: {}
+  }
+}
+```
+
+## `center: Layout`
+Center component, contains the main application.
+## `left?: Layout`
+Contain the left component layout.
+## `right?: Layout`
+Contain the right component layout.

website/docs/app-launch.mdx

@@ -0,0 +1,37 @@
+---
+id: app-launch
+title: Launching the app
+sidebar_label: Launching the app
+---
+
+When your app is launched for the first time, the bundle is parsed and executed. At this point you need to display your UI. To do so, listen to the `appLaunched` event and call `Navigation.setRoot` when that event is received.
+
+```js
+Navigation.events().registerAppLaunchedListener(() => {
+  // Each time the event is received you should call Navigation.setRoot
+});
+```
+
+:::important
+Register the app launched listener as soon as possible - this should be one of the first lines in your `index.js` file.
+:::
+
+If you're observing a "white screen" or a hanging splash screen after relaunching your app, it probably means `Navigation.setRoot` isn't called as soon as the app is launched. Perhaps the listener was registered too late.
+
+## Difference between the platforms
+When your app is launched, RN makes sure JS context (which is what enables you to execute JavaScript code) is running. There are quite a few differences between iOS and Android in this regard.
+
+### iOS
+Whenever an app is put into the background, the app process can potentially be destroyed by the system. If this destruction takes place, the JS context will be destroyed alongside with the app process.
+
+### Android
+An Android application is typically bound to two contexts:
+
+1. Application context - bound to the app process
+1. Activity context - bound to app UI
+
+React's JS Context is executed on and bound to the Application context. This means that even when the Activity context (and thus the UI) is destroyed, React's JS Context remains active until the Application (and your process) are destroyed by the system.
+
+:::caution
+Because of this, when your app returns to foreground, JS Context might still exist on Android, even when the Activity and UI contexts have been destroyed - meaning you might not need to initialise all of your app logic; instead, you'll only need to call `Navigation.setRoot` to repopulate the UI context. This circumstance can easily be determined by setting a flag on your app's first `appLaunched` event, and checking the value of that flag on subsequent `appLaunched` events -- if the flag is true in your `appLaunched` callback, you need to call `Navigation.setRoot` to repopulate the UI.
+:::

website/docs/basic-navigation.mdx

@@ -0,0 +1,351 @@
+---
+id: basic-navigation
+title: Basic navigation
+sidebar_label: Basic navigation
+---
+
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Generally, any mobile app consists of various destinations which display some content to the user. And in vast majority of cases using an app means navigating between these destinations. React-native-navigation provides ways for you to layout your content on user screen in a logical and performant manner.
+
+React Native Navigation's stack layout lets you push screens, and also navigate back to previous screens. Screens pushed into the stack hide the previous screen in the stack, making the user focus on a single screen at a time. Let's look at a stack layout that provides basic navigation for an app.
+
+## Creating a stack
+
+```jsx
+// In index.js of a new project
+const { Navigation } = require('react-native-navigation');
+const React = require('react');
+const { View, Text, StyleSheet } = require('react-native');
+
+const HomeScreen = (props) => {
+  return (
+    <View style={styles.home}>
+      <Text>Home Screen</Text>
+    </View>
+  );
+};
+Navigation.registerComponent('Home', () => HomeScreen);
+
+Navigation.events().registerAppLaunchedListener(async () => {
+  Navigation.setRoot({
+    root: {
+      stack: {
+        children: [
+          {
+            component: {
+              name: 'Home'
+            }
+          }
+        ]
+      }
+    }
+  });
+});
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'whitesmoke'
+  }
+});
+```
+
+Running this code will render a screen with an empty TopBar and your HomeScreen component (shown below). The TopBar is part of the stack layout, we'll work on configuring it later.
+
+<img width="40%" src={useBaseUrl('img/stack1.png')} />
+
+## Specifying options
+
+You can specify options of each layout (Stack, component pushed into a stack, etc.) to configure various parameters like the TopBar title or color. Lets spice things up by changing the TopBar color and while we're at it, also move the title to the TopBar.
+
+Lets change the Home screen declaration to the following and reload the app to see the changes.
+```jsx
+const HomeScreen = (props) => {
+  return (
+    <View style={styles.home}>
+      <Text>Hello React Native Navigation 👋</Text>
+    </View>
+  );
+};
+HomeScreen.options = {
+  topBar: {
+    title: {
+      text: 'Home',
+      color: 'white'
+    },
+    background: {
+      color: '#4d089a'
+    }
+  }
+}
+```
+
+Our app should now look like this:
+<img width="40%" src={useBaseUrl('img/stackOptions.png')} />
+
+## Navigating in a stack
+
+In the previous section we created a stack and initialized it with a single child. We'll now learn how to add another child to the stack. From now on, we'll call the action of adding children to the stack 'push', and removing children - 'pop'.
+
+In order to push another screen to the stack, we will add a button to the home screen and call `Navigation.push`. The 'push' command accepts two parameters, the first is the id used to indicate into which stack to push the screen and the second is the screen we're pushing. After pushing a screen, a back button is added automatically to the TopBar so the users can navigate easily back to the previous screen.
+
+You can read more about the stack layout [here](stack-doc.mdx) or dive right into the API [here](stack-api.mdx).
+
+:::info componentId
+Each React component registered with `Navigation.registerComponent` is assigned a unique `componentId` by Navigation. This unique id is used with Navigation commands (like the push command) to indicate into which stack we'd like to push. In this case, by using the componentId of the Home screen, we are telling Navigation to push into the stack containing the Home screen.
+:::
+
+```js
+Navigation.push(props.componentId, {
+  component: {
+    name: 'Settings', // Push the screen registered with the 'Settings' key
+    options: { // Optional options object to configure the screen
+      topBar: {
+        title: {
+          text: 'Settings' // Set the TopBar title of the new Screen
+        }
+      }
+    }
+  }
+});
+```
+
+Lets change our code to the following snippet below and reload the app. Now our Home should contain a button which when pressed, pushes a new screen into the stack. We've successfully navigated to a new screen! 👏
+
+```jsx
+// In index.js of a new project
+const { Navigation } = require('react-native-navigation');
+const React = require('react');
+const { View, Text, Button, StyleSheet } = require('react-native');
+
+
+// Settings screen declaration - this is the screen we'll be pushing into the stack
+const SettingsScreen = () => {
+  return (
+    <View style={[styles.root, styles.settings]}>
+      <Text>Settings Screen</Text>
+    </View>
+  );
+};
+
+// Home screen declaration
+const HomeScreen = (props) => {
+  return (
+    <View style={styles.root}>
+      <Text>Hello React Native Navigation 👋</Text>
+      <Button
+        title='Push Settings Screen'
+        color='#710ce3'
+        onPress={() => Navigation.push(props.componentId, {
+          component: {
+            name: 'Settings',
+            options: {
+              topBar: {
+                title: {
+                  text: 'Settings'
+                }
+              }
+            }
+          }
+        })}/>
+    </View>
+  );
+};
+HomeScreen.options = {
+  topBar: {
+    title: {
+      text: 'Home',
+      color: 'white'
+    },
+    background: {
+      color: '#4d089a'
+    }
+  }
+};
+
+const SettingsScreen = () => {
+  return (
+    <View style={styles.root}>
+      <Text>Settings Screen</Text>
+    </View>
+  );
+}
+
+Navigation.registerComponent('Home', () => HomeScreen);
+Navigation.registerComponent('Settings', () => SettingsScreen);
+
+Navigation.events().registerAppLaunchedListener(async () => {
+  Navigation.setRoot({
+    root: {
+      stack: {
+        children: [
+          {
+            component: {
+              name: 'Home'
+            }
+          }
+        ]
+      }
+    }
+  });
+});
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'whitesmoke'
+  }
+});
+```
+
+<img width="40%" src={useBaseUrl('img/stack2.gif')} />
+
+## App theme
+
+Our app is growing and already contains two screens. This introduces a new problem - while the home screen has a nice purple TopBar, our settings screen seems pretty dull as it still uses the default system look and feel.
+
+Currently, our style declaration applies only to the Home screen, so lets apply it to all of our screens by using `Navigation.setDefaultOptions`.
+
+```js
+Navigation.setDefaultOptions({
+  statusBar: {
+    backgroundColor: '#4d089a'
+  },
+  topBar: {
+    title: {
+      color: 'white'
+    },
+    backButton: {
+      color: 'white'
+    },
+    background: {
+      color: '#4d089a'
+    }
+  }
+});
+```
+
+We need to add this snippet before registering the `registerAppLaunchedListener`. This way we ensure our theme is applied when our root is set. Our code should now look like this:
+
+```jsx
+// In index.js of a new project
+const { Navigation } = require('react-native-navigation');
+const React = require('react');
+const { View, Text, Button, StyleSheet } = require('react-native');
+
+
+// Settings screen declaration - this is the screen we'll be pushing into the stack
+const SettingsScreen = () => {
+  return (
+    <View style={[styles.root, styles.settings]}>
+      <Text>Settings Screen</Text>
+    </View>
+  );
+};
+
+// Home screen declaration
+const HomeScreen = (props) => {
+  return (
+    <View style={styles.root}>
+      <Text>Hello React Native Navigation 👋</Text>
+      <Button
+        title='Push Settings Screen'
+        color='#710ce3'
+        onPress={() => Navigation.push(props.componentId, {
+          component: {
+            name: 'Settings',
+            options: {
+              topBar: {
+                title: {
+                  text: 'Settings'
+                }
+              }
+            }
+          }
+        })}/>
+    </View>
+  );
+};
+HomeScreen.options = {
+  topBar: {
+    title: {
+      text: 'Home',
+    }
+  }
+};
+
+const SettingsScreen = () => {
+  return (
+    <View style={styles.root}>
+      <Text>Settings Screen</Text>
+    </View>
+  );
+}
+
+Navigation.registerComponent('Home', () => HomeScreen);
+Navigation.registerComponent('Settings', () => SettingsScreen);
+
+
+Navigation.setDefaultOptions({
+  statusBar: {
+    backgroundColor: '#4d089a'
+  },
+  topBar: {
+    title: {
+      color: 'white'
+    },
+    backButton: {
+      color: 'white'
+    },
+    background: {
+      color: '#4d089a'
+    }
+  }
+});
+Navigation.events().registerAppLaunchedListener(async () => {
+  Navigation.setRoot({
+    root: {
+      stack: {
+        children: [
+          {
+            component: {
+              name: 'Home'
+            }
+          }
+        ]
+      }
+    }
+  });
+});
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'whitesmoke'
+  }
+});
+```
+
+Lets run our code again - now our design is consistent across both screens.
+
+<img width="40%" src={useBaseUrl('img/stack3.gif')} />
+
+## Summary
+
+We've learned the basics of navigation with React Native Navigation by implementing a stack and pushing screens into it.
+We've also learned a few methods of applying styles to our screens and layouts with the Options mechanism.
+
+* Navigation.setRoot() sets the root layout of our app. The initial root has to be set from an `AppLaunchedEvent` callback.
+* Options can be applied directly to components.
+* Screens can be added to a stack with the `Navigation.push()` command.
+* Components registered with `Navigation.registerComponent()` are injected with a `componentId` which is used when navigating.
+* Themes are applied via the `Navigation.setDefaultOptions()` command.
+
+In the next section we'll explore a more advance navigation patters using BottomTabs layout and also see how, and why, multiple roots are set.

website/docs/before-you-start.mdx

@@ -0,0 +1,12 @@
+---
+id: before-you-start
+title: Before you start
+sidebar_label: Before you start
+---
+
+React Native Navigation is a module, dependent on and intended to be used alongside [React Native](https://github.com/facebook/react-native), so some experience with it and knowledge of core concepts is required. If you feel the need, you can start with their [getting started](https://reactnative.dev/docs/getting-started) tutorial, and then come back here when you're ready.
+
+We also assume you are working on a Mac with XCode and Android Studio installed and setup. You can also make it work in a Linux distribution, of course, but in that case bare in mind that some sections of the docs that deal with iOS might not be relevant to you.
+
+If you want to dig right into it, start with [installing](Installing.mdx) the library. If you're just looking around, we suggest checking out [basic navigation](basic-navigation.mdx) first.
+

website/docs/docs-bottomTabs.mdx

@@ -0,0 +1,140 @@
+---
+id: docs-bottomTabs
+title: Bottom tabs
+sidebar_label: Bottom tabs
+---
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Bottom tabs refers to a row of links, displayed at the bottom of the screen, and is referred to as "Tab Bar" in iOS and as "Bottom Navigation Bar" on Android. Usually these are intended to be used to switch between top-level content views with a single tap.
+
+## Creating bottom tabs
+
+BottomTabs provide flat navigation and access to up to five equally important top-level root destinations. While any type of layout can be displayed in a tab, typically, [Stacks]() are used, since they allow for vertical navigation within a tab.
+
+### Example
+Lets see how to create a simple BottomTabs layout. There are a few things to notice here:
+1. Each child represents a tab on the screen.
+2. The root layout for each tab is a stack to allow for vertical navigation within the tab.
+3. Each stack declares `bottomTab` options which are used to configure the tab's text, icon, color etc.
+
+```js
+bottomTabs: {
+  id: 'BOTTOM_TABS_LAYOUT',
+  children: [
+    {
+      stack: {
+        id: 'HOME_TAB',
+        children: [
+          {
+            component: {
+              id: 'HOME_SCREEN'
+              name: 'HomeScreen'
+            }
+          }
+        ],
+        options: {
+          bottomTab: {
+            icon: require('./home.png')
+          }
+        }
+      }
+    },
+    stack: {
+      id: 'PROFILE_TAB',
+      children: [
+        {
+          component: {
+            id: 'PROFILE_SCREEN',
+            name: 'ProfileScreen'
+          }
+        }
+      ],
+      options: {
+        bottomTab: {
+          icon: require('./profile.png')
+        }
+      }
+    }
+  ]
+}
+```
+
+Once we run this code, our BottomTabs should look like this:
+<img width="40%" src={useBaseUrl('img/bottomTabs.png')} />
+
+## Selecting Tabs Programmatically
+Tabs can be selected programmatically by updating the `currentTabIndex` or `currentTabId` options.
+
+We'll use the BottomTabs layout showcased [above](bottomTabs-docs#example) to demonstrate programmatic tab selection.
+
+### Selecting a tab by index
+The following mergeOptions command will select the second tab. We're passing the id of our BottomTabs layout, but we could also use the id of any of the child components, for example `PROFILE_TAB` or `PROFILE_SCREEN`.
+
+```js
+Navigation.mergeOptions('BOTTOM_TABS_LAYOUT', {
+  bottomTabs: {
+    currentTabIndex: 1
+  }
+});
+```
+
+### Selecting a tab by id
+Tabs can also be selected by id (`componentId`). This is particularly useful in cases where you don't know in which tab a screen is contained.
+For example, if invoked from one of the child components, `HOME_SCREEN` or `SETTINGS_SCREEN`, the following merge command will select the tab containing the child.
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+  bottomTabs: {
+    currentTabId: this.props.componentId
+  }
+});
+```
+
+## Changing BottomTabs visibility
+
+The `visible` property is used to control the BottomTab visibility. Visibility can be toggled dynamically using the `mergeOptions` command.
+```js
+Navigation.mergeOptions(componentId, {
+  bottomTabs: {
+    visible: false
+  },
+});
+```
+
+Visibility can also be changed when pushing screens.
+```js
+Navigation.push(componentId, {
+  component: {
+    name: 'pushedScreen',
+    options: {
+      bottomTabs: {
+        visible: false
+      }
+    }
+  }
+});
+```
+
+## Updating tab options dynamically
+
+To update a tab option, like an icon, text or color, simply call `mergeOptions` with new options using the id of a component or layout contained in the tab you wish to update.
+
+For instance, in the example below we update the color of a specific tab:
+```js
+Navigation.mergeOptions(componentId, {
+  bottomTab: {
+    iconColor: 'red',
+    textColor: 'red'
+  },
+});
+```
+
+## Controlling tab loading
+
+By default, all tabs are mounted at the same time. This can have a negative impact on performance since screens which are not visible to the user are mounted.
+
+The order in which tabs are mounted can be configured with the `tabsAttachMode` option:
+
+* `together` - all tabs are mounted at the same time, this is the default behavior.
+* `afterInitialTab` - after initial tab is mounted, other tabs are mounted.
+* `onSwitchToTab` - initial tab is mounted, other tabs are mounted when the user navigates to them for the first time.

website/docs/docs-constants.mdx

@@ -0,0 +1,28 @@
+---
+id: constants-docs
+title: Constants
+sidebar_label: Constants
+---
+
+React Native Navigation exposes a set of constants which can be used to get the dimensions of various navigation elements on the screen: StatusBar, TopBar and BottomTabs.
+
+## When are constants evaluated
+Some of the values exposed through the constants API are actually evaluated only after the UI is created (`setRoot` has been called) and therefore are not accessible through static getters.
+
+For example, if you need to get the height of the BottomTabs, you'll first need to have BottomTabs visible on the screen and only then retrieve their height via the constants API.
+
+:::important
+We recommend you don't cache the actual constants object returned by `await Navigation.constants()` as it might not be accurate later on when, for example, a new root is set or orientation changes.
+:::
+
+## API
+As explained above, constants are evaluated in native each time the API is invoked. That's why `Navigation.constants()` returns a promise and the use is as follows:
+
+```js
+const { Navigation } = require('react-native-navigation');
+const {
+  statusBarHeight,
+  TopBarHeight,
+  BottomTabsHeight
+} = await Navigation.constants();
+```

website/docs/docs-externalComponent.mdx

@@ -0,0 +1,100 @@
+---
+id: docs-externalComponent
+title: External Component
+sidebar_label: External Component
+---
+
+The ExternalComponent layout allows you to display any native view as a screen. To use the External Component we'll need to register it with a string name. This name is then used when declaring layouts in JS.
+
+## Android
+### Implementing the native component
+When it comes to implementing an external component on Android, you have two choices. We recommend you use a base class extending `View`. If you're required to use Fragments, you'll find an basic example below.
+
+#### ViewGroup
+```java
+public class ViewGroupComponent implements ExternalComponent {
+    private final FrameLayout content;
+
+    ViewGroupComponent(FragmentActivity activity, JSONObject props) {
+        content = new FrameLayout(activity);
+    }
+
+    @Override
+    public View asView() {
+        return content;
+    }
+}
+```
+
+#### Fragment
+
+Using a Fragment as an external component is done by attaching the Fragment to a FrameLayout, and returning the FrameLayout from the `asView()` method of the ExternalComponent.
+
+```java
+public class FragmentComponent implements ExternalComponent {
+    private final FrameLayout content;
+
+    FragmentComponent(FragmentActivity activity, JSONObject props) {
+        // Create the FrameLayout to which we'll attach our Fragment to
+        content = new FrameLayout(activity);
+        content.setId(R.id.fragment_screen_content);
+        // Attach the Fragment to the FrameLayout
+        activity.getSupportFragmentManager()
+                .beginTransaction()
+                .add(R.id.fragment_screen_content, createFragment(props))
+                .commitAllowingStateLoss();
+    }
+
+    private FragmentScreen createFragment(JSONObject props) {
+        FragmentScreen fragment = new FragmentScreen();
+        // Pass the props sent from Js in a bundle
+        Bundle args = new Bundle();
+        args.putString("text", props.optString("text", ""));
+        fragment.setArguments(args);
+        return fragment;
+    }
+
+    @Override
+    public View asView() {
+        return content;
+    }
+}
+```
+
+### Registering the component
+```java
+public class MainApplication extends NavigationApplication {
+  @Override
+    public void onCreate() {
+        super.onCreate();
+        registerExternalComponent("MyExternalComponent", new FragmentCreator());
+    }
+}
+```
+
+## iOS
+### ViewController registration
+
+```objectivec
+[ReactNativeNavigation registerExternalComponent:@"MyExternalComponent" callback:^UIViewController *(NSDictionary *props, RCTBridge *bridge) {
+	return [[ExternalViewController alloc] initWithProps:props];
+}];
+
+```
+## Using the component from JS
+Once you've registered the external component in native, you can use it in your layout declarations.
+For example, to show an external component modally:
+```js
+Navigation.showModal({
+  externalComponent: {
+    name: 'MyExternalComponent',
+    passProps: {
+      text: "Text from JS"
+    }
+  }
+});
+```
+
+:::caution
+props passed to external components are sent over the bridge and therefore must be serializable.
+:::

website/docs/docs-modal.mdx

@@ -0,0 +1,126 @@
+---
+id: docs-modal
+title: Modal
+sidebar_label: Modal
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+In human-centered design, when we speak about a modal (or modality), we often refer to a set of techniques, aimed at bringing user attention to a specific event / screen / action / etc. Those often require user input. A pop-up on a website, a file deletion confirmation dialogue on your computer, or an alert asking you to enable location service on your phone - these can all be considered modals.
+
+A modal is a term used in native iOS world ([full description here](https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/modality/)), while on Android, [dialogs](https://developer.android.com/guide/topics/ui/dialogs) are often used to create similar or identical behavior, alongside other techniques.
+
+## Presenting modals
+Modal can be displayed by invoking the `Navigation.showModal()` command, as shown in the example below:
+
+```js
+Navigation.showModal({
+  stack: {
+    children: [
+      {
+        component: {
+          name: 'MODAL_SCREEN',
+          options: {
+            topBar: {
+              title: {
+                text: 'Modal'
+              }
+            }
+          }
+        }
+      }
+    ]
+  }
+});
+```
+
+Here's how the Modal looks on both platforms.
+
+<Tabs
+  defaultValue="ios"
+  values={[
+    { label: 'iOS', value: 'ios', },
+    { label: 'Android', value: 'android', }
+  ]}>
+  <TabItem value="ios">
+    <img width="40%"  src={useBaseUrl('img/modal_ios.gif')} />
+  </TabItem>
+  <TabItem value="android">
+    <img width="40%" src={useBaseUrl('img/modal_android.gif')} />
+  </TabItem>
+</Tabs>
+
+## Adding a dismiss button
+Modals should always have a dismiss button, on left-to-right devices it's typically placed as a left button in the TopBar.
+
+After we've added our dismiss button, we need to dismiss the modal when the button is pressed.
+
+:::note
+For the LeftButton to be visible, the screen must be displayed in a Stack.
+:::
+
+```js
+class ModalScreen extends React.Component {
+  // Set a dismiss button in static options
+  static options() {
+    return {
+      topBar: {
+        leftButtons: {
+          id: 'dismiss',
+          icon: require('./dismiss.png')
+        }
+      }
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    // Register to events
+    Navigation.events().bindComponent(this);
+  }
+
+  // Handle the button press event and dismiss the modal if needed
+  navigationButtonPressed({ buttonId }) {
+    if (buttonId === 'dismiss') {
+      Navigation.dismissModal(this.props.componentId);
+    }
+  }
+}
+```
+
+## Transparent modals
+Showing transparent modals is a nice technique to increase immersiveness while keeping the user in the same context.
+When a modal is displayed the content behind it (either root or modal) is removed from hierarchy. While this behavior improves performance, it's undesired when
+showing transparent modals as we need to see the content behind it.
+
+To configure this behaviour, we'll need to change the `modalPresentationStyle` option to `overCurrentContext` and change the layout background color to `'transparent'`.
+
+```js
+{
+  modalPresentationStyle: 'overCurrentContext',
+  layout: {
+    backgroundColor: 'transparent'
+  }
+}
+```
+
+## Preventing a Modal from being dismissed
+Preventing a modal from being dismissed is done differently for each platform. While preventing the user from dismissing the modal is possible,
+the modal could still be dismissed programmatically by calling `Navigation.dismissModal()`
+
+If the modal has a dismiss button, of course you'll need to handle it your self and avoid calling `Navigation.dismissModal()`
+when the button is pressed.
+
+### Android
+On Android, modals can be dismissed with the hardware back button. You can handle the back press your self by
+adding a [BackHandler](https://facebook.github.io/react-native/docs/backhandler)
+
+### iOS
+While iOS devices don't have a hardware back button, PageSheet modals can be dismissed by swipe gesture
+from the top of the screen. To disable it, set [swipeToDismiss]() option to false.
+
+## Presentation Style
+
+The [presentation style](options-root#modalpresentationstyle) determines the look and feel of a screen displayed as modal.

website/docs/docs-overlay.mdx

@@ -0,0 +1,152 @@
+---
+id: docs-overlay
+title: Overlay
+sidebar_label: Overlay
+---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
+Overlays are used to layout content on top of all other layout hierarchies, while fitting the screen bounds.
+The contents displayed in an Overlay can either be non-obtrusive, like Toasts and Snackbars, or an Alert that blocks all interactions with any content behind it. The view contained within it should be aligned either with absolute position, flex, or with margins, all according to your needs.
+
+## Handling touch events outside the view
+When showing views like Alert or Toast in an Overlay, you would want to configure if you want to allow users to interact with content behind the alert. This is done via the [interceptTouchOutside]() option.
+
+## Overlay examples
+
+<Tabs
+  defaultValue="alert"
+  values={[
+    { label: 'Alert', value: 'alert', },
+    { label: 'Toast', value: 'toast', }
+  ]
+}>
+<TabItem value='alert'>
+
+The example below demonstrates how to create a simple alert dialog using an Overlay. Touch events outside the alert will be blocked and won't pass through to the content behind the alert since we're specifying `interceptTouchOutside: true` in the static options of the Alert.
+
+[screenshot](/img/alert_android.png)
+
+```jsx
+const React = require('react');
+const { Text, Button, View } = require('react-native');
+const { Navigation } = require('react-native-navigation');
+
+function Alert({ componentId, title, message }) {
+  const dismiss = () => Navigation.dismissOverlay(componentId);
+
+  return (
+    <View style={styles.root}>
+      <View style={styles.alert}>
+        <Text style={styles.title}>{title}</Text>
+        <Text style={styles.message}>{message}</Text>
+        <Button title='OK' onPress={dismiss} />
+      </View>
+    </View>
+  );
+}
+
+const styles = {
+  root: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#00000050'
+  },
+  alert: {
+    alignItems: 'center',
+    backgroundColor: 'whitesmoke',
+    width: 250,
+    elevation: 4,
+    padding: 16
+  },
+  title: {
+    fontSize: 18
+  },
+  message: {
+    marginVertical: 8
+  }
+};
+
+Alert.options = (props) => {
+  return ({
+    overlay: {
+      interceptTouchOutside: true
+    }
+  });
+}
+
+module.exports = Alert;
+
+```
+
+</TabItem>
+<TabItem value='toast'>
+
+The example below demonstrates how to show a Toast using an Overlay. A user can interact with the content behind the toast since we've declared `interceptTouchOutside: false` in the static options of the Alert.
+
+[screenshot](/img/toast_android.png)
+
+```jsx
+const React = require('react');
+const { View, Text, StyleSheet, TouchableOpacity } = require('react-native');
+const Colors = require('../commons/Colors');
+const Navigation = require('../services/Navigation');
+
+const Toast = function ({componentId}) {
+  return (
+    <View style={styles.root}>
+      <View style={styles.toast}>
+        <Text style={styles.text}>This a very important message!</Text>
+        <TouchableOpacity style={styles.button} onPress={() => Navigation.dismissOverlay(componentId)}>
+          <Text style={styles.buttonText}>OK</Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    flexDirection: 'column-reverse',
+  },
+  toast: {
+    elevation: 2,
+    flexDirection: 'row',
+    height: 40,
+    margin: 16,
+    borderRadius: 20,
+    backgroundColor: Colors.accent,
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  text: {
+    color: 'white',
+    fontSize: 16,
+    marginLeft: 16
+  },
+  button: {
+    marginRight: 16
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: 'bold'
+  }
+});
+
+Toast.options = {
+  layout: {
+    componentBackgroundColor: 'transparent'
+  },
+  overlay: {
+    interceptTouchOutside: false
+  }
+}
+
+module.exports = Toast;
+```
+</TabItem>
+</Tabs>

website/docs/docs-root.mdx

@@ -0,0 +1,147 @@
+---
+id: docs-root
+title: Root
+sidebar_label: Root
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+The root is where the application layout structure is defined. It is typically the first UI element a user interacts with. The root can be changed multiple times during the lifespan of the application. For example, if an app requires users to login, it's common to use a stack-based root and transition to either tabs- or SideMenu-based root if login is successful.
+
+## Setting root on app launch
+RNN exposes an appLaunched listener which is invoked whenever root needs to be set.
+
+On iOS, the app launched event is usually emitted once in the lifespan of the application - when the app is opened for the first time. On Android things become a little bit more complicated. Like on iOS, the event is emitted when an app is opened for the first time. Since the system can destroy the Activity when the app is in the background to free resources, the event is emitted when the app returns to foreground after the activity has been destroyed.
+
+```js
+Navigation.events().registerAppLaunchedListener(() => {
+  Navigation.setRoot({
+    root: {
+
+    }
+  });
+});
+```
+
+:::important
+registerAppLaunchedListener() must be called as soon as the bundle is executed. Otherwise the event, which is emitted from native to JS, won't be handled at the correct moment in time.
+::::
+
+## Conditional initial root
+A common use case is to set the initial root according to a condition of some sort. For example:
+
+> If a user is logged in, show the application main root; otherwise show a login screen.
+
+To do this, simply set the appropriate root according to your needs.
+```js
+Navigation.events().registerAppLaunchedListener(() => {
+  if (isUserLoggedIn()) {
+    setMainRoot();
+  } else {
+    setLoginRoot();
+  }
+});
+```
+
+## Common root structures
+
+<Tabs
+  defaultValue='stack'
+  values={[
+    { label: 'Stack root', value: 'stack' },
+    { label: 'BottomTabs root', value: 'bottomTabs' },
+    { label: 'SideMenu root', value: 'sideMenu' }
+  ]
+}>
+
+<TabItem value='stack'>
+Stacks are usually used as root for small scale apps or for short-lived flows within one big app. For example, here's a login flow:
+
+```js
+Navigation.setRoot({
+  root: {
+    stack: {
+      children: [
+        {
+          component: {
+            name: 'LOGIN_SCREEN'
+          }
+        }
+      ]
+    }
+  }
+});
+```
+
+</TabItem>
+
+<TabItem value='bottomTabs'>
+Typically, stacks are used as direct children of BottomTabs and each child is an independent root. This lets users seamlessly switch between tabs as each tab has its own navigation hierarchy.
+
+```js
+Navigation.setRoot({
+  root: {
+    bottomTabs: {
+      children: [
+        stack: {
+          children: [
+            {
+              component: {
+                name: 'FEED_SCREEN'
+              }
+            }
+          ]
+        },
+        stack: {
+          children: [
+            {
+              component: {
+                name: 'CHAT_LIST'
+              }
+            }
+          ]
+        },
+        stack: {
+          children: [
+            {
+              component: {
+                name: 'PROFILE_SCREEN'
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+});
+```
+
+</TabItem>
+
+<TabItem value='sideMenu'>
+When a SideMenu layout is used as root, the center screen would typically be a stack. The center stack should be treated as a root - you can push child screens into it, or replace it alltogether by calling `setStackRoot`.
+
+```js
+Navigation.setRoot({
+  root: {
+    sideMenu: {
+      center: {
+        stack: {
+          children: [
+            name: 'HOME_SCREEN'
+          ]
+        }
+      },
+      left: {
+        component: {
+          name: 'MENU_SCREEN'
+        }
+      }
+    }
+  }
+});
+```
+
+</TabItem>
+</Tabs>

website/docs/docs-stack.mdx

@@ -0,0 +1,258 @@
+---
+id: docs-stack
+title: Stack
+sidebar_label: Stack
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+A stack is a container layout promoting a hierarchical navigation. It is used for navigating between screens at consecutive levels of hierarchy, steps in a flow or across an app.
+
+The first child in the stack (represented by the `children` array) is the root and is displayed at the bottom of the stack. The last child in the children array is the child currently being displayed.
+
+In this layout, only a single child screen is visible at any given time and consecutive screen can be added to the top of the stack using the `Navigation.push` command. Tapping the back button will pop the stack and remove the top most screen.
+
+The stack manages the TopBar at the top of the stack. The TopBar displays the current screens' title and buttons. It can be hidden with the `topBar: { visible: false }` option. By default, screens are rendered below the TopBar. This behavior can be changed by setting `topBar: { drawBehind: true }` in the current screens' options.
+
+# Layout Examples
+<Tabs
+  defaultValue="single"
+  values={[
+    { label: 'Single child', value: 'single', },
+    { label: 'Multiple Children', value: 'multiple', }
+  ]
+}>
+<TabItem value="single">
+
+A stack declared with a single child.
+
+```js
+const stack = {
+  children: [
+    {
+      component: {
+        name: 'MyComponent'
+      }
+    }
+  ]
+}
+```
+
+</TabItem>
+<TabItem value="multiple">
+
+A stack can be initialized with more than one child, in which case the last child will be the currently displayed child and the first child will be hidden. In this case the back button will be visible automatically, clicking it will go back in the stack revealing the first (previous) child.
+Once the root child becomes visible, the back button is hidden.
+
+```js
+const stack = {
+  children: [
+    {
+      component: {
+        name: 'RootComponent'
+      }
+    },
+    {
+      component: {
+        name: 'SecondComponent'
+      }
+    }
+  ]
+}
+```
+
+</TabItem>
+</Tabs>
+
+## TopBar Buttons
+Buttons can be added to the [right](#rightButtons) and [left](#leftButtons) areas of the TopBar. Buttons can have either an icon or a text. They are declared in the the options object and, as with any other option, can be updated dynamically with the `Navigation.mergeOptions` command.
+
+:::tip Always assign titles to buttons!
+When using an icon button on **Android**, you should always pass a title as well. The title is used when the button is collapsed to the overflow menu and as a tooltip when the button is long pressed.
+:::
+
+### Overflow menu
+It's common practice to group less important actions in a menu or an action sheet.
+
+To do so on iOS, include a button with a menu icon and open an [ActionSheet](https://facebook.github.io/react-native/docs/actionsheetios) with the relevant actions when the button is clicked.
+
+On Android, use the [showAsAction](#showasaction) options to control when the button should appear in the menu.
+
+### Left button
+Left buttons behave like right buttons with two caveats on Android:
+* Only a single left button is allowed
+* Textual left button isn't supported
+
+### Using a react component in a button
+:::caution
+At the moment, custom buttons in `rightButtons` are supported only on iOS.
+:::
+
+Sometimes we require more from our buttons. In order to support every product need React Components can be used as custom views of buttons.
+To do so, you'll first need to register the view with Navigation, just like you register your components used as screens:
+
+```js
+Navigation.registerComponent('ButtonComponent', () => require('./ButtonComponent'));
+```
+
+Now you can create buttons which use the component registered with `'ButtonComponent'` as their custom view:
+
+```js
+topBar: {
+  rightButtons: [
+    {
+      component: 'ButtonComponent',
+      passProps: {
+        // Pass initial props to the button here
+      }
+    }
+  ]
+}
+```
+
+### Updating props of custom buttons
+To update props of a mounted component used as a button, you'll first need to assign it a unique id, then call the `Navigation.updateProps()` command with the id.
+
+Calling the updateProps command will trigger Reacts component lifecycle methods related to [props update](https://reactjs.org/docs/react-component.html#updating)
+```js
+// Declare the button and assign it a unique id
+topBar: {
+  rightButtons: [
+    {
+      id: 'SomeUniqueId',
+      component: 'ButtonComponent',
+      passProps: {
+        count: 0
+      }
+    }
+  ]
+}
+
+// Update props
+Navigation.updateProps('SomeUniqueId', {
+  count: 1
+});
+```
+
+### Changing buttons dynamically
+As buttons are part of a screen's options, they can be modified like any other styling option using the [mergeOptions]() command.
+
+#### Setting buttons
+The following command will set the screen's right buttons. If the screen already has Right Buttons declared - they will be overridden.
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+  topBar: {
+    rightButtons: [
+      {
+        id: 'myDynamicButton',
+        text: 'My Button'
+      }
+    ]
+  }
+});
+```
+
+#### Removing buttons
+Buttons can be removed by setting zero buttons, as shown in the snippet below.
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+  topBar: {
+    rightButtons: []
+  }
+});
+```
+
+## Back Button
+The back button is added automatically when two or more screens are pushed into the stack.
+
+### Styling the back button
+The back button's style can be customized by declaring a backButton options object. This configuration can be part of a screen's static options, or default options.
+
+```js
+backButton: {
+  color: 'red',
+  icon: require('../../img/customChevron.png')
+}
+```
+
+### Controlling visibility
+The back buttons visibility can be controlled with the visible property.
+
+```js
+backButton: {
+  visible: false
+}
+```
+
+### Changing visibility programmatically
+Back button visibility can be changed dynamically using the mergeOptions command. When using a screen's componentId, the change will affect only that specific screen. But when using the stack's id, the change will affect all screens pushed into the stack.
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+  backButton: {
+    visible: false
+  }
+});
+```
+
+### Handling the back button
+Handling the back button is not possible. However, you can set a left button with a chevron and handle it like you'd handle any other button and calling `Navigation.pop` when desired.
+
+## Interacting programmatically
+The Navigation object provides ways to programmatically manipulate the stack.
+
+### Interact with the Stack by componentId
+Each layout pushed into the stack has an id. When in the context of a component, The component's `componentId` can be used to interact with a parent stack.
+When using a component's componentId, the native implementation knows to perform the command on the parent Stack of this component.
+
+In this example, we push a screen onto the component's parent stack.
+
+```jsx
+const React = require('react');
+const Navigation = require('react-native-navigation');
+
+class MyComponent extends React.Component {
+  onButtonClick = () => {
+    Navigation.push(this.props.componentId, {
+      component: {
+        name: 'PUSHED_SCREEN'
+      }
+    });
+  }
+}
+```
+
+### Interact with the Stack by a predefined id
+Sometimes we're required to interact with a specific stack not from the context of a component pushed into it. To do so, assign the stack a predefined `id` and use it when invoking any stack command.
+
+```js
+Navigation.setRoot({
+  root: {
+    stack: {
+      id: 'MyStack', // This is the id we're going to use when interacting with the stack
+      children: [
+        {
+          component: {
+            name: 'SomeComponent'
+          }
+        }
+      ]
+    }
+  }
+});
+
+function push() {
+  Navigation.push('MyStack', {
+    component: {
+      name: 'PushedScreen'
+    }
+  });
+}
+```
+
+## Disabling back navigation
+
+## Handling back navigation

website/docs/layout-BottomTabs.mdx

@@ -0,0 +1,50 @@
+---
+id: bottomTabs-layout
+title: Bottom Tabs
+sidebar_label: Bottom Tabs
+---
+
+A container view for managing a radio-style selection interface, where a selection determines which child view controller to display.
+
+```js
+{
+  id: 'BOTTOM_TABS_LAYOUT',
+  children: [
+    {
+      component: {
+        id: 'HOME_SCREEN'
+        name: 'HomeScreen'
+      }
+    },
+    stack: {
+      id: 'PROFILE_TAB',
+      children: [
+        {
+          component: {
+            id: 'PROFILE_SCREEN',
+            name: 'ProfileScreen'
+          }
+        }
+      ]
+    }
+  ]
+}
+```
+
+## `id`
+
+| Type   | Required | Description                                                                                                                                                    |
+| ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| string | No       | Unique id used to interact with the view via the Navigation api, usually `Navigation.mergeOptions` which accepts the componentId as it's first argument. |
+
+## `children`
+
+| Type               | Required | Description                   |
+| ------------------ | -------- | ----------------------------- |
+| [Layout[]](Layout.mdx) | YES      | Child layouts of any kind. |
+
+## `options`
+
+| Type                    | Required | Description                                                   |
+| ----------------------- | -------- | ------------------------------------------------------------- |
+| [Options](options-root.mdx) | No       | dynamic options which will apply to all screens in bottomTabs |

website/docs/layout-component.mdx

@@ -0,0 +1,55 @@
+---
+id: component-layout
+title: Component
+sidebar_label: Component
+---
+
+```js
+{
+  name: "MyRegisteredComponent";
+}
+```
+
+## `name`
+
+| Type   | Required | Description                                                                      |
+| ------ | -------- | -------------------------------------------------------------------------------- |
+| string | Yes      | Key used when registering the component with `Navigation.registerComponent`. |
+
+## `id`
+
+| Type   | Required | Description                                                                                                                                                    |
+| ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| string | No       | Unique id used to interact with the view via the Navigation api, usually `Navigation.mergeOptions` which accepts the componentId as it's first argument. |
+
+## `options`
+
+| Type                    | Required | Description                       |
+| ----------------------- | -------- | --------------------------------- |
+| [Options](options-root.mdx) | No       | dynamic options for the component |
+
+## `alignment`
+
+| Type                   | Required | Description                                                                                                                                                                                                                                                                         |
+| ---------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| enum('center', 'fill') | No       | This option is relevant only to title components. `fill` will make the component stretch and consume all available space in the TopBar while `center` will center it in the middle of the TopBar. `center` is the default option in iOS while `fill` is the default for Android. |
+
+## `waitForRender`
+
+| Type    | Required | Description                                                        |
+| ------- | -------- | ------------------------------------------------------------------ |
+| boolean | No       | Wait for this component to fully render before showing the screen. |
+
+This option is useful for ensuring that both a child screen pushed into the stack and all of the TopBar components (title, background and buttons) are displayed to the user at the same time.
+
+To enable this option, `waitForRender` in the relevant screen animation option needs to be enabled as well.
+
+:::caution
+This option might introduce delays when pushing screens and should be used with caution.
+:::
+
+## `passProps`
+
+| Type   | Required | Description                                                                        |
+| ------ | -------- | ---------------------------------------------------------------------------------- |
+| object | No       | A JavaScript object with props accessible inside the component using `this.props`. |

website/docs/layout-options.mdx

@@ -0,0 +1,57 @@
+---
+id: layout-options
+title: Layout Options
+sidebar_label: Layout
+---
+
+```js
+const options = {
+  layout: {}
+};
+```
+
+### `fitSystemWindows`
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | Both     |
+
+### `backgroundColor`
+
+Set the screen background color.
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| Color | No       | Both     |
+
+### `componentBackgroundColor`
+
+Set background color only for components, helps reduce overdraw if background color is set in default options.
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| Color | No       | Android  |
+
+### `orientation`
+
+Set the allowed orientations.
+
+| Type                      | Required | Platform |
+| ------------------------- | -------- | -------- |
+| ['portrait', 'landscape'] | No       | Both     |
+
+### `topMargin`
+
+Set the layout top margin.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Android  |
+
+### `direction`
+
+Set language direction, only works with DefaultOptions.
+
+| Type               | Required | Platform |
+| ------------------ | -------- | -------- |
+| enum('rtl', 'ltr') | No       | Both     |

website/docs/meta-contributing.mdx

@@ -0,0 +1,91 @@
+---
+id: meta-contributing
+title: Contributing
+sidebar_label: Contributing
+---
+
+Thank you for showing interest in contributing to React-Native-Navigation! This project is developed and maintained by Wix in collaboration with the community.
+
+There are various ways in which you can contribute to this library, not all require knowledge or expertise in native development. Listed below is all you need to get started with your first contribution.
+
+## Stack Overflow
+
+Stack Overflow is used by developers to find answers and troubleshoot code. Users are encouraged to post questions on SO and tag them with the [wix-react-native-navigation](https://stackoverflow.com/questions/tagged/wix-react-native-navigation) tag. Answering issues on SO is very helpful and beneficial to the community, only this time, there's a personal angle - you can boost your SO ranking and rack up points quickly.
+
+## Discord
+
+Another popular communication channel is our [Discord channel](https://discord.gg/DhkZjq2) where users post questions and consult with each other. You're welcome to join the discussions and answer questions. This is also a great place to meet other community members and project maintainers.
+
+## GitHub Issues
+
+### Open an issue
+Found a bug? Missing a feature? Go ahead and open an issue! Make sure to add all details mentioned in the issue template. If you're interested in suggesting a big change, please speak to one of the admins on [Discord](#discord) to coordinate your effort.
+
+### Respond to issues
+Although the issue tracker is used solely for bug reports, issues are frequently opened for questions or to request assistance. As the project grows in popularity, more issues remain unanswered for long periods of time.
+
+Some issues can be trivial and easy to pinpoint - a missing import statement or apostrophe, wrong layout structure, etc. If you're an experienced user, helping out newcomers can be quite satisfying and allows maintainers to focus on features and bug fixes.
+
+Some issues are tagged as ["looking for contributors"](https://github.com/wix/react-native-navigation/labels/user%3A%20looking%20for%20contributors). These issues have been recognized by the team, but aren't prioritized by Wix developers due to lack of time or for some other reason. We leave these issues to our community and you're more than welcome to take a crack at them. If you'd like to submit a PR, see [these instructions](#running-the-project) on how to run the project locally.
+
+### Provide reproductions
+Reproducing bugs takes time. Lots of time. Usually that's because an issue is lacking important information, which then causes lots of back and forth communication between maintainers and users. Help us address more bugs and issues by providing reproductions.
+
+Providing reproductions improves the chances of an issue being prioritized by maintainers!
+
+If an issue is reproduced with a specific combination of options, posting these options will usually suffice. If a specific layout structure is involved or specific actions need to be performed in a certain order - then we ask that you fork the project and push a branch with a reproduction to the Playground app.
+
+Check out the [list of issues requiring reproductions](https://github.com/wix/react-native-navigation/labels/user%3A%20requires%20reproduction).
+
+## Submitting PRs
+So you've fixed a bug or added a feature and you're ready to submit a pull request 🎉🎊 Make sure the title is clear and describes the reason for the PR. Please include any information you can which will help us understand the reasons for the PR, what it fixes and what it changes. Please include before/after pictures/gifs when appropriate.
+
+## 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.
+
+This will ensure good quality throughout the life of the project and will help avoid unexpected breakages.
+
+No PR will be accepted without adequate test coverage.
+
+If you need help running the project, have a look at the [Playground app](playground-app) section. You can run the tests using the scripts below. 
+
+
+### Tests and the Playground app
+Besides an overview of basic React Native Navigation functionality, the [Playground app](playground-app) can (and rather should) be used for e2e tests and reproductions. If your change requires an e2e, add it to the playground app, to the appropriate screen. Again, quick setup instructions available in [Playground app](playground-app) section of these docs.
+
+:::tip
+If a screen contains too many buttons, e2e tests might fail if the button is positioned out of screen bounds because Detox matchers detect it's invisible.
+:::
+
+### Playground app Folder Structure
+
+| Folder | Description |
+| ------ | ----------- |
+| `lib` | The project itself composed of: |
+| `lib/android` | android sources and unit tests |
+| `lib/ios` | iOS sources and unit tests |
+| `lib/src` | TypeScript sources and unit tests |
+| `lib/dist` | compiled javascript sources and unit tests |
+| `lib/dist/index.js` | the entry point for `import Navigation from 'react-native-navigation'` |
+| `e2e` | [detox](https://github.com/wix/detox) e2e tests on both Android and iOS |
+| `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
+
+| Command | Description |
+| ------- | ----------- |
+| `npm install` | installs dependencies |
+| `npm run build` | compiles TypeScript sources `./lib/src` into javascript `./lib/dist` |
+| `npm run clean` | cleans all build directories, stops packager, fixes flakiness by removing watchman cache, etc. |
+| `npm run start` | starts the react-native packager for local debugging |
+| `npm run xcode` | for convenience, opens xcode in this project |
+| `npm run install-android`  |  builds playground debug/release version and installs on running android devices/emulators. <br></br> **Options:** `-- --release` |
+| `npm run uninstall-android` | uninstalls playground from running android devices/simulators |
+| `npm run test-js` | runs javascript tests and coverage report |
+| `npm run test-unit-ios` | runs ios unit tests in debug/release <br></br> **Options:** `-- --release` |
+| `npm run test-unit-android` | runs android unit tests in debug/release <br></br> **Options:** `-- --release` |
+| `npm run test-e2e-ios` | runs the ios e2e tests using [detox](https://github.com/wix/detox) in debug/release <br></br> **Options:** `-- --release`|
+| `npm run test-e2e-android` | runs the android e2e tests using [detox](https://github.com/wix/detox) in debug/release <br></br> **Options:** `-- --release` |
+| `npm run test-all` | runs all tests in parallel |

website/docs/options-backButton.mdx

@@ -0,0 +1,50 @@
+---
+id: backButton-options
+title: Back Button Options
+sidebar_label: Back Button
+---
+
+Controls the back button styling.
+
+```js
+const options = {
+  topBar: {
+    backButton: {}
+  }
+}
+```
+
+### `color`
+Change the back button color. This will change the text color as well.
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| color | No       | Both     |
+
+### `icon`
+Change the default back button icon.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Both     |
+
+### `showTitle`
+Show or hide the text displayed next to the back button.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | iOS      |
+
+### `title`
+Change the text displayed next to the title. Usually the back button shows the title of the previous screen.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| string | No       | iOS      |
+
+### `visible`
+Hide or show the back button.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | Both     |

website/docs/options-background.mdx

@@ -0,0 +1,58 @@
+---
+id: background-options
+title: Background Options
+sidebar_label: Background
+---
+
+Controls the top bar background styling.
+
+```js
+const options = {
+  topBar: {
+    background: {}
+  }
+};
+```
+
+### `color`
+
+Set the background color. Ignored if a component is specified.
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| Color | No       | Both     |
+
+### `component`
+
+Set a react [component](layout-component.mdx) as the background. Useful when you need to show a gradient as background, for instance.
+
+
+On Android, setting an `id` to the Component will prevent the component from being recreated each time it's used by a screen. The component will be created once and whenever possible it will be reused.
+
+| Type                   | Required | Platform |
+| ---------------------- | -------- | -------- |
+| [Component](layout-component.mdx) | No       | Both     |
+
+### `clipToBounds`
+
+Clip the top bar background to bounds if set to true.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | iOS      |
+
+### `translucent`
+
+Allows the NavBar to be translucent (blurred).
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | iOS      |
+
+### `blur`
+
+Enable background blur.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | iOS      |

website/docs/options-bottomTab.mdx

@@ -0,0 +1,133 @@
+---
+id: bottomTab-options
+title: Bottom Tab Options
+sidebar_label: Bottom Tab
+---
+
+```js
+const options = {
+  bottomTab: {
+
+  }
+}
+```
+
+## `badge`
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| string | No       | Both     |
+
+## `badgeColor`
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| color | No       | Both     |
+
+## `disableIconTint`
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | Both     |
+
+## `dotIndicator`
+
+| Type         | Required | Platform |
+| ------------ | -------- | -------- |
+| DotIndicator | No       | Both     |
+
+## `fontFamily`
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| string | No       | Both     |
+
+## `fontSize`
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Both     |
+
+## `icon`
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Both     |
+
+## `iconColor`
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| color | No       | Both     |
+
+## `selectedFontSize`
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Both     |
+
+## `selectedIcon`
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Both     |
+
+## `selectedIconColor`
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| color | No       | Both     |
+
+## `iconInsets`
+
+| Type       | Required | Platform |
+| ---------- | -------- | -------- |
+| IconInsets | No       | Both     |
+
+## `disableSelectedIconTint`
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | Android  |
+
+## `disableIconTint`
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | Android  |
+
+## `selectedTextColor`
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| color | No       | Both     |
+
+## `testID`
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| string | No       | Both     |
+
+## `text`
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| string | No       | Both     |
+
+## `textColor`
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| color | No       | Both     |
+
+## DotIndicator
+##### color?: color
+##### size?: number
+##### visible?: boolean
+##### animate?: boolean
+
+## IconInsets
+##### top?: number
+##### left?: number
+##### right?: number
+##### bottom?: number

website/docs/options-bottomTabs.mdx

@@ -0,0 +1,101 @@
+---
+id: bottomTabs-options
+title: Bottom Tabs Options
+sidebar_label: Bottom Tabs
+---
+
+```js
+const options = {
+  bottomTabs: {
+
+  }
+}
+```
+
+## `animate`
+Controls whether toggling visibility states will be animated.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | Both     |
+
+## `backgroundColor`
+Change the background color.
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| color | No       | Both     |
+
+## `barStyle`
+Controls whether the BottomTabs use dark (black) or light (default) visual style. Requires `translucent: true`.
+
+| Type                    | Required | Platform |
+| ----------------------- | -------- | -------- |
+| enum('default','black') | No       | Both     |
+
+## `currentTabId`
+Select a tab by the id (componentId) of a child contained in it. See [Selecting tabs programmatically](#selectingtabsprogrammatically) for a detailed explanation.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Both     |
+
+## `currentTabIndex`
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Both     |
+
+## `drawBehind`
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | Both     |
+
+## `elevation`
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Android  |
+
+## `hideShadow`
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | iOS      |
+
+## `preferLargeIcons`
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | Android  |
+
+## `tabsAttachMode`
+
+| Type                                               | Required | Platform |
+| -------------------------------------------------- | -------- | -------- |
+| enum('together','afterInitialTab','onSwitchToTab') | No       | Both     |
+
+## `testID`
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| string | No       | Both     |
+
+## `titleDisplayMode`
+
+| Type                                             | Required | Android |
+| ------------------------------------------------ | -------- | ------- |
+| enum('alwaysShow','showWhenActive','alwaysHide') | No       | Both    |
+
+## `translucent`
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | iOS      |
+
+## `visible`
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | Both     |

website/docs/options-button.mdx

@@ -0,0 +1,76 @@
+---
+id: button-options
+title: Button Options
+sidebar_label: Button
+---
+
+```js
+const options = {
+  topBar: {
+    leftButtons: [
+      {
+        id: "id",
+        text: "Button"
+      }
+    ]
+  }
+};
+```
+
+### `id`
+
+Buttons are identified by their id property. When a button is clicked, a buttonPress event is emitted to js, containing the id of the clicked button.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| string | Yes      | Both     |
+
+### `icon`
+
+Button icon. If the button is pushed to the overflow menu, the button [text](#text) is used instead.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Both     |
+
+### `text`
+
+Button text. Ignored if an icon is specified, unless the button is displayed in the overflow menu.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| string | No       | Both     |
+
+### `showAsAction`
+
+| Type                                          | Required | Platform |
+| --------------------------------------------- | -------- | -------- |
+| enum('always', 'never', 'withText', 'ifRoom') | No       | Android  |
+
+- **ifRooom** - Only add button to the TopBar if there is room for it, otherwise add it to the overflow menu.
+- **never** - Never place this button in the TopBar. Instead, list the button in the overflow menu.
+- **always** - Always place this button in the app bar.
+
+### `component`
+
+Set a react [component](layout-component.mdx) as this button's view which will be displayed instead of the regular view.
+
+| Type                   | Required | Platform |
+| ---------------------- | -------- | -------- |
+| [Component](layout-component.mdx) | No       | Both     |
+
+### `iconInsets`
+
+[IconInsets](options-iconInsets.mdx) are applied to the icon to translate its original position on the screen.
+
+| Type       | Required | Platform |
+| ---------- | -------- | -------- |
+| IconInsets | No       | iOS      |
+
+### `systemItem`
+
+System icon; ignored if an [icon](#icon-number) is specified. For more information, see [apple's guidelines](https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/system-icons/).
+
+| Type                                                                                                                                                                                                                                          | Required | Platform |
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- |
+| enum('done', 'cancel', 'edit', 'save', 'add', 'flexibleSpace', 'fixedSpace', 'compose', 'reply', 'action', 'organize', 'bookmarks', 'search', 'refresh', 'stop', 'camera', 'trash', 'play', 'pause', 'rewind', 'fastForward', 'undo', 'redo') | No       | iOS      |

website/docs/options-iconInsets.mdx

@@ -0,0 +1,37 @@
+---
+id: iconInsets-options
+title: IconInsets Options
+sidebar_label: IconInsets
+---
+
+### `top`
+
+Configure top inset
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Both     |
+
+### `bottom`
+
+Configure bottom inset
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Both     |
+
+### `left`
+
+Configure left inset
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Both     |
+
+### `right`
+
+Configure right inset
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Both     |

website/docs/options-largeTitle.mdx

@@ -0,0 +1,55 @@
+---
+id: largeTitle-options
+title: Large Title Options
+sidebar_label: Large Title
+---
+
+Controls the top bar large title on iOS, available on iOS 11 and above.
+
+```js
+const options = {
+  topBar: {
+    largeTitle: {}
+  }
+};
+```
+
+### `visible`
+
+Controls whether the large title is visible or not.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | iOS      |
+
+### `fontSize`
+
+Set the title font size. On Android this value is in `sp`.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | iOS      |
+
+### `color`
+
+Large title text color.
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| Color | No       | iOS      |
+
+### `fontFamily`
+
+Set the large title [FontFamily](fonts.mdx).
+
+| Type       | Required | Platform |
+| ---------- | -------- | -------- |
+| FontFamily | No       | iOS      |
+
+### `fontWeight`
+
+Set the font weight for the large title.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | iOS      |

website/docs/options-overlay.mdx

@@ -0,0 +1,29 @@
+---
+id: overlay-options
+title: Overlay
+sidebar_label: Overlay
+---
+
+Controls overlay options
+
+```js
+const options = {
+  overlay: {
+
+  }
+}
+```
+
+### `interceptTouchOutside`
+Controls whether touch events outside the bounds of the overlay are to be handled by content behind the overlay. When set to true, touch events will **not** pass through to the underlying content.
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| boolean | No       | Both     |
+
+### `handleKeyboardEvents`
+Overlays on iOS don't handle keyboard events by default. If your Overlay contains a TextInput component, you'll want to enable this option so that TextInput responds to keyboard events.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| boolean | No       | iOS     |

website/docs/options-root.mdx

@@ -0,0 +1,164 @@
+---
+id: options-root
+title: The options object
+sidebar_label: Options object
+---
+
+```js
+const options = {
+  bottomTab,
+  bottomTabs,
+  topBar,
+  layout,
+  sideMenu,
+  overlay,
+  modal,
+  preview
+};
+```
+
+## `bottomTab`
+
+Controls the bottom tab icon, font, color, and more.
+
+| Type                                  | Required | Platform |
+| ------------------------------------- | -------- | -------- |
+| [BottomTabOptions](options-bottomTab.mdx) | No       | Both     |
+
+## `bottomTabs`
+
+Controls the bottom tabs container.
+
+| Type                                    | Required | Platform |
+| --------------------------------------- | -------- | -------- |
+| [BottomTabsOptions](options-bottomTabs.mdx) | No       | Both     |
+
+## `topBar`
+
+Controls the Stack top bar styling.
+
+| Type                           | Required | Platform |
+| ------------------------------ | -------- | -------- |
+| [TopBarOptions](stack-options.mdx) |          | No       |
+
+## `statusBar`
+
+Controls the system status bar styling.
+
+| Type                                  | Required | Platform |
+| ------------------------------------- | -------- | -------- |
+| [StatusBarOptions](statusBar-options.mdx) | No       | Both     |
+
+## `layout`
+
+| Type                            | Required | Platform |
+| ------------------------------- | -------- | -------- |
+| [LayoutOptions](layout-options.mdx) | No       | Both     |
+
+## `sideMenu`
+
+| Type                                | Required | Platform |
+| ----------------------------------- | -------- | -------- |
+| [SideMenuOptions](options-sideMenu.mdx) | No       | Both     |
+
+## `overlay`
+
+| Type                              | Required | Platform |
+| --------------------------------- | -------- | -------- |
+| [OverlayOptions](options-overlay.mdx) | No       | Both     |
+
+## `animations`
+
+| Type                                    | Required | Platform |
+| --------------------------------------- | -------- | -------- |
+| [AnimationsOptions](options-animations.mdx) | No       | Both     |
+
+## `modal`
+
+| Type                          | Required | Platform |
+| ----------------------------- | -------- | -------- |
+| [ModalOptions](options-modal.mdx) | No       | Both     |
+
+## `preview`
+
+| Type                              | Required | Platform |
+| --------------------------------- | -------- | -------- |
+| [PreviewOptions](preview-options.mdx) | No       | iOS      |
+
+## `splitView`
+
+| Type                                  | Required | Platform |
+| ------------------------------------- | -------- | -------- |
+| [SplitViewOptions](options-splitView.mdx) | No       | iOS      |
+
+## `fab`
+
+| Type               | Required | Platform |
+| ------------------ | -------- | -------- |
+| [Fab](fab-options.mdx) | No       | Android  |
+
+## `modalPresentationStyle`
+
+Configure the presentation style of the modal.
+
+| Type                                                                                                    | Required | Platform |
+| ------------------------------------------------------------------------------------------------------- | -------- | -------- |
+| enum('formSheet', 'pageSheet', 'fullScreen', 'overFullScreen', 'overCurrentContext', 'popOver', 'none') | No       | Both     |
+
+#### Styles supported on both platforms
+
+- **overCurrentContext** - Display the modal and do not remove previous content when the show animation ends.
+- **none** - default system presentation style
+
+#### Styles supported only on iOS
+
+- **formSheet** - display content centered in the screen.
+- **pageSheet** - partially cover the underlying content.
+- **overFullScreen** - display the modal in full screen mode and do not remove previous content when the show animation ends.
+- **popOver** - Center content on screen and dim the content behind it.
+
+The default presentation style is different on each platform.
+
+| iOS                                                                                      | Android      |
+| ---------------------------------------------------------------------------------------- | ------------ |
+| <ul><li>iOS 12 and below - `fullScreen`</li><li>iOS 13 and above - `pageSheet`</li></ul> | `fullScreen` |
+
+## `modalTransitionStyle`
+
+Configure the transition style of the modal.
+
+| Type                                                                    | Required | Platform |
+| ----------------------------------------------------------------------- | -------- | -------- |
+| enum('coverVertical', 'crossDissolve', 'flipHorizontal', 'partialCurl') | No       | Both     |
+
+## `popGesture`
+
+Enable or disable swipe back to pop gesture.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | iOS      |
+
+## `backgroundImage`
+
+Background image of the screen.
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| Image | No       | iOS      |
+
+## `rootBackgroundImage`
+
+Background image for the Navigation View.
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| Image | No       | Android  |
+
+## `blurOnUnmount`
+
+Enable or disable automaticall blur of the focused input, dismissing keyboard on unmount.
+
+| Type    | Required | Platform | Default |
+| ------- | -------- | -------- | ------- |
+| boolean | No       | Android  | false   |

website/docs/options-sideMenu.mdx

@@ -0,0 +1,39 @@
+---
+id: sideMenu-options
+title: Side Menu Options
+sidebar_label: Side Menu
+---
+
+```js
+const options = {
+  sideMenu: {
+    left: {},
+    right: {},
+    openGestureMode: "entireScreen"
+  }
+};
+```
+
+### `left`
+
+Configure the left side menu.
+
+| Type                                 | Required | Platform |
+| ------------------------------------ | -------- | -------- |
+| [SideMenuSide](options-sideMenuSide.mdx) | No       | Both     |
+
+### `right`
+
+Configure the right side menu.
+
+| Type                                 | Required | Platform |
+| ------------------------------------ | -------- | -------- |
+| [SideMenuSide](options-sideMenuSide.mdx) | No       | Both     |
+
+### `openGestureMode`
+
+Configure how a user is allowed to open a drawer using gestures.
+
+| Type                          | Required | Platform |
+| ----------------------------- | -------- | -------- |
+| enum('entireScreen', 'bezel') | No       | iOS      |

website/docs/options-sideMenuSide.mdx

@@ -0,0 +1,48 @@
+---
+id: sideMenuSide-options
+title: Side Menu Side Options
+sidebar_label: Side Menu Side
+---
+
+```js
+const options = {
+  sideMenu: {
+    left: {
+      visible: false,
+      enabled: true
+    }
+  }
+};
+```
+
+### `visible`
+
+Show or hide the side menu.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | Both     |
+
+### `enabled`
+
+Enable or disable the side menu.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | Both     |
+
+### `width`
+
+Set the width of the side menu.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Both     |
+
+### `height`
+
+Set the height of the side menu.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Both     |

website/docs/options-splitView.mdx

@@ -0,0 +1,37 @@
+---
+id: splitView-options
+title: SplitView Options
+sidebar_label: SplitView
+---
+
+### `displayMode`
+
+Master view display mode.
+
+| Type                                         | Required | Default | Platform |
+| -------------------------------------------- | -------- | ------- | -------- |
+| enum('auto', 'visible', 'hidden', 'overlay') | No       | 'auto'  | iOS      |
+
+### `primaryEdge`
+
+Master view side. Leading is left. Trailing is right.
+
+| Type                        | Required | Default   | Platform |
+| --------------------------- | -------- | --------- | -------- |
+| enum('leading', 'trailing') | No       | 'leading' | iOS      |
+
+### `minWidth`
+
+Set the minimum width of master view.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | iOS      |
+
+### `maxWidth`
+
+Set the maximum width of master view.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | iOS      |

website/docs/orientation.mdx

@@ -0,0 +1,86 @@
+---
+id: orientation
+title: Orientation
+sidebar_label: Orientation
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+## Locking orientation
+Orientation can be locked either in the layout level, or across the app via default options. You can declare orientations you'd like your app to support in default options.
+
+<Tabs
+  defaultValue="defaultOptions"
+  values={[
+    { label: 'Locking orientation in default options', value: 'defaultOptions', },
+    { label: 'Locking root layout orientation', value: 'root', },
+    { label: 'Showing landscape modal', value: 'modal', }
+  ]
+}>
+<TabItem value="defaultOptions">
+
+Setting orientation in default options will affect all screens in all hierarchy levels. It's still possible to override orientation for specific screens.
+
+```js
+Navigation.setDefaultOptions({
+  layout: {
+    orientation: ['portrait']
+  }
+});
+```
+
+</TabItem>
+<TabItem value="modal">
+
+The following example demonstrates how to show a modal in landscape orientation.
+
+```js
+Navigation.showModal({
+  component: {
+    name: 'VideoPlayer'
+    options: {
+      layout: {
+        orientation: ['landscape']
+      }
+    }
+  }
+});
+```
+
+</TabItem>
+<TabItem value="root">
+
+Applying orientation in the root level will affect all screens in the root hierarchy level. It **will not** apply to modals.
+
+```js
+Navigation.setRoot({
+  root: {
+    bottomTabs: {
+      options: {
+        layout: {
+          orientation: ['portrait']
+        }
+      },
+      children: [
+        ...
+      ]
+    }
+  }
+});
+```
+
+</TabItem>
+</Tabs>
+
+## Changing orientation dynamically
+
+Changing orientation dynamically through `Navigation.mergeOption()` is supported only on Android.
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+  layout: {
+    orientation: ['landscape']
+  }
+});
+```

website/docs/passing-data-to-components.mdx

@@ -0,0 +1,62 @@
+---
+id: passing-data-to-components
+title: Passing data to components
+sidebar_label: Passing data to components
+---
+
+## Initial props
+
+React components use [props](https://facebook.github.io/react-native/docs/props) to receive data when they are created. When displaying the [component](component.mdx) layout, you can pass initial props to components using the `passProps` property.
+
+In this example, we push the `UserProfile` screen and pass two initial props to it:
+
+```js
+Navigation.push(this.props.componentId, {
+  component: {
+    name: 'UserProfile',
+    id: 'PROFILE_SCREEN_ID'
+    passProps: {
+      name: 'John Doe',
+      status: 'online'
+    }
+  }
+});
+```
+
+:::tip Serialization
+passProps don't need to be serializable. You can use this mechanism to pass lambda functions or even React Components.
+:::
+
+## Handling passProps in static options
+
+Each component can have a static options property which is used to configure the style properties of elements on the screen when that component is displayed. 
+
+Static options can either be a simple object, or a function which accepts `passProps` as an argument. Sometimes when declaring components, not all style properties are known. For example, a user profile screen will usually have the user's name as the TopBar title text. Therefore the title must be configured dynamically when pushing the screen.
+
+Following the code example [above](passing-data-to-components.mdx#initial-props), lets see how to use props passed in the push command to set the TopBar title.
+
+```jsx
+class UserProfileScreen extends React.Component {
+  static options(props) {
+    return (
+      topBar: {
+        title: {
+          text: props.name
+        }
+      }
+    );
+  }
+}
+```
+
+## Updating props
+
+To update a component's props, use the [Navigation.updateProps()](component-api.mdx#updateprops) command. Updating props triggers the component lifecycle methods related to [updating](https://reactjs.org/docs/react-component.html#updating).
+
+Notice that we're using the component `id` in order to update props of this specific instance of the component.
+
+```js
+Navigation.updateProps('PROFILE_SCREEN_ID', {
+  status: 'offline'
+});
+```

website/docs/playground-app.mdx

@@ -0,0 +1,17 @@
+---
+id: playground-app
+title: Playground app
+sidebar_label: Playground app
+---
+
+### Running The Project
+
+If you want to have a quick look around and test things out, you can run the playground app, bundled with this repo.
+
+1. Install dependencies via `npm install` (if you haven't already)
+2. Run the playground project on Android and iOS
+    - `npm run start` to get the packager running in the terminal, leave it open
+    - **iOS**: open `./playground/ios` in Xcode and run it
+    - **Android**: open `./playground/android` in Android Studio and run it
+3. You can run tests if / when you need to (list of scripts [available here](contributing.mdx#scripts)). Before you start changing things, make sure everything works.
+	- To easily run all tests in parallel `npm run test-all`

website/docs/screen-lifecycle.mdx

@@ -0,0 +1,49 @@
+---
+id: screen-lifecycle
+title: Screen Lifecycle
+sidebar_label: Screen Lifecycle
+---
+
+Any React Component registered with react-native-navigation is enhanced with two additional lifecycle events:
+
+* `componentDidAppear` - called each time a component is revealed to the user
+* `componentDidDisappear` - called each time a component is hidden from user's view **as a result of being detached from hierarchy**
+
+These methods compliment React's liefcycle methods:
+
+* `componentDidMount` - called once, when a component is attached to hierarchy **for the first time**
+* `componentWillUnmount` - called once, when a component is destroyed
+
+### Mounting
+These methods are called in the following order when a component is created and attached to hierarchy.
+
+* constructor()
+* render()
+* componentDidMount()
+* componentDidAppear()
+
+### Unmounting
+These methods are called when a component is being removed from hierarchy
+
+* componentDidDisappear()
+* componentWillUnmount()
+
+### Modal
+
+When a modal is displayed, depending on the [modalPresentationStyle](options-root.mdx#modalpresentationstyle), content behind it might be detached from hierarchy. This affects the visibility events which are emitted to the content behind the modal.
+
+When Modals with `pageSheet` or `overCurrentContext` modalPresentationStyle are displayed, previous content is still visible to the user. Thus `componentDidDisappear` event is **not** emitted.
+
+Same is applied when a modal is dismissed. If it was originally presented with `pageSheet` or `overCurrentContext` modalPresentationStyle, when that modal is then dismissed, the previous context won't receive a `componentDidAppear` event.
+
+### Overlay
+These methods are called in the following order when a component is displayed as an Overlay:
+
+* constructor()
+* render()
+* componentDidMount()
+* componentDidAppear()
+
+:::note
+Content displayed behind an Overlay does not receive the `componentDidDisappear`, since it's still visible to user and attached to the hierarchy.
+:::

docs/docs/showcases.md → website/docs/showcases.mdx

@@ -1,4 +1,8 @@
-# Showcases
+---
+id: showcases
+title: Showcases
+sidebar_label: Showcases
+---
 
 ## Apps
 ### Hekla for Hacker News

website/docs/sideMenu-disable.mdx

@@ -0,0 +1,65 @@
+---
+id: sideMenu-disable
+title: Disable Open and Close gesture
+sidebar_label: Open and Close Gesture
+---
+
+To open the side menu programmatically, you'll need to update the visible property of the side menu you'd like to open.
+
+The following snippet shows how to open the left side menu.
+```jsx
+Navigation.mergeOptions(componentId, {
+  sideMenu: {
+    left: {
+      visible: true,
+    },
+  },
+});
+```
+
+## Open by pressing on the hamburger menu
+The most common use case is to open the side menu by pressing the hamburger button in the TopBar. To achieve this, listen to the press event of the burger button, and open the side menu as shown above.
+
+```jsx
+const React = require('react');
+const Navigation = require('react-native-navigation');
+const { View, Text } = require('react-native');
+
+class SideMenuCenterScreen extends React.Component {
+  static options() {
+    return {
+      topBar: {
+        leftButtons: {
+          id: 'sideMenu',
+          icon: require('./menuIcon.png')
+        }
+      }
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    Navigation.events().bindComponent(this);
+  }
+
+  render() {
+    return (
+      <View>
+        <Text>Click the hamburger icon to open the side menu</Text>
+      </View>
+    );
+  }
+
+  navigationButtonPressed({ buttonId }) {
+    if (buttonId === 'sideMenu') {
+      Navigation.mergeOptions(this, {
+        sideMenu: {
+          left: {
+            visible: true
+          }
+        }
+      });
+    }
+  }
+}
+```

website/docs/sideMenu-docs.mdx

@@ -0,0 +1,105 @@
+---
+id: docs-sideMenu
+title: Side Menu
+sidebar_label: Side Menu
+---
+
+SideMenu provides access to destinations in the app from an easy to access menu which is accessible to the user via horizontal swipe gesture or a menu button.
+
+## Opening programmatically
+
+To open the side menu programmatically, you'll need to update the visible property of the side menu you'd like to open.
+
+The following snippet shows how to open the left side menu. The menu is opened by setting its visible option to visible.
+```jsx
+Navigation.mergeOptions(componentId, {
+  sideMenu: {
+    left: {
+      visible: true,
+    },
+  },
+});
+```
+
+## Opening via the hamburger menu
+The most common use case is to open the side menu by pressing the hamburger button at the TopBar. To achieve this, listen to the press event of the burger button, and open the side menu as shown above.
+
+```jsx
+const React = require('react');
+const Navigation = require('react-native-navigation');
+const { View, Text } = require('react-native');
+
+class SideMenuCenterScreen extends React.Component {
+  static options() {
+    return {
+      topBar: {
+        leftButtons: {
+          id: 'sideMenu',
+          icon: require('./menuIcon.png')
+        }
+      }
+    };
+  }
+
+  constructor(props) {
+    super(props);
+    Navigation.events().bindComponent(this);
+  }
+
+  render() {
+    return (
+      <View>
+        <Text>Click the hamburger icon to open the side menu</Text>
+      </View>
+    );
+  }
+
+  navigationButtonPressed({ buttonId }) {
+    if (buttonId === 'sideMenu') {
+      Navigation.mergeOptions(this, {
+        sideMenu: {
+          left: {
+            visible: true
+          }
+        }
+      });
+    }
+  }
+}
+```
+
+## Pushing to the center layout from a menu
+A common use case when using SideMenus is to interact with the center layout, e.g. pushing a screen to a stack in the center layout when a user clicks on a button from one of the menus.
+
+In order to interact with the stack, we'll first assign it a predefined id. For example:
+
+```js
+sideMenu: {
+  center: {
+    stack: {
+      id: 'CenterStack',
+      children: []
+    }
+  },
+  left: {
+    ...
+  }
+}
+```
+
+Now that we've defined an `id` for out stack, we can go ahead and push our screen to it. If we're pushing while the SideMenu is open, we'll need to make sure we close it by updating the visibility option of the relevant menu (left or right).
+
+```js
+Navigation.push('CenterStack', {
+  component: {
+    name: Screens.Pushed,
+    options: {
+      sideMenu: {
+        left: {
+          visible: false
+        }
+      }
+    }
+  }
+});
+```

website/docs/sideMenu-layout.mdx

@@ -0,0 +1,44 @@
+---
+id: sideMenu-layout
+title: Side Menu
+sidebar_label: Side Menu
+---
+
+This layout allows implementing sidemenus, which can be opened by swiping from one side towards the other side.
+
+```js
+{
+  left: {
+    component: {}
+  },
+  center: {
+    stack: {
+      options: {},
+      children: [{
+        component: {}
+      }]
+    }
+  },
+  right: {
+    component: {}
+  }
+}
+```
+
+## `center`
+
+| Type             | Required | Description                                      |
+| ---------------- | -------- | ------------------------------------------------ |
+| [Layout](Layout.mdx) | Yes      | Center component, contains the main application. |
+
+## `left`
+
+| Type             | Required | Description                        |
+| ---------------- | -------- | ---------------------------------- |
+| [Layout](Layout.mdx) | No       | Contains the left component layout. |
+
+## `right`
+
+| Type             | Required | Description                         |
+| ---------------- | -------- | ----------------------------------- |
+| [Layout](Layout.mdx) | No       | Contains the right component layout. |

website/docs/stack-api.mdx

@@ -0,0 +1,177 @@
+---
+id: stack-api
+title: Stack
+sidebar_label: Stack
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+## `push()`
+Push a screen into the stack and update the display according to the screen options.
+#### Parameters
+| Name        | Required | Type   | Description                                                                                                                                                                                                      |
+| ----------- | -------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| componentId | Yes      | string | The componentId of a screen pushed into the stack, or the id of the stack.                                                                                                                                            |
+| layout      | No       | Layout | The layout being pushed into the stack. Any type of layout (except stack) can be pushed into stacks. Typically, Component layout is pushed into stacks but it's possible to push SideMenu or BottomTabs as well. |
+
+#### Example
+
+<Tabs
+  defaultValue='component'
+  values={[
+    { label: 'Component', value: 'component', },
+    { label: 'Update options on push', value: 'push', },
+    { label: 'Push other layouts', value: 'otherLayout', },
+  ]
+}>
+
+<TabItem value='component'>
+The most common use case - push a single React component.
+
+```js
+Navigation.push(this.props.componentId, {
+  component: {
+    name: 'example.PushedScreen'
+  }
+});
+```
+
+</TabItem>
+
+<TabItem value='push'>
+Options are applied when the screen becomes visible.
+
+```js
+Navigation.push(this.props.componentId, {
+  component: {
+    name: 'example.PushedScreen',
+    options: {
+      topBar: {
+        title: {
+          text: 'Pushed screen title'
+        }
+      }
+    }
+  }
+});
+```
+
+</TabItem>
+
+<TabItem value='otherLayout'>
+Any layout type can be pushed. In this example we push a SideMenu layout.
+
+```js
+Navigation.push(this.props.componentId, {
+  sideMenu: {
+    left: {
+      component: {
+        name: 'drawerScreen'
+      }
+    },
+    center: {
+      component: {
+        name: 'centerScreen'
+      }
+    }
+  }
+});
+```
+
+</TabItem>
+
+</Tabs>
+
+## `pop()`
+Pop the top screen from the stack.
+#### Parameters
+| Name         | Required | Type                                | Description                                                           |
+| ------------ | -------- | ----------------------------------- | --------------------------------------------------------------------- |
+| componentId  | Yes      | string                              | The componentId of a screen pushed into the stack, or the stack id. |
+| mergeOptions | No       | [Options](options-root.mdx) | Options to be merged before popping the screen (optional).              |
+
+```js
+Navigation.pop(this.props.componentId);
+```
+
+## `popToRoot()`
+Pop all screens pushed into the stack.
+
+#### Parameters
+| Name         | Required | Type    | Description                                                           |
+| ------------ | -------- | ------- | --------------------------------------------------------------------- |
+| componentId  | Yes      | string  | The componentId of a screen pushed into the stack, or the stack id. |
+| mergeOptions | No       | [Options](options-root.mdx) | Options to be merged before popping the screen (optional).              |
+
+```js
+Navigation.popToRoot(this.props.componentId);
+```
+
+## `popTo()`
+Pop the stack to a given component.
+
+#### Parameters
+| Name         | Required | Type                  | Description                                              |
+| ------------ | -------- | --------------------- | -------------------------------------------------------- |
+| componentId  | Yes      | string                | The destination componentId                              |
+| mergeOptions | No       | [Options](options-root.mdx) | Options to be merged before popping the screen (optional). |
+
+```js
+Navigation.popTo(componentId);
+```
+
+## `setStackRoot()`
+Reset the stack to the given layout (accepts multiple children).
+
+#### Parameters
+| Name        | Required | Type                                                     | Description                                                           |
+| ----------- | -------- | -------------------------------------------------------- | --------------------------------------------------------------------- |
+| componentId | Yes      | string                                                   | The componentId of a screen pushed into the stack, or the stack id. |
+| layout      | Yes      | [layout](Layout.mdx) or [layout](Layout.mdx)[] | A single Component or array of components.                            |
+
+
+#### Example
+
+
+<Tabs
+  defaultValue='single'
+  values={[
+    { label: 'Single child', value: 'single' },
+    { label: 'Multiple children', value: 'multiple' }
+  ]
+}>
+
+<TabItem value='single'>
+
+```js
+Navigation.setStackRoot(this.props.componentId, {
+  component: {
+    name: 'example.NewRootScreen'
+  }
+});
+```
+
+</TabItem>
+
+<TabItem value='multiple'>
+
+In the example below we reset the stack with two components. The first one will be the root component and the second (`PushedScreen`) will be displayed. Pressing the back button (either hardware or software) will pop it, revealing the root component - `NewRootScreen`.
+
+```js
+Navigation.setStackRoot(this.props.componentId, [
+  {
+    component: {
+      name: 'NewRootScreen',
+    }
+  },
+  {
+    component: {
+      name: 'PushedScreen',
+    }
+  }
+]);
+```
+</TabItem>
+
+</Tabs>

website/docs/stack-backButton.mdx

@@ -0,0 +1,40 @@
+---
+id: stack-backButton
+title: The Back button
+sidebar_label: Back button
+---
+
+The back button is added automatically when two or more screens are pushed into the stack.
+
+## Styling the back button
+The back button's style can be customised by declaring a backButton options object. This configuration can be part of a screen's static options, or default options.
+
+```js
+backButton: {
+  color: 'red',
+  icon: require('../../img/customChevron.png')
+}
+```
+
+## Controling visibility
+The back buttons visbility can be controlled with the visible property.
+
+```js
+backButton: {
+  visible: false
+}
+```
+
+## Changing visbility programmatically
+Back button visibility can be changed dynamically using the mergeOptions command. When using a screen's componentId, the change will affect only that specific screen. But when using the stack's id, the change will affect all screens pushed into the stack.
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+  backButton: {
+    visible: false
+  }
+});
+```
+
+## Handling the back button
+Handling the back button is not possible. However, you can set a left button with a chevron and handle it like you'd handle any other button and calling `Navigation.pop` when desired.

website/docs/stack-backNavigation.mdx

@@ -0,0 +1,10 @@
+---
+id: stack-backNavigation
+title: Back Navigation
+sidebar_label: Back navigation
+---
+
+## Disabling back navigation
+
+## Handling back navigation
+

website/docs/stack-buttons.mdx

@@ -0,0 +1,101 @@
+---
+id: stack-buttons
+title: TopBar Buttons
+sidebar_label: TopBar Buttons
+---
+
+Buttons can be added to the [right](#rightButtons) and [left](#leftButtons) areas of the TopBar. Buttons can have either an icon or a text. They are declared in the the options object and, as with any other option, can be updated dynamically with the `Navigation.mergeOptions` command.
+
+> When using an icon button on **Android**, you should always pass a title as well. The title is used when the button is collapsed to the overflow menu and as a tooltip when the button is long pressed.
+
+# Overflow menu
+It's common practice to group less important actions in a menu or an action sheet.
+
+To do so on iOS, include a button with a menu icon and open an [ActionSheet](https://facebook.github.io/react-native/docs/actionsheetios) with the relevant actions when the button is clicked.
+
+On Android, use the [showAsAction](#showasaction) options to control when the button should appear in the menu.
+
+# Left button
+Left buttons behave like right buttons with two caveats on Android:
+* Only a single left button is alowed
+* Textual left button isn't supported
+
+# Using a react component in a button
+> ⚠️At the moment, Android only supports using custom buttons in `rightButtons`.
+
+Sometimes we require more from our buttons. In order to support every product need React Components can be used as custom views of buttons.
+To do so, you'll first need to register the view with Navigation, just like you register your components used as screens:
+
+```js
+Navigation.registerComponent('ButtonComponent', () => require('./ButtonComponent'));
+```
+
+Now you can create buttons which use the component registered with `'ButtonComponent'` as thier custom view:
+
+```js
+topBar: {
+  rightButtons: [
+    {
+      component: 'ButtonComponent',
+      passProps: {
+        // Pass initial props to the button here
+      }
+    }
+  ]
+}
+```
+
+## Updating props of custom buttons
+To update props of a mounted compoennt used as a button, you'll first need to assign it a unique id, then call the `Navigation.updateProps()` command with the id.
+
+Calling the updateProps command will trigger React's component lifecycle methods related to [props update](https://reactjs.org/docs/react-component.html#updating)
+```js
+// Declare the button and assign it a unique id
+topBar: {
+  rightButtons: [
+    {
+      id: 'SomeUniqueId',
+      component: 'ButtonComponent',
+      passProps: {
+        count: 0
+      }
+    }
+  ]
+}
+
+// Update props
+Navigation.updateProps('SomeUniqueId', {
+  count: 1
+});
+```
+
+
+# Changing buttons dynamically
+As buttons are part of a screen's options, they can be modified like any other styling option using the [mergeOptions]() command.
+
+## Setting buttons
+The following command will set the screen's right buttons. If the screen already has Right Buttons declared - they will be overridden.
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+  topBar: {
+    rightButtons: [
+      {
+        id: 'myDynamicButton',
+        text: 'My Button'
+      }
+    ]
+  }
+});
+```
+
+## Removing buttons
+Buttons can be removed by setting zero buttons, as shown in the snippet below.
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+  topBar: {
+    rightButtons: []
+  }
+});
+```

website/docs/stack-layout.mdx

@@ -0,0 +1,39 @@
+---
+id: stack-layout
+title: Stack
+sidebar_label: Stack
+---
+
+A stack is a container layout promoting a hierarchical navigation. It is used to navigate between screens at consecutive levels of hierarchy, steps in a flow or across an app.
+
+```js
+{
+  id: 'PROFILE_TAB',
+  children: [
+    {
+      component: {
+        id: 'PROFILE_SCREEN',
+        name: 'ProfileScreen'
+      }
+    }
+  ]
+}
+```
+
+## `id`
+
+| Type   | Required | Description                                                                                                                                                    |
+| ------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| string | No       | Unique id used to interact with the view via the Navigation api, usually `Navigation.mergeOptions` which accepts the componentId as it's first argument. |
+
+## `children`
+
+| Type               | Required | Description                   |
+| ------------------ | -------- | ----------------------------- |
+| [Layout[]](Layout.mdx) | YES      | Child layouts of any kind. |
+
+## `options`
+
+| Type                    | Required | Description                                              |
+| ----------------------- | -------- | -------------------------------------------------------- |
+| [Options](options-root.mdx) | No       | Options that will apply to all screens in stack |

website/docs/stack-options.mdx

@@ -0,0 +1,184 @@
+---
+id: stack-options
+title: Top Bar Options
+sidebar_label: Top Bar
+---
+
+## TopBar
+
+```js
+const options = {
+  topBar: {
+    animate: true,
+    title: {},
+    subtitle: {},
+    backButton: {},
+    background: {}
+  }
+};
+```
+
+### `animate`
+
+Determines if changing the TopBar visibility will be animated or not.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | Both     |
+
+### `title`
+
+Controls the top bar title.
+
+| Type                   | Required | Platform |
+| ---------------------- | -------- | -------- |
+| [Title](title-options.mdx) | No       | Both     |
+
+### `subtitle`
+
+Controls the top bar subtitle.
+
+| Type                         | Required | Platform |
+| ---------------------------- | -------- | -------- |
+| [Subitle](subtitle-options.mdx) | No       | Both     |
+
+### `backButton`
+
+Controls the top bar back button.
+
+| Type                              | Required | Platform |
+| --------------------------------- | -------- | -------- |
+| [BackButton](options-backButton.mdx) | No       | Both     |
+
+### `background`
+
+Controls the top bar background.
+
+| Type                              | Required | Platform |
+| --------------------------------- | -------- | -------- |
+| [Background](options-background.mdx) | No       | Both     |
+
+### `barStyle`
+
+Control the TopBar blur style. Requires `translucent: true`.
+
+| Type                    | Required | Platform |
+| ----------------------- | -------- | -------- |
+| enum('default','black') | No       | iOS      |
+
+### `borderColor`
+
+Change the topBar border color.
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| Color | No       | iOS      |
+
+### `borderHeight`
+
+Set the border height of the navbar in dp.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Android  |
+
+### `drawBehind`
+
+Controls if child should be drawn behind the TopBar or below it.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | Both     |
+
+### `elevation`
+
+Set the elevation of the TopBar in dp. This option changes how the shadow under the TopBar looks. Setting this value to 0 will remove the shadow completely.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| number | No       | Android  |
+
+### `hideOnScroll`
+
+Hide the TopBar when a scrolling layout is scrolled.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | Both     |
+
+### `hideNavBarOnFocusSearchBar`
+
+Indicates whether the navigation bar should be hidden when searching. True by default.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | iOS 11+  |
+
+### `leftButtons`
+
+An array of buttons to be displayed at the right-side of the TopBar. Button layout is from left to right. See the [Buttons](button-options) section for more details.
+
+:::info Android support 
+Android currently only supports a single left button and does not support custom left Buttons.
+:::
+
+
+| Type                           | Required | Platform |
+| ------------------------------ | -------- | -------- |
+| [[Button]](options-button.mdx) | No       | Both     |
+
+### `leftButtonColor`
+
+Default color for left buttons.
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| Color | No       | Both     |
+
+### `noBorder`
+
+Disables border at the bottom of the TopBar.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | iOS      |
+
+### `rightButtons`
+
+An array of buttons to be displayed at the right side of the TopBar. Button layout is from right to left. See the [Buttons](button-options) section for more details.
+
+| Type                       | Required | Platform |
+| -------------------------- | -------- | -------- |
+| [[Button]](options-button.mdx) | No       | Both     |
+
+### `rightButtonColor`
+
+Default color for the right button.
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| Color | No       | Both     |
+
+### `searchBar`
+
+Shows the UISearchBar in the TopBar.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | iOS 11+  |
+
+### `searchBarHiddenWhenScrolling`
+
+Hides the UISearchBar when scrolling.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | iOS 11+  |
+
+### `searchBarPlaceholder`
+
+The placeholder value in the UISearchBar.
+
+| Type   | Required | Platform |
+| ------ | -------- | -------- |
+| string | No       | iOS 11+  |

website/docs/stack-programmatically.mdx

@@ -0,0 +1,56 @@
+---
+id: stack-programmatically
+title: Interact programmatically with the Stack
+sidebar_label: Interact programmatically
+---
+
+The Navigation object provides ways to programmatically manipulate the stack.
+
+## Interact with the Stack by componentId
+Each layout pushed into the stack has an id. When in the context of a component, The component's `componentId` can be used to interact with a parent stack.
+When using a component's componentId, the native implementation knows to perform the command on the parent Stack of this component.
+
+In this example, we push a screen onto the component's parent stack.
+
+```jsx
+const React = require('react');
+const Navigation = require('react-native-navigation');
+
+class MyComponent extends React.Component {
+  onButtonClick = () => {
+    Navigation.push(this.props.componentId, {
+      component: {
+        name: 'PUSHED_SCREEN'
+      }
+    });
+  }
+}
+```
+
+## Interact with the Stack by a predefined id
+Sometimes we're required to interact with a specific stack not from the context of a component pushed into it. To do so, assign the stack a predefined `id` and use it when invoking any stack command.
+
+```js
+Navigation.setRoot({
+  root: {
+    stack: {
+      id: 'MyStack', // This is the id we're going to use when interacting with the stack
+      children: [
+        {
+          component: {
+            name: 'SomeComponent'
+          }
+        }
+      ]
+    }
+  }
+});
+
+function push() {
+  Navigation.push('MyStack', {
+    component: {
+      name: 'PushedScreen'
+    }
+  });
+}
+```

website/docs/statusBar-options.mdx

@@ -0,0 +1,43 @@
+---
+id: statusBar-options
+title: Status Bar Options
+sidebar_label: Status Bar
+---
+
+```js
+const options = {
+  statusBar: {}
+};
+```
+
+### `visible`
+
+Set the status bar visibility.
+
+| Type    | Required | Platform |
+| ------- | -------- | -------- |
+| boolean | No       | Both     |
+
+### `style`
+
+Set the text color of the status bar.
+
+| Type                  | Required | Platform | Default |
+| --------------------- | -------- | -------- | ------- |
+| enum('light', 'dark') | No       | Both     | 'light' |
+
+### `backgroundColor`
+
+Set the background color of the status bar.
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| Color | No       | Android  |
+
+### `drawBehind`
+
+Draw screen behind the status bar.
+
+| Type  | Required | Platform |
+| ----- | -------- | -------- |
+| boolean | No       | Android  |

website/docs/statusbar-docs.mdx

@@ -0,0 +1,48 @@
+---
+id: statusBar-docs
+title: StatusBar
+sidebar_label: StatusBar
+---
+
+The StatusBar appearance is controlled through options.
+
+For example, the following options will change the StatusBar background color to white will use dark colors for the StatusBar content (time, battery information, notification icons etc)
+
+```js
+options: {
+  statusBar: {
+    backgroundColor: 'white',
+    style: 'dark'
+  }
+}
+```
+
+:::warning Compatibility with StatusBar component
+React native's [StatusBar](https://reactnative.dev/docs/statusbar#__docusaurus) component is incompatible with React Native Navigation and you should avoid using it.
+:::
+
+## Changing StatusBar style dynamically
+
+As the StatusBar is controlled through options, it can be configured dynamically by calling `Navigation.mergeOptions` with the desired StatusBar options.
+
+For example, here's how you would hide the StatusBar dynamically
+
+```js
+Navigation.mergeOptions(this.props.componentId, {
+  statusBar: {
+    visible: false
+  }
+});
+```
+
+## How keep current StatusBar color when displaying screens
+
+When screens are displayed, the StatusBar color always changes to the color associated with the current screen. If a color isn't specified for a given screen (and thus for the StatusBar), the default (System default or from defaultOptions) color is used. Sometimes you might want to keep the current StatusBar color, for example when displaying an alert or a toast. To keep StatusBar color unchanged when displaying a screen, use `null` as a StatusBar color.
+
+```js
+options: {
+  statusBar: {
+    backgroundColor: null
+  }
+}
+```