Added iconContainerStyle prop to Drawer (react-navigation#2825)

brunocascio · spencercarli · commit 468a8ca9be14 · 2017-10-28T10:07:17.000-05:00
* Added iconContainerStyle prop to Drawer

* Updated DrawerNavigator docs

* Improved code quality

* Improved code with eslint
diff --git a/docs/api/navigators/DrawerNavigator.md b/docs/api/navigators/DrawerNavigator.md
@@ -148,13 +148,18 @@ const styles = StyleSheet.create({
 - `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
+- `iconContainerStyle` - style object to overwrite `View` icon container styles.
+
 #### Example:
 
 ```js
 contentOptions: {
   activeTintColor: '#e91e63',
   itemsContainerStyle: {
     marginVertical: 0,
+  },
+  iconContainerStyle: {
+    opacity: 1
   }
 }
 ```
diff --git a/src/views/Drawer/DrawerNavigatorItems.js b/src/views/Drawer/DrawerNavigatorItems.js
@@ -29,6 +29,7 @@ type Props = {
   itemsContainerStyle?: ViewStyleProp,
   itemStyle?: ViewStyleProp,
   labelStyle?: TextStyleProp,
+  iconContainerStyle?: ViewStyleProp,
 };
 
 /**
@@ -48,6 +49,7 @@ const DrawerNavigatorItems = ({
   itemsContainerStyle,
   itemStyle,
   labelStyle,
+  iconContainerStyle,
 }: Props) => (
   <View style={[styles.container, itemsContainerStyle]}>
     {items.map((route: NavigationRoute, index: number) => {
@@ -69,7 +71,13 @@ const DrawerNavigatorItems = ({
         >
           <View style={[styles.item, { backgroundColor }, itemStyle]}>
             {icon ? (
-              <View style={[styles.icon, focused ? null : styles.inactiveIcon]}>
+              <View
+                style={[
+                  styles.icon,
+                  focused ? null : styles.inactiveIcon,
+                  iconContainerStyle,
+                ]}
+              >
                 {icon}
               </View>
             ) : null}
