styling docs

docs/_sidebar.md

@@ -6,6 +6,7 @@
   - [Top Level](/docs/top-level-api)
   - [Screen](/docs/screen-api)
   - [Layout types](/docs/layout-types)
+  - [Styling](/docs/styling)
 - [Migration from v1](/api/README)
   - [Top Level](/docs/top-level-api-migration)
   

docs/docs/styling.md

@@ -0,0 +1,161 @@
+# Styling Options
+
+You can style the navigator appearance and behavior by passing an `options` object. This object can be passed when the screen is originally created; can be defined per-screen by setting `static get options()` on the screen component; and can be overridden when a screen is pushed.
+
+The easiest way to style your screen is by adding `static get options()` to your screen React component definition.
+
+```js
+export default class StyledScreen extends Component {
+  static get options() {
+    return {
+      topBar: {
+        title: {
+          largeTitle: false,
+          title: 'My Screen'
+        },
+        drawBehind: true,
+        visible: false,
+        animate: false
+      }
+    };
+  }
+  
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <View style={{flex: 1}}>...</View>
+     );
+  }
+```
+
+## Enabling persistent styling properties on iOS
+In v2 we added `setDefaultOptions` API for styles that should be applied on all components.
+
+```js
+Navigation.setDefaultOptions({
+  topBar: {
+    visible: false
+  }
+});
+```
+
+## Setting styles dynamically
+Use the `setOptions` method to change a screen's style dynamically.
+
+```js
+Navigation.setOptions(this.props.componentId, {
+  topBar: {
+    visible: true
+  }
+});
+```
+
+## Options object format
+
+```js
+{
+  statusBarHidden: false,
+  screenBackgroundColor: 'white',
+  orientation: ['portrait', 'landscape'],
+  statusBarBlur: true,
+  statusBarHideWithTopBar: false,
+  statusBarStyle: 'light',
+  popGesture: true,
+  backgroundImage: require('background.png'),
+  rootBackgroundImage: require('rootBackground.png'),
+  topBar: {
+    visible: true,
+    leftButtons: [{
+      id: 'buttonOne',
+      icon: require('icon.png'),
+      component: 'example.CustomButtonComponent',
+      title: 'Button one',
+      enabled: true,
+      disableIconTint: false,
+      tintColor: 'red',
+      disabledColor: 'black',
+      testID: 'buttonOneTestID'
+    }],
+    rightButtons: [],
+    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,
+    componentName: 'example.CustomTopBar',
+    title: {
+      text: 'Title',
+      fontSize: 14,
+      color: 'red',
+      fontFamily: 'Halvetica',
+      component: 'example.CustomTopBarTitle',
+      componentAlignment: 'center',
+    },
+    subtitle: {
+      text: 'Title',
+      fontSize: 14,
+      color: 'red',
+      fontFamily: 'Halvetica',
+      alignment: 'center'
+    },
+    background: {
+      color: '#00ff00',
+      component: 'example.CustomTopBarBackground'
+    }
+  },
+  bottomTabs: {
+    visible: true,
+    animate: false,
+    currentTabIndex: 0,
+    testID: 'bottomTabsTestID',
+    drawBehind: false,
+    currentTabId: 'currentTabId',
+    translucent: true,
+    hideShadow: false,
+    backgroundColor: 'white',
+    tabColor: 'red',
+    selectedTabColor: 'blue',
+    fontFamily: 'Halvetica',
+    fontSize: 10
+  },
+  bottomTab: {
+    title: 'Tab 1',
+    badge: '2',
+    testID: 'bottomTabTestID',
+    visible: undefined,
+    icon: require('tab.png')
+  },
+  sideMenu: {
+    leftSideVisible: false,
+    rightSideVisible: false,
+    rightSideEnabled: true,
+    leftSideEnabled: true
+  },
+  overlay: {
+    interceptTouchOutside: true
+  }
+}
+```
+
+## Styling the StatusBar
+If you set any styles related to the Status Bar, make sure that in Xcode > project > Info.plist, the property `View controller-based status bar appearance` is set to `YES`.
+
+## Custom fonts
+If you'd like to use a custom font, you'll first have to edit your project.
+
+* Android - add the `.ttf` or `.otf` files to `src/main/assets/fonts/`
+
+* iOS - follow this [guide](https://medium.com/@dabit3/adding-custom-fonts-to-react-native-b266b41bff7f)
+
+All supported styles are defined [here](https://github.com/wix/react-native-controllers#styling-navigation). There's also an example project there showcasing all the different styles.