diff --git a/apps/example/src/Examples/TintColors.tsx b/apps/example/src/Examples/TintColors.tsx index ddb850f..49d5afb 100644 --- a/apps/example/src/Examples/TintColors.tsx +++ b/apps/example/src/Examples/TintColors.tsx @@ -54,6 +54,7 @@ export default function TintColorsExample() { tabBarActiveTintColor="red" tabBarInactiveTintColor="orange" scrollEdgeAppearance="default" + borderColor="red" /> ); } diff --git a/docs/docs/docs/guides/standalone-usage.md b/docs/docs/docs/guides/standalone-usage.md index 3bea1fb..89328ed 100644 --- a/docs/docs/docs/guides/standalone-usage.md +++ b/docs/docs/docs/guides/standalone-usage.md @@ -172,6 +172,11 @@ Whether the tab bar is translucent. Color of tab indicator. - Type: `ColorValue` +#### `borderColor` + +Color of the tab bar top border. +- Type: `ColorValue` + ### Route Configuration Each route in the `routes` array can have the following properties: diff --git a/docs/docs/docs/guides/usage-with-react-navigation.mdx b/docs/docs/docs/guides/usage-with-react-navigation.mdx index 8953357..3e6a7be 100644 --- a/docs/docs/docs/guides/usage-with-react-navigation.mdx +++ b/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` + +Color of the tab bar top border. +- Type: `ColorValue` + #### `sidebarAdaptable` A tab bar style that adapts to each platform. diff --git a/packages/react-native-bottom-tabs/ios/Fabric/RCTTabViewComponentView.mm b/packages/react-native-bottom-tabs/ios/Fabric/RCTTabViewComponentView.mm index 5cfcdc1..0338026 100644 --- a/packages/react-native-bottom-tabs/ios/Fabric/RCTTabViewComponentView.mm +++ b/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]; } diff --git a/packages/react-native-bottom-tabs/ios/RCTTabViewViewManager.mm b/packages/react-native-bottom-tabs/ios/RCTTabViewViewManager.mm index 4cadc09..0adcae4 100644 --- a/packages/react-native-bottom-tabs/ios/RCTTabViewViewManager.mm +++ b/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) diff --git a/packages/react-native-bottom-tabs/ios/TabViewImpl.swift b/packages/react-native-bottom-tabs/ios/TabViewImpl.swift index 12921bd..69e21fe 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewImpl.swift +++ b/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 diff --git a/packages/react-native-bottom-tabs/ios/TabViewProvider.swift b/packages/react-native-bottom-tabs/ios/TabViewProvider.swift index 7932241..8789980 100644 --- a/packages/react-native-bottom-tabs/ios/TabViewProvider.swift +++ b/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 diff --git a/packages/react-native-bottom-tabs/src/TabView.tsx b/packages/react-native-bottom-tabs/src/TabView.tsx index 5a24442..1f56332 100644 --- a/packages/react-native-bottom-tabs/src/TabView.tsx +++ b/packages/react-native-bottom-tabs/src/TabView.tsx @@ -51,6 +51,10 @@ interface Props { * 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. */ diff --git a/packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts b/packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts index 2824e72..7518144 100644 --- a/packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts +++ b/packages/react-native-bottom-tabs/src/TabViewNativeComponent.ts @@ -50,6 +50,7 @@ export interface TabViewProps extends ViewProps { ignoresTopSafeArea?: WithDefault; disablePageAnimations?: boolean; activeIndicatorColor?: ColorValue; + borderColor?: ColorValue; hapticFeedbackEnabled?: boolean; fontFamily?: string; fontWeight?: string;