Update docs

docs/_sidebar.md

@@ -9,6 +9,7 @@
   - [Events](/docs/events)
   - [Layout Types](/docs/layout-types)
   - [Styling](/docs/styling)
+  - [TopBar Buttons](/docs/topBar-buttons) 
 - Migration from v1
   - [Top Level](/docs/top-level-api-migration)
 - [API](/api/README)

docs/docs/styling.md

@@ -54,54 +54,26 @@ Navigation.mergeOptions(this.props.componentId, {
 
 ## Options object format
 
+### Common options
+
 ```js
 {
   statusBar: {
-    backgroundColor: 'red', // Android only
     visible: false,
-    style: 'light',
-    hideWithTopBar: false, // iOS only
-    blur: true // iOS only
+    style: 'light' | 'dark'
+  },
+  layout: {
+    backgroundColor: 'white',
+    orientation: ['portrait', 'landscape'] // An array of supported orientations
   },
-  screenBackgroundColor: 'white',
-  orientation: ['portrait', 'landscape'],
-  popGesture: true,
-  backgroundImage: require('background.png'),
-  rootBackgroundImage: require('rootBackground.png'),
   modalPresentationStyle: 'overCurrentContext', // Supported styles are: 'formSheet', 'pageSheet', 'overFullScreen', 'overCurrentContext', 'currentContext', 'popOver', 'fullScreen' and 'none'. On Android, only overCurrentContext and none are supported.
   topBar: {
     visible: true,
-    height: 70, // Android only, Height of the TopBar in dp.
-    borderColor: 'red', // Android only.
-    borderHeight: 1.3, // Android only.
-    leftButtons: [{
-      id: 'buttonOne',
-      icon: require('icon.png'),
-      component: {
-        name: 'example.CustomButtonComponent'
-      },
-      title: 'Button one',
-      enabled: true,
-      disableIconTint: false,
-      tintColor: 'red',
-      disabledColor: 'black',
-      testID: 'buttonOneTestID'
-    }],
-    rightButtons: [],
+    animate: false, // Controls wether TopBar visibility changes should be animated
     hideOnScroll: true,
     buttonColor: 'black',
-    translucent: true,
-    transparent: false,
     drawBehind: false,
-    noBorder: false,
-    blur: false,
-    animate: false,
-    largeTitle: false,
     testID: 'topBar',
-    backButtonImage: require('icon.png'),
-    backButtonHidden: false,
-    backButtonTitle: 'Back',
-    hideBackButtonTitle: false,
     component: {
       name: 'example.CustomTopBar'
     },
@@ -110,7 +82,6 @@ Navigation.mergeOptions(this.props.componentId, {
       fontSize: 14,
       color: 'red',
       fontFamily: 'Helvetica',
-      height: 70, // Android only, optional; Height of the TitleBar in dp.
       component: {
         name: 'example.CustomTopBarTitle',
         alignment: 'center'
@@ -132,13 +103,11 @@ Navigation.mergeOptions(this.props.componentId, {
   },
   bottomTabs: {
     visible: true,
-    animate: false,
+    animate: false, // Controls wether BottomTabs visibility changes should be animated
     currentTabIndex: 0,
+    currentTabId: 'currentTabId',
     testID: 'bottomTabsTestID',
     drawBehind: false,
-    currentTabId: 'currentTabId',
-    translucent: true,
-    hideShadow: false,
     backgroundColor: 'white',
     tabColor: 'red',
     selectedTabColor: 'blue',
@@ -149,9 +118,7 @@ Navigation.mergeOptions(this.props.componentId, {
     title: 'Tab 1',
     badge: '2',
     testID: 'bottomTabTestID',
-    visible: undefined,
-    icon: require('tab.png'),
-    iconInsets: { top: 0, left: 0, bottom: 0, right: 0 }
+    icon: require('tab.png')
   },
   sideMenu: {
     left: {
@@ -165,6 +132,55 @@ Navigation.mergeOptions(this.props.componentId, {
   },
   overlay: {
     interceptTouchOutside: true
+  }  
+}
+```
+
+### iOS specific options
+```js
+{
+  statusBar: {
+    hideWithTopBar: false,
+    blur: true
+  },
+  popGesture: true,
+  backgroundImage: require('background.png'),
+  rootBackgroundImage: require('rootBackground.png'),
+  topBar: {
+    translucent: true,
+    transparent: false,
+    noBorder: false,
+    blur: false,
+    largeTitle: false,
+    backButtonImage: require('icon.png'),
+    backButtonHidden: false,
+    backButtonTitle: 'Back',
+    hideBackButtonTitle: false,
+  },
+  bottomTabs: {
+    translucent: true,
+    hideShadow: false
+  },
+  bottomTab: {
+    iconInsets: { top: 0, left: 0, bottom: 0, right: 0 }
+  }
+}
+```
+
+### Android specific options
+
+```js
+{
+  statusBar: {
+    backgroundColor: 'red'
+  },
+  topBar: {
+    height: 70, // TopBar height in dp.
+    borderColor: 'red',
+    borderHeight: 1.3,
+    title: {
+      height: 70 // TitleBar height in dp.
+    }
   }
 }
 ```

docs/docs/topBar-buttons.md

@@ -0,0 +1,59 @@
+# Button options
+
+The following options can be used to customise buttons.
+
+```js
+{
+  id: 'buttonOne',
+  icon: require('icon.png'),
+  component: {
+    name: 'example.CustomButtonComponent'
+  },
+  title: 'Button one',
+  enabled: true,
+  disableIconTint: false,
+  tintColor: 'red',
+  disabledColor: 'black',
+  testID: 'buttonOneTestID'
+}
+```
+
+# Declaring Buttons statically
+
+Buttons can be defined in a screen's static options:
+
+```js
+class MyScreen extends Component {
+  static get options() {
+    topBar: {
+    leftButtons: [
+      {
+        id: 'buttonOne',
+        icon: require('icon.png')
+      }
+    ],
+    rightButtons: [],
+  }
+  
+}
+```
+
+# Declaring buttons dynamically
+
+TopBar buttons can be declared dynamically as well when adding a screen to the layout hierarchy.
+
+```js
+Navigation.push(this.props.componentId, {
+  component: {
+    name: 'navigation.playground.PushedScreen',
+    options: {
+      rightButtons: [
+        {
+          id: 'buttonOne',
+          icon: require('icon.png')
+        }
+      ]
+    }
+  }
+}
+```