React-native-navigation: [V2] Hide bottom tabs labels

Created on 30 Jul 2018  路  2Comments  路  Source: wix/react-native-navigation

Issue Description

On iOS, I want to show only icons in the bottom tabs. If I don't set the bottomTabs > children > component > options > bottomTab > text property, no labels are displayed, but the vertical space that they take up is still there.

This issues is essentially of #676, but for v2. I looked into the solution there of iconInsets, but this did not appear to work:

root: {
  bottomTabs: {
    children: [...],
    options: {
      iconInsets: { // add this to change icon position (optional, iOS only).
        top: 6,     // optional, default is 0.
        left: 0,    // optional, default is 0.
        bottom: -6, // optional, default is 0.
        right: 0    // optional, default is 0.
      },
    },
  },
}

Steps to Reproduce / Code Snippets / Screenshots

Create a root with bottom tabs, and do not set the bottomTabs > children > component > options > bottomTab > text property for any of the tabs.


Environment

  • React Native Navigation version: 2.0.2428
  • React Native version: 0.55.0
  • Platform(s) (iOS, Android, or both?): iOS
  • Device info (Simulator/Device? OS version? Debug/Release?): Simulator

Most helpful comment

@zposten, hello.

Try to use it like in documentation: https://wix.github.io/react-native-navigation/v2/#/docs/styling?id=ios-specific-options

options: {
  ...
  bottomTab: {
    ...
    iconInsets: { top: 0, left: 0, bottom: 0, right: 0 }, // Change to your numbers
  }
}

For android use: https://wix.github.io/react-native-navigation/v2/#/docs/styling?id=android-specific-options

options: {
  ...
  bottomTab: {
    ...
    titleDisplayMode: 'alwaysShow' | 'showWhenActive' | 'alwaysHide' // Sets the title state for each tab
  }
}

All 2 comments

@zposten, hello.

Try to use it like in documentation: https://wix.github.io/react-native-navigation/v2/#/docs/styling?id=ios-specific-options

options: {
  ...
  bottomTab: {
    ...
    iconInsets: { top: 0, left: 0, bottom: 0, right: 0 }, // Change to your numbers
  }
}

For android use: https://wix.github.io/react-native-navigation/v2/#/docs/styling?id=android-specific-options

options: {
  ...
  bottomTab: {
    ...
    titleDisplayMode: 'alwaysShow' | 'showWhenActive' | 'alwaysHide' // Sets the title state for each tab
  }
}

@iksent Thank you for pointing me to the correct portion of the documentation, I see now that it's been moved to the "bottomTab" portion of the options instead of the "bottomTabs".

Was this page helpful?
0 / 5 - 0 ratings