Permalink
Browse files

Add activeLabelStyle and inactiveLabelStyle for DrawerItem (#3559)

* Add activeLabelStyle and inactiveLabelStyle

Adding activeLabelStyle, so that active items can be customized more.
My use case: Change font of the active item to bold.
Also, added inactiveLabelStyle which can be used for a similar purpose.

* prettier fix

* Update react-navigation.js

* prettier fix

* Update jest snapshot for DrawerNavigator - for adding a new style property to the styles array
  • Loading branch information...
corupta authored and brentvatne committed Mar 6, 2018
1 parent 9005494 commit 7c488c8d4974028f85a4c5171d27209fa099170f
@@ -945,6 +945,8 @@ declare module 'react-navigation' {
itemsContainerStyle?: ViewStyleProp,
itemStyle?: ViewStyleProp,
labelStyle?: TextStyleProp,
activeLabelStyle?: TextStyleProp,
inactiveLabelStyle?: TextStyleProp,
iconContainerStyle?: ViewStyleProp,
drawerPosition: 'left' | 'right',
};
@@ -224,6 +224,7 @@ exports[`DrawerNavigator renders successfully 1`] = `
"color": "#2196f3",
},
undefined,
undefined,
]
}
>
@@ -21,6 +21,8 @@ const DrawerNavigatorItems = ({
itemsContainerStyle,
itemStyle,
labelStyle,
activeLabelStyle,
inactiveLabelStyle,
iconContainerStyle,
drawerPosition,
}) => (
@@ -34,6 +36,7 @@ const DrawerNavigatorItems = ({
const scene = { route, index, focused, tintColor: color };
const icon = renderIcon(scene);
const label = getLabel(scene);
const extraLabelStyle = focused ? activeLabelStyle : inactiveLabelStyle;
return (
<TouchableItem
key={route.key}
@@ -63,7 +66,9 @@ const DrawerNavigatorItems = ({
</View>
) : null}
{typeof label === 'string' ? (
<Text style={[styles.label, { color }, labelStyle]}>
<Text
style={[styles.label, { color }, labelStyle, extraLabelStyle]}
>
{label}
</Text>
) : (

0 comments on commit 7c488c8

Please sign in to comment.