react-native-navigation/docs/docs/styling.md

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.

export default class StyledScreen extends Component {
  static get options() {
    return {
      topBar: {
        title: {
          largeTitle: false,
          text: 'My Screen'
        },
        drawBehind: true,
        visible: false,
        animate: false
      }
    };
  }
  
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <View style={{flex: 1}}>...</View>
     );
  }

Enabling persistent styling properties

In v2 we added setDefaultOptions API for styles that should be applied on all components.

Navigation.setDefaultOptions({
  topBar: {
    visible: false
  }
});

Setting styles dynamically

Use the mergeOptions method to change a screen’s style dynamically.

Navigation.mergeOptions(this.props.componentId, {
  topBar: {
    visible: true
  }
});

Options object format

{
  statusBar: {
    backgroundColor: 'red', // Android only
    visible: false,
    style: 'light',
    hideWithTopBar: false, // iOS only
    blur: true // iOS only
  },
  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, optional; Height of the TopBar in dp.
    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: [],
    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'
    },
    title: {
      text: 'Title',
      fontSize: 14,
      color: 'red',
      fontFamily: 'Helvetica',
      height: 70, // Android only, optional; Height of the TitleBar in dp.
      component: {
        name: 'example.CustomTopBarTitle',
        alignment: 'center'
      }
    },
    subtitle: {
      text: 'Title',
      fontSize: 14,
      color: 'red',
      fontFamily: 'Helvetica',
      alignment: 'center'
    },
    background: {
      color: '#00ff00',
      component: {
        name: '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: 'Helvetica',
    fontSize: 10
  },
  bottomTab: {
    title: 'Tab 1',
    badge: '2',
    testID: 'bottomTabTestID',
    visible: undefined,
    icon: require('tab.png'),
    iconInsets: { top: 0, left: 0, bottom: 0, right: 0 }
  },
  sideMenu: {
    left: {
      visible: false,
      enabled: true
    },
    right: {
      visible: false,
      enabled: 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

All supported styles are defined here. There’s also an example project there showcasing all the different styles.