npm
/
react-native-navigation
Watch 11
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

replace container with component 

- fix import statement
- add use case (stack)
Billy 6 years ago
parent
e194321008
commit
d05145d311
7 changed files with 100 additions and 68 deletions
Split View Show Diff Stats
  1. 1
    1
      docs/_sidebar.md
  2. 3
    3
      docs/docs/Component.md
  3. 32
    33
      docs/docs/Navigation.md
  4. 2
    2
      docs/docs/Root.md
  5. 2
    2
      docs/docs/SideMenu.md
  6. 42
    9
      docs/docs/usage.md
  7. 18
    18
      docs/docs/v1tov2diff.md

+ 1
- 1
docs/_sidebar.md View File 

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

docs/docs/Container.md → docs/docs/Component.md View File 

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

+ 32
- 33
docs/docs/Navigation.md View File 

@@ -3,32 +3,32 @@
3 3 
 # Navigation
4 4
5 5 
 * [Navigation](#Navigation)
6 
-    * [.registerContainer(containerName, getContainerFunc)](#Navigation+registerContainer)
6 
+    * [.registerComponent(componentName, getComponentFunc)](#Navigation+registerComponent)
7 7 
     * [.setRoot(root)](#Navigation+setRoot)
8 8 
     * [.setDefaultOptions(options)](#Navigation+setDefaultOptions)
9 
-    * [.setOptions(containerId, options)](#Navigation+setOptions)
9 
+    * [.setOptions(componentId, options)](#Navigation+setOptions)
10 10 
     * [.showModal(params)](#Navigation+showModal)
11 
-    * [.dismissModal(containerId)](#Navigation+dismissModal)
11 
+    * [.dismissModal(componentId)](#Navigation+dismissModal)
12 12 
     * [.dismissAllModals()](#Navigation+dismissAllModals)
13 
-    * [.push(containerId, container)](#Navigation+push)
14 
-    * [.pop(containerId, params)](#Navigation+pop)
15 
-    * [.popTo(containerId)](#Navigation+popTo)
16 
-    * [.popToRoot(containerId)](#Navigation+popToRoot)
13 
+    * [.push(componentId, component)](#Navigation+push)
14 
+    * [.pop(componentId, params)](#Navigation+pop)
15 
+    * [.popTo(componentId)](#Navigation+popTo)
16 
+    * [.popToRoot(componentId)](#Navigation+popToRoot)
17 17 
     * [.events()](#Navigation+events)
18 18
19 19
20 20 
 * * *
21 21
22 
-<a name="Navigation+registerContainer"></a>
22 
+<a name="Navigation+registerComponent"></a>
23 23
24 
-## navigation.registerContainer(containerName, getContainerFunc)
24 
+## navigation.registerComponent(componentName, getComponentFunc)
25 25 
 Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
26 26
27 27
28 28 
 | Param | Type | Description |
29 29 
 | --- | --- | --- |
30 
-| containerName | <code>string</code> | Unique container name |
31 
-| getContainerFunc | <code>function</code> | generator function, typically `() => require('./myContainer')` |
30 
+| componentName | <code>string</code> | Unique component name |
31 
+| getComponentFunc | <code>function</code> | generator function, typically `() => require('./myComponent')` |
32 32
33 33
34 34 
 * * *
 
@@ -41,7 +41,7 @@ Reset the navigation stack to a new screen (the stack root is changed).
41 41
42 42 
 | Param | Type |
43 43 
 | --- | --- |
44 
-| root | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Root">Root</a> |
44 
+| root | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Root">Root</a> |
45 45
46 46
47 47 
 * * *
 
@@ -54,20 +54,20 @@ Set default options to all screens. Useful for declaring a consistent style acro
54 54
55 55 
 | Param | Type |
56 56 
 | --- | --- |
57 
-| options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/NavigationOptions">NavigationOptions</a> |
57 
+| options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/NavigationOptions">NavigationOptions</a> |
58 58
59 59
60 60 
 * * *
61 61
62 62 
 <a name="Navigation+setOptions"></a>
63 63
64 
-## navigation.setOptions(containerId, options)
65 
-Change a containers navigation options
64 
+## navigation.setOptions(componentId, options)
65 
+Change a components navigation options
66 66
67 67
68 68 
 | Param | Type | Description |
69 69 
 | --- | --- | --- |
70 
-| containerId | <code>string</code> | The container's id. |
70 
+| componentId | <code>string</code> | The component's id. |
71 71 
 | options | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/options/NavigationOptions">NavigationOptions</a> |  |
72 72
73 73 
 
@@ -81,20 +81,20 @@ Show a screen as a modal.
81 81
82 82 
 | Param | Type |
83 83 
 | --- | --- |
84 
-| params | <code>object</code> |
84 
+| params | <code>object</code> |
85 85
86 86
87 87 
 * * *
88 88
89 89 
 <a name="Navigation+dismissModal"></a>
90 90
91 
-## navigation.dismissModal(containerId)
92 
-Dismiss a modal by containerId. The dismissed modal can be anywhere in the stack.
91 
+## navigation.dismissModal(componentId)
92 
+Dismiss a modal by componentId. The dismissed modal can be anywhere in the stack.
93 93
94 94
95 95 
 | Param | Type | Description |
96 96 
 | --- | --- | --- |
97 
-| containerId | <code>string</code> | The container's id. |
97 
+| componentId | <code>string</code> | The component's id. |
98 98
99 99
100 100 
 * * *
 
@@ -109,27 +109,27 @@ Dismiss all Modals
109 109
110 110 
 <a name="Navigation+push"></a>
111 111
112 
-## navigation.push(containerId, container)
112 
+## navigation.push(componentId, component)
113 113 
 Push a new screen into this screen's navigation stack.
114 114
115 115
116 116 
 | Param | Type | Description |
117 117 
 | --- | --- | --- |
118 
-| containerId | <code>string</code> | The container's id. |
119 
-| container | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Container">Container</a> |  |
118 
+| componentId | <code>string</code> | The component's id. |
119 
+| component | <a href="https://wix.github.io/react-native-navigation/v2/#/docs/Component">Component</a> |  |
120 120
121 121
122 122 
 * * *
123 123
124 124 
 <a name="Navigation+pop"></a>
125 125
126 
-## navigation.pop(containerId, params)
127 
-Pop a container from the stack, regardless of it's position.
126 
+## navigation.pop(componentId, params)
127 
+Pop a component from the stack, regardless of it's position.
128 128
129 129
130 130 
 | Param | Type | Description |
131 131 
 | --- | --- | --- |
132 
-| containerId | <code>string</code> | The container's id. |
132 
+| componentId | <code>string</code> | The component's id. |
133 133 
 | params | <code>*</code> |  |
134 134
135 135 
 
@@ -137,26 +137,26 @@ Pop a container from the stack, regardless of it's position.
137 137
138 138 
 <a name="Navigation+popTo"></a>
139 139
140 
-## navigation.popTo(containerId)
141 
-Pop the stack to a given container
140 
+## navigation.popTo(componentId)
141 
+Pop the stack to a given component
142 142
143 143
144 144 
 | Param | Type | Description |
145 145 
 | --- | --- | --- |
146 
-| containerId | <code>string</code> | The container's id. |
146 
+| componentId | <code>string</code> | The component's id. |
147 147
148 148
149 149 
 * * *
150 150
151 151 
 <a name="Navigation+popToRoot"></a>
152 152
153 
-## navigation.popToRoot(containerId)
154 
-Pop the container's stack to root.
153 
+## navigation.popToRoot(componentId)
154 
+Pop the component's stack to root.
155 155
156 156
157 157 
 | Param | Type |
158 158 
 | --- | --- |
159 
-| containerId | <code>*</code> |
159 
+| componentId | <code>*</code> |
160 160
161 161
162 162 
 * * *
 
@@ -165,4 +165,3 @@ Pop the container's stack to root.
165 165
166 166 
 ## navigation.events()
167 167 
 Obtain the events registery instance
168 
-

+ 2
- 2
docs/docs/Root.md View File 

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

+ 2
- 2
docs/docs/SideMenu.md View File 

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

+ 42
- 9
docs/docs/usage.md View File 

@@ -4,7 +4,7 @@
4 4
5 5 
 ### Navigation
6 6 
 ```js
7 
-import Navigation from 'react-native-navigation';
7 
+import { Navigation } from 'react-native-navigation';
8 8 
 ```
9 9 
 ### Events - On App Launched
10 10 
 How to initiate your app.
 
@@ -83,24 +83,57 @@ Navigation.setRoot({
83 83 
   },
84 84 
 });
85 85 
 ```
86 
+
87 
+Start a stack based app (with options):
88 
+
89 
+```js
90 
+Navigation.setRoot({
91 
+  stack: {
92 
+    options: {
93 
+      topBar: {
94 
+        hidden: true,
95 
+      },
96 
+    },
97 
+    children: [
98 
+      {
99 
+        component: {
100 
+          name: 'navigation.playground.TextScreen',
101 
+          passProps: {
102 
+            text: 'This is tab 1',
103 
+            myFunction: () => 'Hello from a function!',
104 
+          },
105 
+        },
106 
+      },
107 
+      {
108 
+        component: {
109 
+          name: 'navigation.playground.TextScreen',
110 
+          passProps: {
111 
+            text: 'This is tab 2',
112 
+          },
113 
+        },
114 
+      },
115 
+    ],
116 
+  },
117 
+});
118 
+```
86 119 
 ## Screen API
87 120
88 121 
 ### push(params)
89 122 
 Push a new screen into this screen's navigation stack.
90 123
91 124 
 ```js
92 
-Navigation.push(this.props.containerId, {
125 
+Navigation.push(this.props.componentId, {
93 126 
   name: 'navigation.playground.PushedScreen',
94 127 
   passProps: {}
95 128 
 });
96 129 
 ```
97 
-### pop(containerId)
130 
+### pop(componentId)
98 131 
 Pop the top screen from this screen's navigation stack.
99 132
100 133 
 ```js
101 
-Navigation.pop(this.props.containerId);
134 
+Navigation.pop(this.props.componentId);
102 135 
 ```
103 
-### popTo(containerId)
136 
+### popTo(componentId)
104 137 
 ```js
105 138 
 Navigation.popTo(previousScreenId);
106 139 
 ```
 
@@ -108,14 +141,14 @@ Navigation.popTo(previousScreenId);
108 141 
 Pop all the screens until the root from this screen's navigation stack
109 142
110 143 
 ```js
111 
-Navigation.popToRoot(this.props.containerId);
144 
+Navigation.popToRoot(this.props.componentId);
112 145 
 ```
113 146 
 ### showModal(params = {})
114 147 
 Show a screen as a modal.
115 148
116 149 
 ```js
117 150 
 Navigation.showModal({
118 
-  container: {
151 
+  component: {
119 152 
     name: 'navigation.playground.ModalScreen',
120 153 
     passProps: {
121 154 
         key: 'value'
 
@@ -123,11 +156,11 @@ Navigation.showModal({
123 156 
   }
124 157 
 });
125 158 
 ```
126 
-### dismissModal(containerId)
159 
+### dismissModal(componentId)
127 160 
 Dismiss modal.
128 161
129 162 
 ```js
130 
-Navigation.dismissModal(this.props.containerId);
163 
+Navigation.dismissModal(this.props.componentId);
131 164 
 ```
132 165 
 ### dismissAllModals()
133 166 
 Dismiss all the current modals at the same time.

+ 18
- 18
docs/docs/v1tov2diff.md View File 

@@ -17,9 +17,9 @@ These issues originate from the same problem: you cannot specify on which screen
17 17 
 There are ways to solve some of these problems in v1 but they are not straightforward. We want to change that.
18 18
19 19 
 #### New API
20 
-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:
20 
+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:
21 21 
 ```js
22 
-Navigator.pop(this.props.containerId)
22 
+Navigator.pop(this.props.componentId)
23 23 
 ```
24 24 
 ### Built for Contributors
25 25 
 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.
179 179 
 ```js
180 180 
 Navigation.events().onAppLaunched(() => {
181 181 
     Navigation.setRoot({
182 
-      container: {
182 
+      component: {
183 183 
         name: 'navigation.playground.WelcomeScreen'
184 184 
       }
185 185 
     });
186 186 
   });
187 187 
 ```
188 188
189 
-#### registerContainer(screenID, generator)
189 
+#### registerComponent(screenID, generator)
190 190 
 Every screen component in your app must be registered with a unique name. The component itself is a traditional React component extending React.Component.
191 191
192 192 
 ```js
193 
-Navigation.registerContainer(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
193 
+Navigation.registerComponent(`navigation.playground.WelcomeScreen`, () => WelcomeScreen);
194 194 
 ```
195 195
196 196 
 #### setRoot({params})
 
@@ -198,12 +198,12 @@ Start a Single page app with two side menus:
198 198
199 199 
 ```js
200 200 
 Navigation.setRoot({
201 
-      container: {
201 
+      component: {
202 202 
         name: 'navigation.playground.WelcomeScreen'
203 203 
       },
204 204 
       sideMenu: {
205 205 
         left: {
206 
-          container: {
206 
+          component: {
207 207 
             name: 'navigation.playground.TextScreen',
208 208 
             passProps: {
209 209 
               text: 'This is a left side menu screen'
 
@@ -211,7 +211,7 @@ Navigation.setRoot({
211 211 
           }
212 212 
         },
213 213 
         right: {
214 
-          container: {
214 
+          component: {
215 215 
             name: 'navigation.playground.TextScreen',
216 216 
             passProps: {
217 217 
               text: 'This is a right side menu screen'
 
@@ -227,7 +227,7 @@ Start a tab based app:
227 227 
 Navigation.setRoot({
228 228 
       tabs: [
229 229 
         {
230 
-          container: {
230 
+          component: {
231 231 
             name: 'navigation.playground.TextScreen',
232 232 
             passProps: {
233 233 
               text: 'This is tab 1',
 
@@ -236,7 +236,7 @@ Navigation.setRoot({
236 236 
           }
237 237 
         },
238 238 
         {
239 
-          container: {
239 
+          component: {
240 240 
             name: 'navigation.playground.TextScreen',
241 241 
             passProps: {
242 242 
               text: 'This is tab 2'
 
@@ -252,34 +252,34 @@ Navigation.setRoot({
252 252 
 Push a new screen into this screen's navigation stack.
253 253
254 254 
 ```js
255 
-Navigation.push(this.props.containerId, {
255 
+Navigation.push(this.props.componentId, {
256 256 
       name: 'navigation.playground.PushedScreen',
257 257 
       passProps: {}
258 258 
     });
259 259 
 ```
260 
-#### pop(containerId)
260 
+#### pop(componentId)
261 261 
 Pop the top screen from this screen's navigation stack.
262 262
263 263 
 ```js
264 
-Navigation.pop(this.props.containerId);
264 
+Navigation.pop(this.props.componentId);
265 265 
 ```
266 266 
 #### popTo(params)
267 267
268 268 
 ```js
269 
-Navigation.popTo(this.props.containerId, this.props.previousScreenIds[0]);
269 
+Navigation.popTo(this.props.componentId, this.props.previousScreenIds[0]);
270 270 
 ```
271 271 
 #### popToRoot()
272 272 
 Pop all the screens until the root from this screen's navigation stack
273 273
274 274 
 ```js
275 
-Navigation.popToRoot(this.props.containerId);
275 
+Navigation.popToRoot(this.props.componentId);
276 276 
 ```
277 277 
 #### showModal(params = {})
278 278 
 Show a screen as a modal.
279 279
280 280 
 ```js
281 281 
 Navigation.showModal({
282 
-      container: {
282 
+      component: {
283 283 
         name: 'navigation.playground.ModalScreen',
284 284 
         passProps: {
285 285 
             key: 'value'
 
@@ -287,11 +287,11 @@ Navigation.showModal({
287 287 
       }
288 288 
     });
289 289 
 ```
290 
-#### dismissModal(containerId)
290 
+#### dismissModal(componentId)
291 291 
 Dismiss modal.
292 292
293 293 
 ```js
294 
-Navigation.dismissModal(this.props.containerId);
294 
+Navigation.dismissModal(this.props.componentId);
295 295 
 ```
296 296 
 #### dismissAllModals()
297 297 
 Dismiss all the current modals at the same time.