Browse Source

Document programmatic tab selection

Guy Carmeli 6 years ago
parent
commit
ec108ed3ad
2 changed files with 59 additions and 6 deletions
  1. 1
    1
      docs/_sidebar.md
  2. 58
    5
      docs/docs/layout-types.md

+ 1
- 1
docs/_sidebar.md View File

7
   - [Top Level](/docs/top-level-api)
7
   - [Top Level](/docs/top-level-api)
8
   - [Screen](/docs/screen-api)
8
   - [Screen](/docs/screen-api)
9
   - [Events](/docs/events)
9
   - [Events](/docs/events)
10
-  - [Layout Types](/docs/layout-types)
10
+  - [Layouts](/docs/layout-types)
11
   - [Styling](/docs/styling)
11
   - [Styling](/docs/styling)
12
   - [TopBar Buttons](/docs/topBar-buttons) 
12
   - [TopBar Buttons](/docs/topBar-buttons) 
13
   - [Animations](/docs/animations)
13
   - [Animations](/docs/animations)

+ 58
- 5
docs/docs/layout-types.md View File

1
-# Layout Types
1
+# Layouts
2
 
2
 
3
 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.
3
 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.
4
 
4
 
70
 }
70
 }
71
 ```
71
 ```
72
 
72
 
73
+### Selecting tabs programmatically
74
+
75
+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.
76
+
77
+?>We'll use the following BottomTabs layout to demonstrate programmatic tab selection.
78
+
79
+```js
80
+const bottomTabs = {
81
+  id: 'BottomTabsId',
82
+  children: [
83
+    {
84
+      component: {
85
+        name: 'FirstScreen',
86
+        options: { ... }
87
+      }
88
+    },
89
+    {
90
+      component: {
91
+        id: 'SecondScreenId',
92
+        name: 'SecondScreen',
93
+        options: { ... }
94
+      }
95
+    }
96
+  ]
97
+}
98
+```
99
+
100
+#### selecting a tab by index
101
+
102
+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`.
103
+
104
+```js
105
+Navigation.mergeOptions('BottomTabsId', {
106
+  bottomTabs: {
107
+    currentTabIndex: 1
108
+  }
109
+});
110
+```
111
+
112
+#### selecting a tab by componentId
113
+
114
+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.
115
+
116
+For example, if invoked from one of the child components;`SecondScreen` or `FirstScreen`, the following merge command will select the tab containing the child.
117
+
118
+```js
119
+Navigation.mergeOptions(this.props.componentId, {
120
+  bottomTabs: {
121
+    currentTabId: this.props.componentId
122
+  }
123
+});
124
+```
125
+
73
 ## sideMenu
126
 ## sideMenu
74
 
127
 
75
 Expect center, left and right layouts
128
 Expect center, left and right layouts
112
 }
165
 }
113
 ```
166
 ```
114
 
167
 
115
-# Layout Examples
168
+## Layout Examples
116
 
169
 
117
-## Single page app with two side menus:
170
+### Single page app with two side menus:
118
 
171
 
119
 ```js
172
 ```js
120
 Navigation.setRoot({
173
 Navigation.setRoot({
146
 });
199
 });
147
 ```
200
 ```
148
 
201
 
149
-## Tab based app (with passProps example):
202
+### Tab based app (with passProps example):
150
 
203
 
151
 ```js
204
 ```js
152
 Navigation.setRoot({
205
 Navigation.setRoot({
176
 });
229
 });
177
 ```
230
 ```
178
 
231
 
179
-## Stack based app (with options example, initialised with 2 screens):
232
+### Stack based app (with options example, initialised with 2 screens):
180
 
233
 
181
 ```js
234
 ```js
182
 Navigation.setRoot({
235
 Navigation.setRoot({