feat(bottom-tabs,iOS): add support for badgeColor (#9)

## Description

Add support for badge colour customisation on particular tab screens.

Currently this is implemented using `appearance` objects, therefore
selected tab bar item imposes its style for all other tab bar items.

Note that effect of individual badge color for each tab bar item can be
achieved with `tabBarItem.badgeColor`, however this seems to disable
`appearance` mechanism, therefore I didn't go that way.


## Changes

TabBar appearance updates are now coordinated by
`RNSTabBarAppearanceCoordinator` & done when requested on
`RNSTabBarController`.

This PR also changes semantic of `RNSTabBarController._pendingChildren`
field:

1. it got renamed to `tabScreenControllers`,
2. it is no longer nulled - now it just keeps last children received
from host component.

This was needed, because configuring the appearance required access to
all child controllers, which `RNSTabBarController.viewControllers` does
tot provide (in case there are more than 5/6 controllers, surplus ones
are put into `MoreViewController` & not returned by
`RNSTabBarController.viewControllers` call.

## Test code and steps to reproduce

`TestBottomTabs`

## Checklist

- [x] Included code example that can be used to test this change
- [ ] Ensured that CI passes

Author: kkafar

apps/src/tests/TestBottomTabs.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Button, Text, View, ViewProps } from 'react-native';
 
 import { BottomTabs, BottomTabsScreen, enableFreeze } from 'react-native-screens';
+import Colors from '../shared/styling/Colors';
 
 enableFreeze(true);
 
@@ -31,23 +32,23 @@ function App() {
 
   return (
     <View style={{ flex: 1 }}>
-      <BottomTabs tabBarBackgroundColor={'rgba(255, 255, 0, 0.5)'} tabBarBlurEffect={'dark'}>
-        <BottomTabsScreen isFocused={focusedTab % 3 === 0} badgeValue="Tab 1">
-          <LayoutView style={{ backgroundColor: 'lightgreen' }} tabID={0}>
+      <BottomTabs tabBarBackgroundColor={Colors.NavyLight100}>
+        <BottomTabsScreen isFocused={focusedTab % 3 === 0} badgeValue="Tab 1" badgeColor={Colors.NavyDark80}>
+          <LayoutView style={{ backgroundColor: Colors.OffWhite }} tabID={0}>
             <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
               <Text>Hello world from native bottom tab</Text>
               <Button title="Next tab" onPress={selectNextTab} />
             </View>
           </LayoutView>
         </BottomTabsScreen>
-        <BottomTabsScreen isFocused={focusedTab % 3 === 1} badgeValue="Tab 2">
-          <LayoutView style={{ backgroundColor: 'lightblue' }} tabID={1}>
+        <BottomTabsScreen isFocused={focusedTab % 3 === 1} badgeValue="Tab 2" badgeColor={Colors.PurpleLight100}>
+          <LayoutView style={{ backgroundColor: Colors.PurpleLight80 }} tabID={1}>
             <Text>Tab2 world from native bottom tab</Text>
             <Button title="Next tab" onPress={selectNextTab} />
           </LayoutView>
         </BottomTabsScreen>
-        <BottomTabsScreen isFocused={focusedTab % 3 === 2} badgeValue="Tab 3">
-          <LayoutView style={{ backgroundColor: 'yellow' }} tabID={2}>
+        <BottomTabsScreen isFocused={focusedTab % 3 === 2} badgeValue="Tab 3" badgeColor={Colors.YellowDark120}>
+          <LayoutView style={{ backgroundColor: Colors.YellowDark80 }} tabID={2}>
             <Text>Tab3 world from native bottom tab</Text>
             <Button title="Next tab" onPress={selectNextTab} />
           </LayoutView>

ios/bottom-tabs/RNSBottomTabsHostComponentView.h

@@ -22,7 +22,7 @@ NS_ASSUME_NONNULL_BEGIN
 @interface RNSBottomTabsHostComponentView ()
 
 @property (nonatomic, strong, readonly, nullable) UIColor *tabBarBackgroundColor;
-@property (nonatomic, readonly) RNSBlurEffectStyle tabBarBlurEffect;
+@property (nonatomic, strong, readonly, nullable) UIBlurEffect *tabBarBlurEffect;
 
 @end
 

ios/bottom-tabs/RNSBottomTabsHostComponentView.mm

@@ -40,28 +40,15 @@ - (void)initState
 {
   static const auto defaultProps = std::make_shared<const react::RNSBottomTabsProps>();
   _props = defaultProps;
+  _tabBarBlurEffect = nil;
+
   _controller = [[RNSTabBarController alloc] init];
   _reactSubviews = [NSMutableArray new];
+
   _hasModifiedReactSubviewsInCurrentTransaction = NO;
   _needsTabBarAppearanceUpdate = NO;
 }
 
-- (nullable UITabBarAppearance *)makeTabBarAppearance
-{
-  UITabBarAppearance *newAppearance = [[UITabBarAppearance alloc] init];
-
-  newAppearance.backgroundColor = _tabBarBackgroundColor;
-
-  if (_tabBarBlurEffect != RNSBlurEffectStyleNone) {
-    newAppearance.backgroundEffect =
-        [UIBlurEffect effectWithStyle:[RNSConvert tryConvertRNSBlurEffectStyleToUIBlurEffectStyle:_tabBarBlurEffect]];
-  } else {
-    newAppearance.backgroundEffect = nil;
-  }
-
-  return newAppearance;
-}
-
 #pragma mark - UIView methods
 
 - (void)didMoveToWindow
@@ -101,12 +88,6 @@ - (void)updateContainer
   NSLog(@"updateContainer: tabControllers: %@", tabControllers);
 
   [_controller childViewControllersHaveChangedTo:tabControllers];
-
-  [[_controller tabBar] setItemPositioning:UITabBarItemPositioningCentered];
-  NSLog(@"updateContainer: tabBarItems %@", [[_controller tabBar] items]);
-  for (UITabBarItem *tabBarItem in [[_controller tabBar] items]) {
-    tabBarItem.badgeValue = @"Hello!";
-  }
 }
 
 - (void)markChildUpdated
@@ -158,7 +139,7 @@ - (void)updateProps:(const facebook::react::Props::Shared &)props
   if (newComponentProps.tabBarBlurEffect != oldComponentProps.tabBarBlurEffect) {
     _needsTabBarAppearanceUpdate = YES;
     _tabBarBlurEffect =
-        rnscreens::conversion::RNSBlurEffectStyleFromRNSBottomTabsTabBarBlurEffect(newComponentProps.tabBarBlurEffect);
+        rnscreens::conversion::RNSUIBlurEffectFromRNSBottomTabsTabBarBlurEffect(newComponentProps.tabBarBlurEffect);
   }
 
   // Super call updates _props pointer. We should NOT update it before calling super.
@@ -169,7 +150,7 @@ - (void)finalizeUpdates:(RNComponentViewUpdateMask)updateMask
 {
   if (_needsTabBarAppearanceUpdate) {
     _needsTabBarAppearanceUpdate = NO;
-    [_controller applyTabBarAppearance:[self makeTabBarAppearance]];
+    [_controller setNeedsUpdateOfTabBarAppearance:true];
   }
   [super finalizeUpdates:updateMask];
 }

ios/bottom-tabs/RNSBottomTabsScreenComponentView.h

@@ -33,6 +33,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 @property (nonatomic, readonly) BOOL isFocused;
 @property (nonatomic, readonly, nullable) NSString *badgeValue;
+@property (nonatomic, readonly, nullable) UIColor *badgeColor;
 
 @end
 

ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm

@@ -111,6 +111,14 @@ - (void)updateProps:(const facebook::react::Props::Shared &)props
     _controller.tabBarItem.badgeValue = _badgeValue;
   }
 
+  if (newComponentProps.badgeColor != oldComponentProps.badgeColor) {
+    _badgeColor = RCTUIColorFromSharedColor(newComponentProps.badgeColor);
+    // Note that this will prevent default color from being set.
+    // TODO: support default color by setting nil here.
+    NSLog(@"TabsScreen [%ld] update badgeColor to %@", self.tag, _badgeColor);
+    [_controller tabItemAppearanceHasChanged];
+  }
+
   [super updateProps:props oldProps:oldProps];
 }
 

