replace container with component

- fix import statement
- add use case (stack)

docs/_sidebar.md

@@ -6,7 +6,7 @@
  - [Top Level](/docs/Navigation)
 - Params
  - [Root](/docs/Root)
- - [Container](/docs/Container)
+ - [Component](/docs/Component)
  - [SideMenu](/docs/SideMenu)
 - Options
  - [NavigationOptions](/docs/options/NavigationOptions)

docs/docs/Container.md → docs/docs/Component.md

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

docs/docs/Navigation.md

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

docs/docs/Root.md

@@ -4,7 +4,7 @@
 
 | Name | Type |
 | --- | --- |
-| container | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container</a> | 
+| component | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component</a> | 
 | sideMenu | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/SideMenu">SideMenu</a> | 
-| bottomTabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container[]</a> | 
+| bottomTabs | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component[]</a> | 
 

docs/docs/SideMenu.md

@@ -4,6 +4,6 @@
 
 | Name | Type |
 | --- | --- |
-| left | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container</a> | 
-| right | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container</a> | 
+| left | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component</a> | 
+| right | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component</a> | 
 

docs/docs/usage.md

@@ -4,7 +4,7 @@
 
 ### Navigation
 ```js
-import Navigation from 'react-native-navigation';
+import { Navigation } from 'react-native-navigation';
 ```
 ### Events - On App Launched
 How to initiate your app.
@@ -83,24 +83,57 @@ Navigation.setRoot({
   },
 });
 ```
+
+Start a stack based app (with options):
+
+```js
+Navigation.setRoot({
+  stack: {
+    options: {
+      topBar: {
+        hidden: true,
+      },
+    },
+    children: [
+      {
+        component: {
+          name: 'navigation.playground.TextScreen',
+          passProps: {
+            text: 'This is tab 1',
+            myFunction: () => 'Hello from a function!',
+          },
+        },
+      },
+      {
+        component: {
+          name: 'navigation.playground.TextScreen',
+          passProps: {
+            text: 'This is tab 2',
+          },
+        },
+      },
+    ],
+  },
+});
+```
 ## Screen API
 
 ### push(params)
 Push a new screen into this screen's navigation stack.
 
 ```js
-Navigation.push(this.props.containerId, {
+Navigation.push(this.props.componentId, {
   name: 'navigation.playground.PushedScreen',
   passProps: {}
 });
 ```
-### pop(containerId)
+### pop(componentId)
 Pop the top screen from this screen's navigation stack.
 
 ```js
-Navigation.pop(this.props.containerId);
+Navigation.pop(this.props.componentId);
 ```
-### popTo(containerId)
+### popTo(componentId)
 ```js
 Navigation.popTo(previousScreenId);
 ```
@@ -108,14 +141,14 @@ Navigation.popTo(previousScreenId);
 Pop all the screens until the root from this screen's navigation stack
 
 ```js
-Navigation.popToRoot(this.props.containerId);
+Navigation.popToRoot(this.props.componentId);
 ```
 ### showModal(params = {})
 Show a screen as a modal.
 
 ```js
 Navigation.showModal({
-  container: {
+  component: {
     name: 'navigation.playground.ModalScreen',
     passProps: {
         key: 'value'
@@ -123,11 +156,11 @@ Navigation.showModal({
   }
 });
 ```
-### dismissModal(containerId)
+### dismissModal(componentId)
 Dismiss modal.
 
 ```js
-Navigation.dismissModal(this.props.containerId);
+Navigation.dismissModal(this.props.componentId);
 ```
 ### dismissAllModals()
 Dismiss all the current modals at the same time.

docs/docs/v1tov2diff.md

@@ -17,9 +17,9 @@ These issues originate from the same problem: you cannot specify on which screen
 There are ways to solve some of these problems in v1 but they are not straightforward. We want to change that.
 
 #### New API
-To solve this problem in v2, every screen receives as a prop it’s containerId. Whenever you want to perform an action from that screen you need to pass the containerId to the function:
+To solve this problem in v2, every screen receives as a prop it’s componentId. Whenever you want to perform an action from that screen you need to pass the componentId to the function:
 ```js
-Navigator.pop(this.props.containerId)
+Navigator.pop(this.props.componentId)
 ```
 ### Built for Contributors
 Currently, it requires a lot of work to accept pull requests. We need to manually make sure that everything works before we approve them because v1 is not thoroughly tested. <br>
@@ -179,18 +179,18 @@ How to initiate your app.
 ```js
 Navigation.events().onAppLaunched(() => {
     Navigation.setRoot({
-      container: {
+      component: {
         name: 'navigation.playground.WelcomeScreen'
       }
     });
   });
 ```
 
-#### registerContainer(screenID, generator)
+#### registerComponent(screenID, generator)
 Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
 
 ```js
-Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
+Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
 ```
 
 #### setRoot({params})
@@ -198,12 +198,12 @@ Start a Single page app with two side menus:
 
 ```js
 Navigation.setRoot({
-      container: {
+      component: {
         name: 'navigation.playground.WelcomeScreen'
       },
       sideMenu: {
         left: {
-          container: {
+          component: {
             name: 'navigation.playground.TextScreen',
             passProps: {
               text: 'This is a left side menu screen'
@@ -211,7 +211,7 @@ Navigation.setRoot({
           }
         },
         right: {
-          container: {
+          component: {
             name: 'navigation.playground.TextScreen',
             passProps: {
               text: 'This is a right side menu screen'
@@ -227,7 +227,7 @@ Start a tab based app:
 Navigation.setRoot({
       tabs: [
         {
-          container: {
+          component: {
             name: 'navigation.playground.TextScreen',
             passProps: {
               text: 'This is tab 1',
@@ -236,7 +236,7 @@ Navigation.setRoot({
           }
         },
         {
-          container: {
+          component: {
             name: 'navigation.playground.TextScreen',
             passProps: {
               text: 'This is tab 2'
@@ -252,34 +252,34 @@ Navigation.setRoot({
 Push a new screen into this screen's navigation stack.
 
 ```js
-Navigation.push(this.props.containerId, {
+Navigation.push(this.props.componentId, {
       name: 'navigation.playground.PushedScreen',
       passProps: {}
     });
 ```
-#### pop(containerId)
+#### pop(componentId)
 Pop the top screen from this screen's navigation stack.
 
 ```js
-Navigation.pop(this.props.containerId);
+Navigation.pop(this.props.componentId);
 ```
 #### popTo(params)
 
 ```js
-Navigation.popTo(this.props.containerId, this.props.previousScreenIds[0]);
+Navigation.popTo(this.props.componentId, this.props.previousScreenIds[0]);
 ```
 #### popToRoot()
 Pop all the screens until the root from this screen's navigation stack
 
 ```js
-Navigation.popToRoot(this.props.containerId);
+Navigation.popToRoot(this.props.componentId);
 ```
 #### showModal(params = {})
 Show a screen as a modal.
 
 ```js
 Navigation.showModal({
-      container: {
+      component: {
         name: 'navigation.playground.ModalScreen',
         passProps: {
             key: 'value'
@@ -287,11 +287,11 @@ Navigation.showModal({
       }
     });
 ```
-#### dismissModal(containerId)
+#### dismissModal(componentId)
 Dismiss modal.
 
 ```js
-Navigation.dismissModal(this.props.containerId);
+Navigation.dismissModal(this.props.componentId);
 ```
 #### dismissAllModals()
 Dismiss all the current modals at the same time.