feat: add support for top border color on iOS

Author: Nodonisko

apps/example/src/Examples/TintColors.tsx

@@ -54,6 +54,7 @@ export default function TintColorsExample() {
       tabBarActiveTintColor="red"
       tabBarInactiveTintColor="orange"
       scrollEdgeAppearance="default"
+      borderColor="red"
     />
   );
 }

docs/docs/docs/guides/standalone-usage.md

@@ -172,6 +172,11 @@ Whether the tab bar is translucent.
 Color of tab indicator.
 - Type: `ColorValue`
 
+#### `borderColor` <Badge text="iOS" type="info" />
+
+Color of the tab bar top border.
+- Type: `ColorValue`
+
 ### Route Configuration
 
 Each route in the `routes` array can have the following properties:

docs/docs/docs/guides/usage-with-react-navigation.mdx

@@ -139,6 +139,11 @@ Available options:
 It's recommended to use `transparent` or `opaque` without lazy loading as the tab bar background flashes when a view is rendered lazily.
 :::
 
+#### `borderColor` <Badge text="iOS" type="info" />
+
+Color of the tab bar top border.
+- Type: `ColorValue`
+
 #### `sidebarAdaptable` <Badge text="iOS" type="info" />
 
 A tab bar style that adapts to each platform.

packages/react-native-bottom-tabs/ios/Fabric/RCTTabViewComponentView.mm

@@ -142,10 +142,14 @@ - (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &
     _tabViewProvider.inactiveTintColor = RCTUIColorFromSharedColor(newViewProps.inactiveTintColor);
   }
 
+  if (oldViewProps.borderColor != newViewProps.borderColor) {
+    _tabViewProvider.borderColor = RCTUIColorFromSharedColor(newViewProps.borderColor);
+  }
+
   if (oldViewProps.hapticFeedbackEnabled != newViewProps.hapticFeedbackEnabled) {
     _tabViewProvider.hapticFeedbackEnabled = newViewProps.hapticFeedbackEnabled;
   }
-  
+
   if (oldViewProps.fontSize != newViewProps.fontSize) {
     _tabViewProvider.fontSize = [NSNumber numberWithInt:newViewProps.fontSize];
   }

packages/react-native-bottom-tabs/ios/RCTTabViewViewManager.mm

@@ -33,6 +33,7 @@ @implementation RCTTabView
 RCT_EXPORT_VIEW_PROPERTY(barTintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(activeTintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(inactiveTintColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(borderColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(hapticFeedbackEnabled, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(fontFamily, NSString)
 RCT_EXPORT_VIEW_PROPERTY(fontWeight, NSString)

packages/react-native-bottom-tabs/ios/TabViewImpl.swift

@@ -22,6 +22,7 @@ class TabViewProps: ObservableObject {
   @Published var ignoresTopSafeArea: Bool = true
   @Published var disablePageAnimations: Bool = false
   @Published var hapticFeedbackEnabled: Bool = false
+  @Published var borderColor: UIColor?
   @Published var fontSize: Int?
   @Published var fontFamily: String?
   @Published var fontWeight: String?
@@ -241,6 +242,11 @@ private func configureTransparentAppearance(tabBar: UITabBar, props: TabViewProp
   items.forEach { item in
     item.setTitleTextAttributes(attributes, for: .normal)
   }
+
+  if let borderColor = props.borderColor {
+    tabBar.layer.borderWidth = 0.5
+    tabBar.layer.borderColor = borderColor.cgColor
+  }
 }
 
 private func configureStandardAppearance(tabBar: UITabBar, props: TabViewProps) {
@@ -281,6 +287,10 @@ private func configureStandardAppearance(tabBar: UITabBar, props: TabViewProps)
   appearance.inlineLayoutAppearance = itemAppearance
   appearance.compactInlineLayoutAppearance = itemAppearance
 
+  if let borderColor = props.borderColor {
+    appearance.shadowColor = borderColor
+  }
+
   // Apply final appearance
   tabBar.standardAppearance = appearance
   if #available(iOS 15.0, *) {
@@ -364,6 +374,9 @@ extension View {
       .onChange(of: props.fontWeight) { newValue in
         updateTabBarAppearance(props: props, tabBar: tabBar)
       }
+      .onChange(of: props.borderColor) { newValue in
+        updateTabBarAppearance(props: props, tabBar: tabBar)
+      }
   }
 
   @ViewBuilder

packages/react-native-bottom-tabs/ios/TabViewProvider.swift

@@ -136,6 +136,12 @@ public final class TabInfo: NSObject {
     }
   }
 
+  @objc public var borderColor: UIColor? {
+    didSet {
+      props.borderColor = borderColor
+    }
+  }
+
   @objc public var fontFamily: NSString? {
     didSet {
       props.fontFamily = fontFamily as? String

packages/react-native-bottom-tabs/src/TabView.tsx

@@ -51,6 +51,10 @@ interface Props<Route extends BaseRoute> {
    * Describes the appearance attributes for the tabBar to use when an observable scroll view is scrolled to the bottom. (iOS only)
    */
   scrollEdgeAppearance?: 'default' | 'opaque' | 'transparent';
+  /**
+   * Color of the tab bar top border.
+   */
+  borderColor?: ColorValue;
   /**
    * Active tab color.
    */

packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts

@@ -50,6 +50,7 @@ export interface TabViewProps extends ViewProps {
   ignoresTopSafeArea?: WithDefault<boolean, true>;
   disablePageAnimations?: boolean;
   activeIndicatorColor?: ColorValue;
+  borderColor?: ColorValue;
   hapticFeedbackEnabled?: boolean;
   fontFamily?: string;
   fontWeight?: string;