From 03f293de3fdd32187c8bb71625b3e886c8480273 Mon Sep 17 00:00:00 2001
From: corupta <corup_tafl@hotmail.com>
Date: Tue, 6 Mar 2018 04:17:08 +0300
Subject: [PATCH] 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
---
 packages/react-navigation/flow/react-navigation.js         | 2 ++
 .../__tests__/__snapshots__/DrawerNavigator-test.js.snap   | 1 +
 .../src/views/Drawer/DrawerNavigatorItems.js               | 7 ++++++-
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/react-navigation/flow/react-navigation.js b/packages/react-navigation/flow/react-navigation.js
index 2b7ebbfa..e47bfea8 100644
--- a/packages/react-navigation/flow/react-navigation.js
+++ b/packages/react-navigation/flow/react-navigation.js
@@ -945,6 +945,8 @@ declare module 'react-navigation' {
     itemsContainerStyle?: ViewStyleProp,
     itemStyle?: ViewStyleProp,
     labelStyle?: TextStyleProp,
+    activeLabelStyle?: TextStyleProp,
+    inactiveLabelStyle?: TextStyleProp,
     iconContainerStyle?: ViewStyleProp,
     drawerPosition: 'left' | 'right',
   };
diff --git a/packages/react-navigation/src/navigators/__tests__/__snapshots__/DrawerNavigator-test.js.snap b/packages/react-navigation/src/navigators/__tests__/__snapshots__/DrawerNavigator-test.js.snap
index 0304d490..efed0e60 100644
--- a/packages/react-navigation/src/navigators/__tests__/__snapshots__/DrawerNavigator-test.js.snap
+++ b/packages/react-navigation/src/navigators/__tests__/__snapshots__/DrawerNavigator-test.js.snap
@@ -224,6 +224,7 @@ exports[`DrawerNavigator renders successfully 1`] = `
                             "color": "#2196f3",
                           },
                           undefined,
+                          undefined,
                         ]
                       }
                     >
diff --git a/packages/react-navigation/src/views/Drawer/DrawerNavigatorItems.js b/packages/react-navigation/src/views/Drawer/DrawerNavigatorItems.js
index 74e652f8..0667c9cd 100644
--- a/packages/react-navigation/src/views/Drawer/DrawerNavigatorItems.js
+++ b/packages/react-navigation/src/views/Drawer/DrawerNavigatorItems.js
@@ -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>
               ) : (