ios/bottom-tabs/RNSTabBarAppearanceCoordinator.h

@@ -0,0 +1,31 @@
+#import <Foundation/Foundation.h>
+#import "RNSBottomTabsHostComponentView.h"
+#import "RNSTabsScreenViewController.h"
+
+NS_ASSUME_NONNULL_BEGIN
+
+/**
+ * Responsible for creating & applying appearance to the tab bar.
+ *
+ * It does take into account all properties from host component view & tab screen controllers related to tab bar
+ * appearance and applies them accordingly in correct order.
+ */
+@interface RNSTabBarAppearanceCoordinator : NSObject
+
+/**
+ * Constructs the tab bar appearance from the ground up, basing on information contained in provided params (mostly
+ * react props), and then applies it to the tab bar and respective tab bar items.
+ *
+ * Current implementation configures all tab bar styles & state (stacked, inline, normal, focused, selected, disabled,
+ * etc.) with the same appearance.
+ *
+ * TODO: Do not take references to component view & controllers here. Put the tab bar appearance properites in single
+ * type & only take it here.
+ */
+- (void)updateAppearanceOfTabBar:(nullable UITabBar *)tabBar
+           withHostComponentView:(nullable RNSBottomTabsHostComponentView *)hostComponentView
+            tabScreenControllers:(nullable NSArray<RNSTabsScreenViewController *> *)tabScreenCtrls;
+
+@end
+
+NS_ASSUME_NONNULL_END

