Add custom style for DrawerItem (react-navigation#2764)

naviocean · kelset · commit 3a63950ec880 · 2017-10-25T09:38:31.000+01:00
* Add custom style of DrawerItem

* Update itemStyle to DrawerNavigator doc

* rename style to itemsContainerStyle [BREAKING CHANGE]

* update

* update

* fix issue comma

* update DrawerNavigator-test
diff --git a/docs/api/navigators/DrawerNavigator.md b/docs/api/navigators/DrawerNavigator.md
@@ -145,15 +145,15 @@ const styles = StyleSheet.create({
 - `inactiveTintColor` - label and icon color of the inactive label
 - `inactiveBackgroundColor` - background color of the inactive label
 - `onItemPress(route)` - function to be invoked when an item is pressed
-- `style` - style object for the content section
+- `itemsContainerStyle` - style object for the content section
+- `itemStyle` - style object for the single item, which can contain an Icon and/or a Label
 - `labelStyle` - style object to overwrite `Text` style inside content section, when your label is a string
-
 #### Example:
 
 ```js
 contentOptions: {
   activeTintColor: '#e91e63',
-  style: {
+  itemsContainerStyle: {
     marginVertical: 0,
   }
 }
diff --git a/src/navigators/__tests__/__snapshots__/DrawerNavigator-test.js.snap b/src/navigators/__tests__/__snapshots__/DrawerNavigator-test.js.snap
@@ -136,6 +136,7 @@ exports[`DrawerNavigator renders successfully 1`] = `
                 Object {
                   "backgroundColor": "rgba(0, 0, 0, .04)",
                 },
+                undefined,
               ]
             }
           >
diff --git a/src/views/Drawer/DrawerNavigatorItems.js b/src/views/Drawer/DrawerNavigatorItems.js
@@ -26,7 +26,8 @@ type Props = {
   getLabel: (scene: DrawerScene) => ?(React.Element<*> | string),
   renderIcon: (scene: DrawerScene) => ?React.Element<*>,
   onItemPress: (info: DrawerItem) => void,
-  style?: ViewStyleProp,
+  itemsContainerStyle?: ViewStyleProp,
+  itemStyle?: ViewStyleProp,
   labelStyle?: TextStyleProp,
 };
 
@@ -44,10 +45,11 @@ const DrawerNavigatorItems = ({
   getLabel,
   renderIcon,
   onItemPress,
-  style,
+  itemsContainerStyle,
+  itemStyle,
   labelStyle,
 }: Props) => (
-  <View style={[styles.container, style]}>
+  <View style={[styles.container, itemsContainerStyle]}>
     {items.map((route: NavigationRoute, index: number) => {
       const focused = activeItemKey === route.key;
       const color = focused ? activeTintColor : inactiveTintColor;
@@ -65,7 +67,7 @@ const DrawerNavigatorItems = ({
           }}
           delayPressIn={0}
         >
-          <View style={[styles.item, { backgroundColor }]}>
+          <View style={[styles.item, { backgroundColor }, itemStyle]}>
             {icon ? (
               <View style={[styles.icon, focused ? null : styles.inactiveIcon]}>
                 {icon}

Original file line number	Diff line number	Diff line change
@@ -136,6 +136,7 @@ exports[`DrawerNavigator renders successfully 1`] = `
`136`	`136`	`Object {`
`137`	`137`	`"backgroundColor": "rgba(0, 0, 0, .04)",`
`138`	`138`	`},`
	`139`	`+ undefined,`
`139`	`140`	`]`
`140`	`141`	`}`
`141`	`142`	`>`