feat: add support for top border color on iOS

Author: Nodonisko

apps/example/ios/Podfile.lock

@@ -1210,31 +1210,6 @@ PODS:
     - ReactCommon/turbomodule/core
     - Yoga
   - react-native-bottom-tabs (0.7.1):
-    - DoubleConversion
-    - glog
-    - RCT-Folly (= 2024.01.01.00)
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-jsi
-    - react-native-bottom-tabs/common (= 0.7.1)
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - SDWebImage (>= 5.19.1)
-    - SDWebImageSVGCoder (>= 1.7.0)
-    - SwiftUIIntrospect (~> 1.0)
-    - Yoga
-  - react-native-bottom-tabs/common (0.7.1):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -1259,71 +1234,7 @@ PODS:
     - SwiftUIIntrospect (~> 1.0)
     - Yoga
   - react-native-safe-area-context (4.14.0):
-    - DoubleConversion
-    - glog
-    - RCT-Folly (= 2024.01.01.00)
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-jsi
-    - react-native-safe-area-context/common (= 4.14.0)
-    - react-native-safe-area-context/fabric (= 4.14.0)
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - Yoga
-  - react-native-safe-area-context/common (4.14.0):
-    - DoubleConversion
-    - glog
-    - RCT-Folly (= 2024.01.01.00)
-    - RCTRequired
-    - RCTTypeSafety
     - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-jsi
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - Yoga
-  - react-native-safe-area-context/fabric (4.14.0):
-    - DoubleConversion
-    - glog
-    - RCT-Folly (= 2024.01.01.00)
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-jsi
-    - react-native-safe-area-context/common
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - Yoga
   - React-nativeconfig (0.75.4)
   - React-NativeModulesApple (0.75.4):
     - glog
@@ -1582,7 +1493,6 @@ PODS:
     - React-ImageManager
     - React-jsi
     - React-NativeModulesApple
-    - React-RCTAppDelegate
     - React-RCTFabric
     - React-rendererdebug
     - React-utils
@@ -1616,29 +1526,6 @@ PODS:
     - ReactCommon/turbomodule/core
     - Yoga
   - RNScreens (4.3.0):
-    - DoubleConversion
-    - glog
-    - RCT-Folly (= 2024.01.01.00)
-    - RCTRequired
-    - RCTTypeSafety
-    - React-Core
-    - React-debug
-    - React-Fabric
-    - React-featureflags
-    - React-graphics
-    - React-ImageManager
-    - React-jsi
-    - React-NativeModulesApple
-    - React-RCTFabric
-    - React-RCTImage
-    - React-rendererdebug
-    - React-utils
-    - ReactCodegen
-    - ReactCommon/turbomodule/bridging
-    - ReactCommon/turbomodule/core
-    - RNScreens/common (= 4.3.0)
-    - Yoga
-  - RNScreens/common (4.3.0):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -1719,7 +1606,6 @@ DEPENDENCIES:
   - React-idlecallbacksnativemodule (from `../../../node_modules/react-native/ReactCommon/react/nativemodule/idlecallbacks`)
   - React-ImageManager (from `../../../node_modules/react-native/ReactCommon/react/renderer/imagemanager/platform/ios`)
   - React-jsc (from `../../../node_modules/react-native/ReactCommon/jsc`)
-  - React-jsc/Fabric (from `../../../node_modules/react-native/ReactCommon/jsc`)
   - React-jserrorhandler (from `../../../node_modules/react-native/ReactCommon/jserrorhandler`)
   - React-jsi (from `../../../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../../../node_modules/react-native/ReactCommon/jsiexecutor`)
@@ -1926,15 +1812,15 @@ SPEC CHECKSUMS:
   React-CoreModules: 9fac2d31803c0ed03e4ddaa17f1481714f8633a5
   React-cxxreact: c72a7a8066fc4323ea85a3137de50c8a10a69794
   React-debug: 3d21f69d8def0656f8b8ec25c0f05954f4d862c5
-  React-defaultsnativemodule: 95882787871a9e80337f464e4643f1c5e0a39198
-  React-domnativemodule: dc8aac826a90479ca4e05f096f1f8cd35c216f31
+  React-defaultsnativemodule: ca56510e8d1c07a48817b1423528c7464407ca45
+  React-domnativemodule: 5ef5656fda7dc3d35fdac312e06dec031481c183
   React-Fabric: 9347fa5c8fbfac6d5276dd9e52c91058467d0960
   React-FabricComponents: 68b9f8c4a7189c055a7eb67b182e8d98c4f75f47
   React-FabricImage: 062e20f8b360ca008f44d00a639951c8c37ba2aa
   React-featureflags: ee1abd6f71555604a36cda6476e3c502ca9a48e5
