Add ability to set attributes of navigation bar buttons separately. (#937)

* Add ability to set attributes of navigation bar buttons separately.

* Added ability to set button style when calling `setButtons` method.

* Add documentation.

docs/adding-buttons-to-the-navigator.md

@@ -13,6 +13,9 @@ class FirstTabScreen extends Component {
         disabled: true, // optional, used to disable the button (appears faded and doesn't interact)
         disableIconTint: true, // optional, by default the image colors are overridden and tinted to navBarButtonColor, set to true to keep the original image colors
         showAsAction: 'ifRoom' // optional, Android only. Control how the button is displayed in the Toolbar. Accepted valued: 'ifRoom' (default) - Show this item as a button in an Action Bar if the system decides there is room for it. 'always' - Always show this item as a button in an Action Bar. 'withText' - When this item is in the action bar, always show it with a text label even if it also has an icon specified. 'never' - Never show this item as a button in an Action Bar.
+        buttonColor: 'blue', // Set color for the button (can also be used in setButtons function to set different button style programatically)
+        buttonFontSize: 14, // Set font size for the button (can also be used in setButtons function to set different button style programatically)
+        buttonFontWeight: '600', // Set font weight for the button (can also be used in setButtons function to set different button style programatically)
       },
       {
         icon: require('../../img/navicon_add.png'), // for icon button, provide the local image asset name
@@ -53,6 +56,9 @@ class FirstTabScreen extends Component {
     testID: 'e2e_is_awesome', // if you have e2e tests, use this to find your button
     disabled: true, // optional, used to disable the button (appears faded and doesn't interact)
     disableIconTint: true, // optional, by default the image colors are overridden and tinted to navBarButtonColor, set to true to keep the original image colors
+    buttonColor: 'blue', // Set color for the button (can also be used in setButtons function to set different button style programatically)
+    buttonFontSize: 14, // Set font size for the button (can also be used in setButtons function to set different button style programatically)
+    buttonFontWeight: '600', // Set font weight for the button (can also be used in setButtons function to set different button style programatically)
   }],
   leftButtons: [] // buttons for the left side of the nav bar (optional)
 }

docs/styling-the-navigator.md

@@ -29,7 +29,19 @@ export default class StyledScreen extends Component {
   navBarTextFontFamily: 'font-name', // Changes the title font
   navBarTitleTextCentered: true, // Android only. centers the title, default false.
   navBarBackgroundColor: '#f7f7f7', // change the background color of the nav bar (remembered across pushes)
-  navBarButtonColor: '#007aff', // change the button colors of the nav bar (eg. the back button) (remembered across pushes)
+
+  navBarButtonColor: '#007aff', // Change color of nav bar buttons (eg. the back button) (remembered across pushes)
+  navBarButtonFontSize: 20, // Change font size nav bar buttons (eg. the back button) (remembered across pushes)
+  navBarButtonFontWeight: '500', // Change font weight nav bar buttons (eg. the back button) (remembered across pushes)
+
+  navBarLeftButtonFontSize: 17, // Change font size of left nav bar button
+  navBarLeftButtonColor: 'red', // Change color of left nav bar button
+  navBarLeftButtonFontWeight: '400', // Change font weight of left nav bar button
+
+  navBarRightButtonFontSize: 17, // Change font size of right nav bar button
+  navBarRightButtonColor: 'blue', // Change color of right nav bar button
+  navBarRightButtonFontWeight: '600', // Change font weight of right nav bar button
+
   navBarHidden: false, // make the nav bar hidden
   navBarHideOnScroll: false, // make the nav bar hidden only after the user starts to scroll
   navBarTranslucent: false, // make the nav bar semi-translucent, works best with drawUnderNavBar:true

ios/RCCNavigationController.m

@@ -6,6 +6,7 @@
 #import <objc/runtime.h>
 #import "RCCTitleViewHelper.h"
 #import "UIViewController+Rotation.h"
+#import "RCTHelpers.h"
 
 @implementation RCCNavigationController
 {
@@ -279,6 +280,11 @@ NSString const *CALLBACK_ASSOCIATED_ID = @"RCCNavigationController.CALLBACK_ASSO
     else if (title)
     {
       barButtonItem = [[UIBarButtonItem alloc] initWithTitle:title style:UIBarButtonItemStylePlain target:self action:@selector(onButtonPress:)];
+
+      NSMutableDictionary *buttonTextAttributes = [RCTHelpers textAttributesFromDictionary:button withPrefix:@"button"];
+      if (buttonTextAttributes.allKeys.count > 0) {
+        [barButtonItem setTitleTextAttributes:buttonTextAttributes forState:UIControlStateNormal];
+      }
     }
     else continue;
     objc_setAssociatedObject(barButtonItem, &CALLBACK_ASSOCIATED_KEY, button[@"onPress"], OBJC_ASSOCIATION_RETAIN_NONATOMIC);

ios/RCCViewController.m

@@ -269,21 +269,34 @@ const NSInteger TRANSPARENT_NAVBAR_TAG = 78264803;
   }
   
   NSMutableDictionary *navButtonTextAttributes = [RCTHelpers textAttributesFromDictionary:self.navigatorStyle withPrefix:@"navBarButton"];
-  
-  if (navButtonTextAttributes.allKeys.count > 0) {
+  NSMutableDictionary *leftNavButtonTextAttributes = [RCTHelpers textAttributesFromDictionary:self.navigatorStyle withPrefix:@"navBarLeftButton"];
+  NSMutableDictionary *rightNavButtonTextAttributes = [RCTHelpers textAttributesFromDictionary:self.navigatorStyle withPrefix:@"navBarRightButton"];
+  
+  if (
+    navButtonTextAttributes.allKeys.count > 0 ||
+    leftNavButtonTextAttributes.allKeys.count > 0 ||
+    rightNavButtonTextAttributes.allKeys.count > 0
+  ) {
     
     for (UIBarButtonItem *item in viewController.navigationItem.leftBarButtonItems) {
       [item setTitleTextAttributes:navButtonTextAttributes forState:UIControlStateNormal];
+      
+      if (leftNavButtonTextAttributes.allKeys.count > 0) {
+        [item setTitleTextAttributes:leftNavButtonTextAttributes forState:UIControlStateNormal];
+      }
     }
     
     for (UIBarButtonItem *item in viewController.navigationItem.rightBarButtonItems) {
       [item setTitleTextAttributes:navButtonTextAttributes forState:UIControlStateNormal];
+      
+      if (rightNavButtonTextAttributes.allKeys.count > 0) {
+        [item setTitleTextAttributes:rightNavButtonTextAttributes forState:UIControlStateNormal];
+      }
     }
     
     // At the moment, this seems to be the only thing that gets the back button correctly
     [navButtonTextAttributes removeObjectForKey:NSForegroundColorAttributeName];
     [[UIBarButtonItem appearance] setTitleTextAttributes:navButtonTextAttributes forState:UIControlStateNormal];
-    //        [viewController.navigationItem.backBarButtonItem setTitleTextAttributes:navButtonTextAttributes forState:UIControlStateNormal];
   }
   
   NSString *navBarButtonColor = self.navigatorStyle[@"navBarButtonColor"];