Document v1-v2 options

docs/docs/options-migration.md

@@ -1,6 +1,8 @@
 # Common Options
 
 ## navBarTextColor
+Title text color
+
 ```js
 topBar: {
   title: {
@@ -10,6 +12,8 @@ topBar: {
 ```
 
 ## navBarTextFontSize
+Title font size
+
 ```js
 topBar: {
   title: {
@@ -19,6 +23,8 @@ topBar: {
 ```
 
 ## navBarTextFontFamily
+Title font
+
 ```js
 topBar: {
   title: {
@@ -28,6 +34,8 @@ topBar: {
 ```
 
 ## navBarBackgroundColor
+TopBar background color
+
 ```js
 topBar: {
   background: {
@@ -37,6 +45,8 @@ topBar: {
 ```
 
 ## navBarCustomView
+Use a react view as the TopBar's background or use a React view instead of the textual title.
+
 ```js
 topBar: {
   background: {
@@ -53,18 +63,22 @@ topBar: {
 ```
 
 ## navBarComponentAlignment
+Align the React view used as the title
+
 ```js
 topBar: {
   title: {
     component: {
       name: 'example.CustomTopBarTitle',
-      alignment: 'center'
+      alignment: 'center' | 'fill'
     }
   }
 }  
 ```
 
 ## navBarCustomViewInitialProps
+Initial props passed to the React component
+
 ```js
 topBar: {
   background: {
@@ -83,24 +97,29 @@ topBar: {
 ```
 
 ## navBarButtonColor
+TopBar button color
+
 ```js
 topBar: {
   rightButtons: [
     {
       color: 'red'
     }
-  ]
-}
-```
-
-## topBarElevationShadowEnabled
-```js
-topBar: {
-  elevation: 0
+  ],
+  leftButtons: [
+    {
+      color: 'red'
+    }
+  ],
+  backButton: {
+    color: 'red'
+  }
 }
 ```
 
 ## navBarHidden
+TopBar visibility. When setting `visible: false`, you probably want to set `drawBehind: true` as well. Use `animate: false` to toggle visibility without animation.
+
 ```js
 topBar: {
   visible: false
@@ -108,6 +127,8 @@ topBar: {
 ```
 
 ## navBarTransparent
+Transparent TopBar. Set `drawBehind: true` to draw the screen behind the transparent TopBar.
+
 ```js
 topBar: {
   transparent: true
@@ -115,6 +136,8 @@ topBar: {
 ```
 
 ## drawUnderNavBar
+Draw the screen behind the TopBar, Useful when the TopBar is toggled or transparent
+
 ```js
 topBar: {
   drawBehind: true
@@ -122,6 +145,8 @@ topBar: {
 ```
 
 ## drawUnderTabBar
+Draw the screen behind the BottomTabs, Useful when toggling BottomTabs or when the BottomTabs are translucent.
+
 ```js
 bottomTabs: {
   drawBehind: true
@@ -129,13 +154,26 @@ bottomTabs: {
 ```
 
 ## tabBarHidden
+BottomTabs visibility.
 ```js
 bottomTabs: {
   visible: false
 }  
 ```
 
+The BottomTab's visibility can be toggled only on **Android** using `mergeOptions`:
+```js
+Navigation.mergeOptions(this.props.componentId, {
+  bottomTabs: {
+    visible: false
+  }
+});
+```
+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.
+
 ## statusBarHidden
+StatusBar visibility
+
 ```js
 statusBar: {
   visible: false
@@ -143,6 +181,8 @@ statusBar: {
 ```
 
 ## statusBarTextColorScheme
+Theme of text and icons displayed in the StatusBar
+
 ```js
 statusBar: {
   style: 'light' | 'dark'
@@ -150,6 +190,8 @@ statusBar: {
 ```
 
 ## navBarSubtitleColor
+Subtitle color
+
 ```js
 topBar: {
   subtitle: {
@@ -159,6 +201,8 @@ topBar: {
 ```
 
 ## navBarSubtitleFontFamily
+Subtitle font
+
 ```js
 topBar: {
   subtitle: {
@@ -168,6 +212,8 @@ topBar: {
 ```
 
 ## navBarSubtitleFontSize
+Subtitle font size
+
 ```js
 topBar: {
   subtitle: {
@@ -177,6 +223,8 @@ topBar: {
 ```
 
 ## screenBackgroundColor
+Screen color, visible before the actual React view is rendered
+
 ```js
 layout: {
   backgroundColor: 'red'
@@ -184,6 +232,7 @@ layout: {
 ```
 
 ## orientation
+
 ```js
 layout: {
   orientation: ['portrait', 'landscape'] // An array of supported orientations
@@ -191,6 +240,8 @@ layout: {
 ```
 
 ## disabledButtonColor
+Button color when `enabled: false` is used
+
 ```js
 topBar: {
   rightButtons: [
@@ -202,17 +253,26 @@ topBar: {
 ```
 
 ## navBarButtonFontSize
+Button font size
+
 ```js
 topBar: {
   rightButtons: [
     {
       fontSize: 13
     }
+  ],
+  leftButtons: [
+    {
+      fontSize: 13
+    }
   ]
 }  
 ```
 
 ## navBarLeftButtonFontSize
+Left button font size
+
 ```js
 {
   topBar: {
@@ -226,6 +286,8 @@ topBar: {
 ```
 
 ## navBarLeftButtonColor
+Left button color
+
 ```js
 {
   topBar: {
@@ -239,6 +301,8 @@ topBar: {
 ```
 
 ## navBarLeftButtonFontWeight