-  React-featureflagsnativemodule: 209f660bc398849cfb81712c93010276f25f337b
+  React-featureflagsnativemodule: 183b42cafab1e70a56b2608c26d04aff2bdf43d1
   React-graphics: d7dd9c8d75cad5af19e19911fa370f78f2febd96
-  React-idlecallbacksnativemodule: 17a0e379a7e3c9bc9653b6902f22f4208658d687
+  React-idlecallbacksnativemodule: 208b0d15e33c443607eccdc1fe3e081fe263a17f
   React-ImageManager: ab7a7d17dd0ff1ef1d4e1e88197d1119da9957ce
   React-jsc: 4d3352be620f3fe2272238298aaccc9323b01824
   React-jserrorhandler: d9e867bb83b868472f3f7601883f0403b3e3942d
@@ -1944,18 +1830,18 @@ SPEC CHECKSUMS:
   React-jsitracing: 0e8c0aadb1fcec6b1e4f2a66ee3b0da80f0f8615
   React-logger: d79b704bf215af194f5213a6b7deec50ba8e6a9b
   React-Mapbuffer: b982d5bba94a8bc073bda48f0d27c9b28417fae3
-  React-microtasksnativemodule: 8fa285fed833a04a754bf575f8ded65fc240b88d
-  react-native-bottom-tabs: a08eaf6baf1b78375e17019536783dbbca3190ba
-  react-native-safe-area-context: 73505107f7c673cd550a561aeb6271f152c483b6
+  React-microtasksnativemodule: 475ea38712131abd7f7935c82a41364cea2fa01f
+  react-native-bottom-tabs: 98686073234188180cb1ede85a0f977ddde9c8d0
+  react-native-safe-area-context: 4532f1a0c5d34a46b9324ccaaedcb5582a302b7d
   React-nativeconfig: 8c83d992b9cc7d75b5abe262069eaeea4349f794
   React-NativeModulesApple: b8465afc883f5bf3fe8bac3767e394d581a5f123
   React-perflogger: 59e1a3182dca2cee7b9f1f7aab204018d46d1914
   React-performancetimeline: a9d05533ff834c6aa1f532e05e571f3fd2e3c1ed
   React-RCTActionSheet: d80e68d3baa163e4012a47c1f42ddd8bcd9672cc
   React-RCTAnimation: bde981f6bd7f8493696564da9b3bd05721d3b3cc
-  React-RCTAppDelegate: e5865dbf46ddec6d9ed9310a05094d13f9bb043f
+  React-RCTAppDelegate: bc9c02d6dd4d162e3e1850283aba81bd246fc688
   React-RCTBlob: e492d54533e61a81f2601494a6f393b3e15e33b9
-  React-RCTFabric: e6ef266a60e885a0548b0f7a5e9737f42ccd596b
+  React-RCTFabric: f2f86a175bb2fd3ce6760fd37338c6332efac2a6
   React-RCTImage: 90448d2882464af6015ed57c98f463f8748be465
   React-RCTLinking: 1bd95d0a704c271d21d758e0f0388cced768d77d
   React-RCTNetwork: 218af6e63eb9b47935cc5a775b7a1396cf10ff91
@@ -1972,12 +1858,12 @@ SPEC CHECKSUMS:
   React-utils: 546831c4f1be57fac614f68de34ac8763e67db55
   ReactCodegen: 54f07f54275a16f8e3a32cbdd62bf008b0869c9c
   ReactCommon: 8377a2a5504f72e284ce1b1cd207d8455bdbfdf3
-  ReactNativeHost: a3cd2bc15b6deac7439318607ce5637d8a93a117
+  ReactNativeHost: 99c0ffb175cd69de2ac9a70892cd22dac65ea79d
   ReactTestApp-DevSupport: ce66fc1bbcf598d7e90616db390a0274c13e14e7
   ReactTestApp-Resources: 9c387cfe7185736e6a9045e5aa3e085367be6aa3
-  RNGestureHandler: 492b1d415a25506d1dc612e6a14932b1e697d835
-  RNScreens: 16a61c0a9fe4cd69af6489b8d10ba580b5e22ed0
-  RNVectorIcons: a1344e212e80e6e0f4537a9960148201175f4225
+  RNGestureHandler: 6980c0e9faf478d385c9fdfcee5175c4b1215a7c
+  RNScreens: 7e89f78c273715ff4aa625130ae7b3aabb940c28
+  RNVectorIcons: 0cbcb1c0cb6da1ca1d43d3d990255e584bb99028
   SDWebImage: 73c6079366fea25fa4bb9640d5fb58f0893facd8
   SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d

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;