Browse Source

Document v1-v2 options

Guy Carmeli 6 years ago
parent
commit
18024caf46
1 changed files with 152 additions and 20 deletions
  1. 152
    20
      docs/docs/options-migration.md

+ 152
- 20
docs/docs/options-migration.md View File

1
 # Common Options
1
 # Common Options
2
 
2
 
3
 ## navBarTextColor
3
 ## navBarTextColor
4
+Title text color
5
+
4
 ```js
6
 ```js
5
 topBar: {
7
 topBar: {
6
   title: {
8
   title: {
10
 ```
12
 ```
11
 
13
 
12
 ## navBarTextFontSize
14
 ## navBarTextFontSize
15
+Title font size
16
+
13
 ```js
17
 ```js
14
 topBar: {
18
 topBar: {
15
   title: {
19
   title: {
19
 ```
23
 ```
20
 
24
 
21
 ## navBarTextFontFamily
25
 ## navBarTextFontFamily
26
+Title font
27
+
22
 ```js
28
 ```js
23
 topBar: {
29
 topBar: {
24
   title: {
30
   title: {
28
 ```
34
 ```
29
 
35
 
30
 ## navBarBackgroundColor
36
 ## navBarBackgroundColor
37
+TopBar background color
38
+
31
 ```js
39
 ```js
32
 topBar: {
40
 topBar: {
33
   background: {
41
   background: {
37
 ```
45
 ```
38
 
46
 
39
 ## navBarCustomView
47
 ## navBarCustomView
48
+Use a react view as the TopBar's background or use a React view instead of the textual title.
49
+
40
 ```js
50
 ```js
41
 topBar: {
51
 topBar: {
42
   background: {
52
   background: {
53
 ```
63
 ```
54
 
64
 
55
 ## navBarComponentAlignment
65
 ## navBarComponentAlignment
66
+Align the React view used as the title
67
+
56
 ```js
68
 ```js
57
 topBar: {
69
 topBar: {
58
   title: {
70
   title: {
59
     component: {
71
     component: {
60
       name: 'example.CustomTopBarTitle',
72
       name: 'example.CustomTopBarTitle',
61
-      alignment: 'center'
73
+      alignment: 'center' | 'fill'
62
     }
74
     }
63
   }
75
   }
64
 }  
76
 }  
65
 ```
77
 ```
66
 
78
 
67
 ## navBarCustomViewInitialProps
79
 ## navBarCustomViewInitialProps
80
+Initial props passed to the React component
81
+
68
 ```js
82
 ```js
69
 topBar: {
83
 topBar: {
70
   background: {
84
   background: {
83
 ```
97
 ```
84
 
98
 
85
 ## navBarButtonColor
99
 ## navBarButtonColor
100
+TopBar button color
101
+
86
 ```js
102
 ```js
87
 topBar: {
103
 topBar: {
88
   rightButtons: [
104
   rightButtons: [
89
     {
105
     {
90
       color: 'red'
106
       color: 'red'
91
     }
107
     }
92
-  ]
93
-}
94
-```
95
-
96
-## topBarElevationShadowEnabled
97
-```js
98
-topBar: {
99
-  elevation: 0
108
+  ],
109
+  leftButtons: [
110
+    {
111
+      color: 'red'
112
+    }
113
+  ],
114
+  backButton: {
115
+    color: 'red'
116
+  }
100
 }
117
 }
101
 ```
118
 ```
102
 
119
 
103
 ## navBarHidden
120
 ## navBarHidden
121
+TopBar visibility. When setting `visible: false`, you probably want to set `drawBehind: true` as well. Use `animate: false` to toggle visibility without animation.
122
+
104
 ```js
123
 ```js
105
 topBar: {
124
 topBar: {
106
   visible: false
125
   visible: false
108
 ```
127
 ```
109
 
128
 
110
 ## navBarTransparent
129
 ## navBarTransparent
130
+Transparent TopBar. Set `drawBehind: true` to draw the screen behind the transparent TopBar.
131
+
111
 ```js
132
 ```js
112
 topBar: {
133
 topBar: {
113
   transparent: true
134
   transparent: true
115
 ```
136
 ```
116
 
137
 
117
 ## drawUnderNavBar
138
 ## drawUnderNavBar
139
+Draw the screen behind the TopBar, Useful when the TopBar is toggled or transparent
140
+
118
 ```js
141
 ```js
119
 topBar: {
142
 topBar: {
120
   drawBehind: true
143
   drawBehind: true
122
 ```
145
 ```
123
 
146
 
124
 ## drawUnderTabBar
147
 ## drawUnderTabBar
148
+Draw the screen behind the BottomTabs, Useful when toggling BottomTabs or when the BottomTabs are translucent.
149
+
125
 ```js
150
 ```js
126
 bottomTabs: {
151
 bottomTabs: {
127
   drawBehind: true
152
   drawBehind: true
129
 ```
154
 ```
130
 
155
 
131
 ## tabBarHidden
156
 ## tabBarHidden
157
+BottomTabs visibility.
132
 ```js
158
 ```js
133
 bottomTabs: {
159
 bottomTabs: {
134
   visible: false
160
   visible: false
135
 }  
161
 }  
136
 ```
162
 ```
137
 
163
 
164
+The BottomTab's visibility can be toggled only on **Android** using `mergeOptions`:
165
+```js
166
+Navigation.mergeOptions(this.props.componentId, {
167
+  bottomTabs: {
168
+    visible: false
169
+  }
170
+});
171
+```
172
+On **iOS**, BottomTab visibility can be changed only when pushing screens. This means that if you'd like to hide BottomTabs when pushing a screen, You'll need to set the property to `false` in the options passed to the `push` command or via the `static get options() {}` api.
173
+
138
 ## statusBarHidden
174
 ## statusBarHidden
175
+StatusBar visibility
176
+
139
 ```js
177
 ```js
140
 statusBar: {
178
 statusBar: {
141
   visible: false
179
   visible: false
143
 ```
181
 ```
144
 
182
 
145
 ## statusBarTextColorScheme
183
 ## statusBarTextColorScheme
184
+Theme of text and icons displayed in the StatusBar
185
+
146
 ```js
186
 ```js
147
 statusBar: {
187
 statusBar: {
148
   style: 'light' | 'dark'
188
   style: 'light' | 'dark'
150
 ```
190
 ```
151
 
191
 
152
 ## navBarSubtitleColor
192
 ## navBarSubtitleColor
193
+Subtitle color
194
+
153
 ```js
195
 ```js
154
 topBar: {
196
 topBar: {
155
   subtitle: {
197
   subtitle: {
159
 ```
201
 ```
160
 
202
 
161
 ## navBarSubtitleFontFamily
203
 ## navBarSubtitleFontFamily
204
+Subtitle font
205
+
162
 ```js
206
 ```js
163
 topBar: {
207
 topBar: {
164
   subtitle: {
208
   subtitle: {
168
 ```
212
 ```
169
 
213
 
170
 ## navBarSubtitleFontSize
214
 ## navBarSubtitleFontSize
215
+Subtitle font size
216
+
171
 ```js
217
 ```js
172
 topBar: {
218
 topBar: {
173
   subtitle: {
219
   subtitle: {
177
 ```
223
 ```
178
 
224
 
179
 ## screenBackgroundColor
225
 ## screenBackgroundColor
226
+Screen color, visible before the actual React view is rendered
227
+
180
 ```js
228
 ```js
181
 layout: {
229
 layout: {
182
   backgroundColor: 'red'
230
   backgroundColor: 'red'
184
 ```
232
 ```
185
 
233
 
186
 ## orientation
234
 ## orientation
235
+
187
 ```js
236
 ```js
188
 layout: {
237
 layout: {
189
   orientation: ['portrait', 'landscape'] // An array of supported orientations
238
   orientation: ['portrait', 'landscape'] // An array of supported orientations
191
 ```
240
 ```
192
 
241
 
193
 ## disabledButtonColor
242
 ## disabledButtonColor
243
+Button color when `enabled: false` is used
244
+
194
 ```js
245
 ```js
195
 topBar: {
246
 topBar: {
196
   rightButtons: [
247
   rightButtons: [
202
 ```
253
 ```
203
 
254
 
204
 ## navBarButtonFontSize
255
 ## navBarButtonFontSize
256
+Button font size
257
+
205
 ```js
258
 ```js
206
 topBar: {
259
 topBar: {
207
   rightButtons: [
260
   rightButtons: [
208
     {
261
     {
209
       fontSize: 13
262
       fontSize: 13
210
     }
263
     }
264
+  ],
265
+  leftButtons: [
266
+    {
267
+      fontSize: 13
268
+    }
211
   ]
269
   ]
212
 }  
270
 }  
213
 ```
271
 ```
214
 
272
 
215
 ## navBarLeftButtonFontSize
273
 ## navBarLeftButtonFontSize
274
+Left button font size
275
+
216
 ```js
276
 ```js
217
 {
277
 {
218
   topBar: {
278
   topBar: {
226
 ```
286
 ```
227
 
287
 
228
 ## navBarLeftButtonColor
288
 ## navBarLeftButtonColor
289
+Left button color
290
+
229
 ```js
291
 ```js
230
 {
292
 {
231
   topBar: {
293
   topBar: {
239
 ```
301
 ```
240
 
302
 
241
 ## navBarLeftButtonFontWeight
303
 ## navBarLeftButtonFontWeight
304
+Left button font weight
305
+
242
 ```js
306
 ```js
243
 {
307
 {
244
   topBar: {
308
   topBar: {
252
 ```
316
 ```
253
 
317
 
254
 ## navBarRightButtonFontSize
318
 ## navBarRightButtonFontSize
319
+Right button font size
320
+
255
 ```js
321
 ```js
256
 topBar: {
322
 topBar: {
257
   leftButtons: [
323
   leftButtons: [
263
 ```
329
 ```
264
 
330
 
265
 ## navBarRightButtonColor
331
 ## navBarRightButtonColor
332
+Right button color
333
+
266
 ```js
334
 ```js
267
 topBar: {
335
 topBar: {
268
   rightButtons: [
336
   rightButtons: [
274
 ```
342
 ```
275
 
343
 
276
 ## navBarRightButtonFontWeight
344
 ## navBarRightButtonFontWeight
345
+Right button font weight
346
+
277
 ```js
347
 ```js
278
 topBar: {
348
 topBar: {
279
   rightButtons: [
349
   rightButtons: [
285
 ```
355
 ```
286
 
356
 
287
 ## modalPresentationStyle
357
 ## modalPresentationStyle
358
+Controls he behavior of screens displayed modally. 
359
+
360
+### Options supported on iOS
361
+* overCurrentContext - Content is displayed over the previous screen. Useful for **transparent modals**
362
+* `formSheet` - Content is centered in the screen
363
+* `pageSheet` -Content partially covers the underlying content
364
+* `overFullScreen` - Content covers the screen, without detaching previous content.
365
+* `fullScreen` - Content covers the screen, previous content is detached.
366
+
367
+### Options supported on Android
368
+* `overCurrentContext` - Content is displayed over the previous screen. Useful for **transparent modals**
369
+* `none` - Previous content is detached when the Modal's show animation ends
370
+
288
 ```js
371
 ```js
289
 {
372
 {
290
-modalPresentationStyle: 'overCurrentContext' // Supported styles are: 'formSheet', 'pageSheet', 'overFullScreen', 'overCurrentContext', 'currentContext', 'popOver', 'fullScreen' and 'none'. On Android, only overCurrentContext and none are supported.
373
+  modalPresentationStyle: 'overCurrentContext'
291
 }
374
 }
292
 ```
375
 ```
293
 
376
 
294
 ## navBarButtonFontFamily
377
 ## navBarButtonFontFamily
378
+Button font family
379
+
295
 ```js
380
 ```js
296
 topBar: {
381
 topBar: {
297
   rightButtons: [
382
   rightButtons: [
305
 # iOS only
390
 # iOS only
306
 
391
 
307
 ## navBarHideOnScroll
392
 ## navBarHideOnScroll
393
+Hide TopBar when list is scrolled
394
+
308
 ```js
395
 ```js
309
 topBar: {
396
 topBar: {
310
   hideOnScroll: true
397
   hideOnScroll: true
312
 ```
399
 ```
313
 
400
 
314
 ## navBarTranslucent
401
 ## navBarTranslucent
402
+Translucent TopBar, Setting `drawBehind: true` is required for this property to work as expected.
403
+
315
 ```js
404
 ```js
316
 topBar: {
405
 topBar: {
317
   translucent: true
406
   translucent: true
319
 ```
408
 ```
320
 
409
 
321
 ## navBarNoBorder
410
 ## navBarNoBorder
411
+Remove TopBar border (hair line)
412
+
322
 ```js
413
 ```js
323
 topBar: {
414
 topBar: {
324
   noBorder: true
415
   noBorder: true
326
 ```
417
 ```
327
 
418
 
328
 ## navBarBlur
419
 ## navBarBlur
420
+Blue the area behind the TopBar, Setting `drawBehind: true` is required for this property to work as expected.
421
+
329
 ```js
422
 ```js
330
 topBar: {
423
 topBar: {
331
   blur: true
424
   blur: true
333
 ```
426
 ```
334
 
427
 
335
 ## rootBackgroundImageName
428
 ## rootBackgroundImageName
429
+
430
+* iOS: name of image in Images.xcassets
431
+* Android: name of drawable
432
+
336
 ```js
433
 ```js
337
 {
434
 {
338
   rootBackgroundImage: require('rootBackground.png')
435
   rootBackgroundImage: require('rootBackground.png')
339
 }
436
 }
340
 ```
437
 ```
341
 
438
 
439
+## screenBackgroundImageName
440
+name of image in Images.xcassets
441
+
442
+```js
443
+{
444
+  backgroundImage: require('background.png')
445
+}
446
+```
447
+
342
 ## statusBarHideWithNavBar
448
 ## statusBarHideWithNavBar
449
+Hide the StatusBar if the TopBar is also hidden
450
+
343
 ```js
451
 ```js
344
 statusBar: {
452
 statusBar: {
345
   hideWithTopBar: true
453
   hideWithTopBar: true
347
 ```
455
 ```
348
 
456
 
349
 ## statusBarBlur
457
 ## statusBarBlur
458
+Blur the area behind the StatusBar
459
+
350
 ```js
460
 ```js
351
 statusBar: {
461
 statusBar: {
352
   blur: true
462
   blur: true
354
 ```
464
 ```
355
 
465
 
356
 ## disabledBackGesture
466
 ## disabledBackGesture
467
+Disable the back (swipe) gesture used to pop screens 
468
+
357
 ```js
469
 ```js
358
 {
470
 {
359
   popGesture: false
471
   popGesture: false
360
 } 
472
 } 
361
 ```
473
 ```
362
 
474
 
363
-## screenBackgroundImageName
364
-```js
365
-{
366
-  backgroundImage: require('background.png')
367
-}
368
-```
369
-
370
 ## largeTitle
475
 ## largeTitle
476
+Use iOS 11 large title
477
+
371
 ```js
478
 ```js
372
   topBar: {
479
   topBar: {
373
     largeTitle: {
480
     largeTitle: {
381
 
488
 
382
 # Android Options
489
 # Android Options
383
 
490
 
491
+## topBarElevationShadowEnabled
492
+TopBar elevation in dp. Set this value to `0` to disable the TopBa's shadow.
493
+
494
+```js
495
+topBar: {
496
+  elevation: 0
497
+}
498
+```
499
+
384
 ## navBarTitleTextCentered
500
 ## navBarTitleTextCentered
501
+Title alignment
502
+
385
 ```js
503
 ```js
386
 topBar: {
504
 topBar: {
387
-  alignment: 'center'
505
+  alignment: 'center'|'fill'
388
 }
506
 }
389
 ```
507
 ```
390
 
508
 
391
 ## statusBarColor
509
 ## statusBarColor
510
+StatusBar color
511
+
392
 ```js
512
 ```js
393
 statusBar: {
513
 statusBar: {
394
   backgroundColor: 'red'
514
   backgroundColor: 'red'
396
 ```
516
 ```
397
 
517
 
398
 ## drawUnderStatusBar
518
 ## drawUnderStatusBar
519
+Draw content behind the StatusBar
520
+
399
 ```js
521
 ```js
400
 statusBar: {
522
 statusBar: {
401
   drawBehind: true
523
   drawBehind: true
403
 ```
525
 ```
404
 
526
 
405
 ## navBarHeight
527
 ## navBarHeight
528
+TopBar height in dp
529
+
406
 ```js
530
 ```js
407
 topBar: {
531
 topBar: {
408
-  height: 70, // TopBar height in dp
532
+  height: 70
409
 }
533
 }
410
 ```
534
 ```
411
 
535
 
412
 ## navBarTopPadding
536
 ## navBarTopPadding
537
+Content top margin
538
+
413
 ```js
539
 ```js
414
 layout: {
540
 layout: {
415
-    topMargin: 26 // Set the layout's top margin in dp
541
+    topMargin: 26
416
   }
542
   }
417
 ```
543
 ```
418
 
544
 
419
 ## topTabsHeight
545
 ## topTabsHeight
546
+TopTabs height
547
+
420
 ```js
548
 ```js
421
 topTabs: {
549
 topTabs: {
422
   height: 70
550
   height: 70
424
 ```
552
 ```
425
 
553
 
426
 ## topBarBorderColor
554
 ## topBarBorderColor
555
+TopBar border color
556
+
427
 ```js
557
 ```js
428
 topBar: {
558
 topBar: {
429
   borderColor: 'red'
559
   borderColor: 'red'
431
 ```
561
 ```
432
 
562
 
433
 ## topBarBorderWidth
563
 ## topBarBorderWidth
564
+TopBar border height
565
+
434
 ```js
566
 ```js
435
 topBar: {
567
 topBar: {
436
   borderHeight: 1.3
568
   borderHeight: 1.3