+Left button font weight
+
 ```js
 {
   topBar: {
@@ -252,6 +316,8 @@ topBar: {
 ```
 
 ## navBarRightButtonFontSize
+Right button font size
+
 ```js
 topBar: {
   leftButtons: [
@@ -263,6 +329,8 @@ topBar: {
 ```
 
 ## navBarRightButtonColor
+Right button color
+
 ```js
 topBar: {
   rightButtons: [
@@ -274,6 +342,8 @@ topBar: {
 ```
 
 ## navBarRightButtonFontWeight
+Right button font weight
+
 ```js
 topBar: {
   rightButtons: [
@@ -285,13 +355,28 @@ topBar: {
 ```
 
 ## modalPresentationStyle
+Controls he behavior of screens displayed modally. 
+
+### Options supported on iOS
+* overCurrentContext - Content is displayed over the previous screen. Useful for **transparent modals**
+* `formSheet` - Content is centered in the screen
+* `pageSheet` -Content partially covers the underlying content
+* `overFullScreen` - Content covers the screen, without detaching previous content.
+* `fullScreen` - Content covers the screen, previous content is detached.
+
+### Options supported on Android
+* `overCurrentContext` - Content is displayed over the previous screen. Useful for **transparent modals**
+* `none` - Previous content is detached when the Modal's show animation ends
+
 ```js
 {
-modalPresentationStyle: 'overCurrentContext' // Supported styles are: 'formSheet', 'pageSheet', 'overFullScreen', 'overCurrentContext', 'currentContext', 'popOver', 'fullScreen' and 'none'. On Android, only overCurrentContext and none are supported.
+  modalPresentationStyle: 'overCurrentContext'
 }
 ```
 
 ## navBarButtonFontFamily
+Button font family
+
 ```js
 topBar: {
   rightButtons: [
@@ -305,6 +390,8 @@ topBar: {
 # iOS only
 
 ## navBarHideOnScroll
+Hide TopBar when list is scrolled
+
 ```js
 topBar: {
   hideOnScroll: true
@@ -312,6 +399,8 @@ topBar: {
 ```
 
 ## navBarTranslucent
+Translucent TopBar, Setting `drawBehind: true` is required for this property to work as expected.
+
 ```js
 topBar: {
   translucent: true
@@ -319,6 +408,8 @@ topBar: {
 ```
 
 ## navBarNoBorder
+Remove TopBar border (hair line)
+
 ```js
 topBar: {
   noBorder: true
@@ -326,6 +417,8 @@ topBar: {
 ```
 
 ## navBarBlur
+Blue the area behind the TopBar, Setting `drawBehind: true` is required for this property to work as expected.
+
 ```js
 topBar: {
   blur: true
@@ -333,13 +426,28 @@ topBar: {
 ```
 
 ## rootBackgroundImageName
+
+* iOS: name of image in Images.xcassets
+* Android: name of drawable
+
 ```js
 {
   rootBackgroundImage: require('rootBackground.png')
 }
 ```
 
+## screenBackgroundImageName
+name of image in Images.xcassets
+
+```js
+{
+  backgroundImage: require('background.png')
+}
+```
+
 ## statusBarHideWithNavBar
+Hide the StatusBar if the TopBar is also hidden
+
 ```js
 statusBar: {
   hideWithTopBar: true
@@ -347,6 +455,8 @@ statusBar: {
 ```
 
 ## statusBarBlur
+Blur the area behind the StatusBar
+
 ```js
 statusBar: {
   blur: true
@@ -354,20 +464,17 @@ statusBar: {
 ```
 
 ## disabledBackGesture
+Disable the back (swipe) gesture used to pop screens 
+
 ```js
 {
   popGesture: false
 } 
 ```
 
-## screenBackgroundImageName
-```js
-{
-  backgroundImage: require('background.png')
-}
-```
-
 ## largeTitle
+Use iOS 11 large title
+
 ```js
   topBar: {
     largeTitle: {
@@ -381,14 +488,27 @@ statusBar: {
 
 # Android Options
 
+## topBarElevationShadowEnabled
+TopBar elevation in dp. Set this value to `0` to disable the TopBa's shadow.
+
+```js
+topBar: {
+  elevation: 0
+}
+```
+
 ## navBarTitleTextCentered
+Title alignment
+
 ```js
 topBar: {
-  alignment: 'center'
+  alignment: 'center'|'fill'
 }
 ```
 
 ## statusBarColor
+StatusBar color
+
 ```js
 statusBar: {
   backgroundColor: 'red'
@@ -396,6 +516,8 @@ statusBar: {
 ```
 
 ## drawUnderStatusBar
+Draw content behind the StatusBar
+
 ```js
 statusBar: {
   drawBehind: true
@@ -403,20 +525,26 @@ statusBar: {
 ```
 
 ## navBarHeight
+TopBar height in dp
+
 ```js
 topBar: {
-  height: 70, // TopBar height in dp
+  height: 70
 }
 ```
 
 ## navBarTopPadding
+Content top margin
+
 ```js
 layout: {
-    topMargin: 26 // Set the layout's top margin in dp
+    topMargin: 26
   }
 ```
 
 ## topTabsHeight
+TopTabs height
+
 ```js
 topTabs: {
   height: 70
@@ -424,6 +552,8 @@ topTabs: {
 ```
 
 ## topBarBorderColor
+TopBar border color
+
 ```js
 topBar: {
   borderColor: 'red'
@@ -431,6 +561,8 @@ topBar: {
 ```
 
 ## topBarBorderWidth
+TopBar border height
+
 ```js
 topBar: {
   borderHeight: 1.3