diff --git a/packages/react-navigation/docs/api/navigators/TabNavigator.md b/packages/react-navigation/docs/api/navigators/TabNavigator.md index d48c960e..ddf8e9bc 100644 --- a/packages/react-navigation/docs/api/navigators/TabNavigator.md +++ b/packages/react-navigation/docs/api/navigators/TabNavigator.md @@ -104,6 +104,7 @@ Several options get passed to the underlying router to modify navigation logic: - `showLabel` - whether to show label for tab, default is true - `style` - style object for the tab bar - `labelStyle` - style object for the tab label +- `tabStyle` - style object for the tab Example: @@ -142,6 +143,9 @@ tabBarOptions: { labelStyle: { fontSize: 12, }, + tabStyle: { + width: 100, + }, style: { backgroundColor: 'blue', }, diff --git a/packages/react-navigation/src/views/TabView/TabBarBottom.js b/packages/react-navigation/src/views/TabView/TabBarBottom.js index a5efa4dd..89c59c7c 100644 --- a/packages/react-navigation/src/views/TabView/TabBarBottom.js +++ b/packages/react-navigation/src/views/TabView/TabBarBottom.js @@ -35,6 +35,7 @@ type Props = { showLabel: boolean, style?: Style, labelStyle?: Style, + tabStyle?: Style, showIcon: boolean, }; @@ -127,6 +128,7 @@ export default class TabBarBottom activeBackgroundColor, inactiveBackgroundColor, style, + tabStyle, } = this.props; const { routes } = navigation.state; // Prepend '-1', so there are always at least 2 items in inputRange @@ -153,7 +155,11 @@ export default class TabBarBottom onPress={() => jumpToIndex(index)} > {this._renderIcon(scene)} {this._renderLabel(scene)}