ios/bottom-tabs/RNSTabBarAppearanceCoordinator.mm

@@ -0,0 +1,64 @@
+#import "RNSTabBarAppearanceCoordinator.h"
+#import "RNSConversions.h"
+#import "RNSTabsScreenViewController.h"
+
+@implementation RNSTabBarAppearanceCoordinator
+
+- (void)updateAppearanceOfTabBar:(nullable UITabBar *)tabBar
+           withHostComponentView:(nullable RNSBottomTabsHostComponentView *)hostComponentView
+            tabScreenControllers:(nullable NSArray<RNSTabsScreenViewController *> *)tabScreenCtrls
+{
+  if (tabBar == nil) {
+    return;
+  }
+
+  // Step 1 - start with default appearance
+  UITabBarAppearance *appearance = [[UITabBarAppearance alloc] init];
+
+  // Step 2 - general settings
+  if (hostComponentView != nil) {
+    appearance.backgroundColor = hostComponentView.tabBarBackgroundColor;
+    appearance.backgroundEffect = hostComponentView.tabBarBlurEffect;
+  }
+
+  // Step 3 - apply general settings to the tab bar
+  tabBar.standardAppearance = appearance;
+  tabBar.scrollEdgeAppearance = appearance;
+
+  // Step 4 - build the appearance object for each tab & apply it
+  if (tabScreenCtrls == nil) {
+    return;
+  }
+
+  for (RNSTabsScreenViewController *tabScreenCtrl in tabScreenCtrls) {
+    if (tabScreenCtrl == nil) {
+      // It should not be null here, something went wrong.
+      RCTLogWarn(@"[RNScreens] Nullish controller of TabScreen while tab bar appearance update!");
+      continue;
+    }
+
+    UITabBarAppearance *tabAppearance = [[UITabBarAppearance alloc] initWithBarAppearance:appearance];
+
+    [self configureTabBarItemAppearance:tabAppearance.compactInlineLayoutAppearance
+                 forTabScreenController:tabScreenCtrl];
+    [self configureTabBarItemAppearance:tabAppearance.inlineLayoutAppearance forTabScreenController:tabScreenCtrl];
+    [self configureTabBarItemAppearance:tabAppearance.stackedLayoutAppearance forTabScreenController:tabScreenCtrl];
+
+    tabScreenCtrl.tabBarItem.standardAppearance = tabAppearance;
+    tabScreenCtrl.tabBarItem.scrollEdgeAppearance = tabAppearance;
+  }
+}
+
+- (void)configureTabBarItemAppearance:(nonnull UITabBarItemAppearance *)tabBarItemAppearance
+               forTabScreenController:(nonnull RNSTabsScreenViewController *)tabScreenCtrl
+{
+  tabBarItemAppearance.normal.badgeBackgroundColor = tabScreenCtrl.tabScreenComponentView.badgeColor;
+
+  tabBarItemAppearance.selected.badgeBackgroundColor = tabScreenCtrl.tabScreenComponentView.badgeColor;
+
+  tabBarItemAppearance.focused.badgeBackgroundColor = tabScreenCtrl.tabScreenComponentView.badgeColor;
+
+  tabBarItemAppearance.disabled.badgeBackgroundColor = tabScreenCtrl.tabScreenComponentView.badgeColor;
+}
+
+@end

