Add badgeColor option to bottomTab (#3604)

docs/docs/styling.md

@@ -125,6 +125,7 @@ Navigation.mergeOptions(this.props.componentId, {
   bottomTab: {
     text: 'Tab 1',
     badge: '2',
+    badgeColor: 'red',
     testID: 'bottomTabTestID',
     icon: require('tab.png'),
     iconColor: 'red',

lib/android/app/src/main/java/com/reactnativenavigation/parse/BottomTabOptions.java

@@ -29,6 +29,7 @@ public class BottomTabOptions {
         options.iconColor = ColorParser.parse(json, "iconColor");
         options.selectedIconColor = ColorParser.parse(json, "selectedIconColor");
         options.badge = TextParser.parse(json, "badge");
+        options.badgeColor = ColorParser.parse(json, "badgeColor");
         options.testId = TextParser.parse(json, "testID");
         options.fontFamily = typefaceManager.getTypeFace(json.optString("fontFamily", ""));
         options.fontSize = NumberParser.parse(json, "fontSize");
@@ -44,6 +45,7 @@ public class BottomTabOptions {
     public Color selectedIconColor = new NullColor();
     public Text testId = new NullText();
     public Text badge = new NullText();
+    public Color badgeColor = new NullColor();
     public Number fontSize = new NullNumber();
     public Number selectedFontSize = new NullNumber();
     @Nullable public Typeface fontFamily;
@@ -57,6 +59,7 @@ public class BottomTabOptions {
         if (other.iconColor.hasValue()) iconColor = other.iconColor;
         if (other.selectedIconColor.hasValue()) selectedIconColor = other.selectedIconColor;
         if (other.badge.hasValue()) badge = other.badge;
+        if (other.badgeColor.hasValue()) badgeColor = other.badgeColor;
         if (other.testId.hasValue()) testId = other.testId;
         if (other.fontSize.hasValue()) fontSize = other.fontSize;
         if (other.selectedFontSize.hasValue()) selectedFontSize = other.selectedFontSize;
@@ -71,6 +74,7 @@ public class BottomTabOptions {
         if (!iconColor.hasValue()) iconColor = defaultOptions.iconColor;
         if (!selectedIconColor.hasValue()) selectedIconColor = defaultOptions.selectedIconColor;
         if (!badge.hasValue()) badge = defaultOptions.badge;
+        if (!badgeColor.hasValue()) badgeColor = defaultOptions.badgeColor;
         if (!fontSize.hasValue()) fontSize = defaultOptions.fontSize;
         if (!selectedFontSize.hasValue()) selectedFontSize = defaultOptions.selectedFontSize;
         if (fontFamily == null) fontFamily = defaultOptions.fontFamily;

lib/android/app/src/main/java/com/reactnativenavigation/presentation/BottomTabOptionsPresenter.java

@@ -41,6 +41,7 @@ public class BottomTabOptionsPresenter {
         for (int i = 0; i < tabs.size(); i++) {
             BottomTabOptions tab = tabs.get(i).options.copy().withDefaultOptions(defaultOptions).bottomTabOptions;
             bottomTabs.setBadge(i, tab.badge.get(""));
+            bottomTabs.setBadgeColor(tab.badgeColor.get(null));
             bottomTabs.setTitleTypeface(i, tab.fontFamily);
             bottomTabs.setIconActiveColor(i, tab.selectedIconColor.get(null));
             bottomTabs.setIconInactiveColor(i, tab.iconColor.get(null));
@@ -55,6 +56,7 @@ public class BottomTabOptionsPresenter {
         BottomTabOptions withDefaultOptions = options.withDefaultOptions(defaultOptions).bottomTabOptions;
         int index = bottomTabFinder.findByComponent(child);
         if (withDefaultOptions.badge.hasValue()) bottomTabs.setBadge(index, withDefaultOptions.badge.get());
+        if (withDefaultOptions.badgeColor.hasValue()) bottomTabs.setBadgeColor(withDefaultOptions.badgeColor.get());
         if (withDefaultOptions.fontFamily != null) bottomTabs.setTitleTypeface(index, withDefaultOptions.fontFamily);
         if (withDefaultOptions.selectedIconColor.hasValue()) bottomTabs.setIconActiveColor(index, withDefaultOptions.selectedIconColor.get());
         if (withDefaultOptions.iconColor.hasValue()) bottomTabs.setIconInactiveColor(index, withDefaultOptions.iconColor.get());

lib/android/app/src/main/java/com/reactnativenavigation/views/BottomTabs.java

@@ -2,6 +2,7 @@ package com.reactnativenavigation.views;
 
 import android.annotation.SuppressLint;
 import android.content.Context;
+import android.support.annotation.ColorInt;
 import android.support.annotation.IntRange;
 import android.view.View;
 
@@ -29,6 +30,11 @@ public class BottomTabs extends AHBottomNavigation {
         setNotification(badge, bottomTabIndex);
     }
 
+    public void setBadgeColor(@ColorInt Integer color) {
+        if (color == null) return;
+        setNotificationBackgroundColor(color);
+    }
+
     @Override
     public void setCurrentItem(@IntRange(from = 0) int position) {
         super.setCurrentItem(position);

lib/ios/RNNBottomTabOptions.h

@@ -5,6 +5,7 @@
 @property (nonatomic) NSUInteger tag;
 @property (nonatomic, strong) NSString* text;
 @property (nonatomic, strong) NSString* badge;
+@property (nonatomic, strong) NSDictionary* badgeColor;
 @property (nonatomic, strong) NSString* testID;
 @property (nonatomic, strong) NSNumber* visible;
 @property (nonatomic, strong) NSDictionary* icon;

lib/ios/RNNBottomTabOptions.m

@@ -46,10 +46,13 @@
 		if (self.badge != nil && ![self.badge isEqual:[NSNull null]]) {
 			badge = [RCTConvert NSString:self.badge];
 		}
+		UITabBarItem *tabBarItem = viewController.tabBarItem;
 		if (viewController.navigationController) {
-			viewController.navigationController.tabBarItem.badgeValue = badge;
-		} else {
-			viewController.tabBarItem.badgeValue = badge;
+			tabBarItem = viewController.navigationController.tabBarItem;
+		}
+		tabBarItem.badgeValue = badge;
+		if (self.badgeColor) {
+			tabBarItem.badgeColor = [RCTConvert UIColor:self.badgeColor];
 		}
 	}