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.
},
},
},
}
Create a root with bottom tabs, and do not set the bottomTabs > children > component > options > bottomTab > text
property for any of the tabs.
@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".
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
For android use: https://wix.github.io/react-native-navigation/v2/#/docs/styling?id=android-specific-options