ios/bottom-tabs/RNSTabBarController.h

@@ -1,4 +1,5 @@
 #import <UIKit/UIKit.h>
+#import "RNSTabBarAppearanceCoordinator.h"
 #import "RNSTabsScreenViewController.h"
 
 NS_ASSUME_NONNULL_BEGIN
@@ -23,12 +24,61 @@ NS_ASSUME_NONNULL_BEGIN
 @interface RNSTabBarController : UITabBarController <RNSReactTransactionObserving>
 
 /**
- * Apply appearance to the tab bar managed by this controller.
+ * Tab bar appearance coordinator. If you need to update tab bar appearance avoid using this one directly. Send the
+ * controller a signal, invalidate the tab bar appearance & either wait for the update flush or flush it manually.
+ */
+@property (nonatomic, readonly, strong, nonnull) RNSTabBarAppearanceCoordinator *tabBarAppearanceCoordinator;
+
+/**
+ * Update tab controller state with previously provided children.
+ *
+ * This method does nothing if the children have not been changed / update has not been requested before.
+ * The requested update is performed immediately. If you do not need this, consider just raising an appropriate
+ * invalidation signal & let the controller decide when to flush the updates.
+ */
+- (void)updateReactChildrenControllersIfNeeded;
+
+/**
+ * Force update of the tab controller state with previously provided children.
+ *
+ * The requested update is performed immediately. If you do not need this, consider just raising an appropriate
+ * invalidation signal & let the controller decide when to flush the updates.
+ */
+- (void)updateReactChildrenControllers;
+
+/**
+ * Find out which tab bar controller is currently focused & select it.
+ *
+ * This method does nothing if the update has not been previoulsy requested.
+ * If needed, the requested update is performed immediately. If you do not need this, consider just raising an
+ * appropriate invalidation signal & let the controller decide when to flush the updates.
+ */
+- (void)updateSelectedViewControllerIfNeeded;
+
+/**
+ * Find out which tab bar controller is currently focused & select it.
  *
- * @param appearance passed appearance instance will be set for all appearance modes (standard, scrollview, etc.)
- * supported by the tab bar. When set to `nil` the default system appearance will be used.
+ * The requested update is performed immediately. If you do not need this, consider just raising an appropriate
+ * invalidation signal & let the controller decide when to flush the updates.
  */
-- (void)applyTabBarAppearance:(nullable UITabBarAppearance *)appearance;
+- (void)updateSelectedViewController;
+
+/**
+ * Updates the tab bar appearance basing on configuration sources (host view, tab screens).
+ *
+ * This method does nothing if the update has not been previoulsy requested.
+ * If needed, the requested update is performed immediately. If you do not need this, consider just raising an
+ * appropriate invalidation signal & let the controller decide when to flush the updates.
+ */
+- (void)updateTabBarAppearanceIfNeeded;
+
+/**
+ * Updates the tab bar appearance basing on configuration sources (host view, tab screens).
+ *
+ * The requested update is performed immediately. If you do not need this, consider just raising an appropriate
+ * invalidation signal & let the controller decide when to flush the updates.
+ */
+- (void)updateTabBarAppearance;
 
 @end
 
@@ -62,6 +112,12 @@ NS_ASSUME_NONNULL_BEGIN
  */
 @property (nonatomic, readwrite) bool needsUpdateOfSelectedTab;
 
+/**
+ * Tell the controller that some configuration regarding the tab bar apperance has changed & the appearance requires
+ * update.
+ */
+@property (nonatomic, readwrite) bool needsUpdateOfTabBarAppearance;
+
 @end
 
 NS_ASSUME_NONNULL_END