fix: change api

Author: okwasniewski

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

@@ -133,6 +133,15 @@ Whether to enable haptic feedback on tab press.
 - Type: `boolean`
 - Default: `true`
 
+
+#### `tabLabelStyle`
+
+Object containing styles for the tab label.
+Supported properties:
+- `fontFamily`
+- `fontSize`
+- `fontWeight`
+
 #### `scrollEdgeAppearance` <Badge text="iOS" type="info" />
 
 Appearance attributes for the tab bar when a scroll view is at the bottom.

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

@@ -149,6 +149,16 @@ Tab views using the sidebar adaptable style have an appearance
 
 Whether to enable haptic feedback on tab press. Defaults to true.
 
+#### `tabLabelStyle`
+
+Object containing styles for the tab label.
+
+Supported properties:
+- `fontFamily`
+- `fontSize`
+- `fontWeight`
+
+
 ### Options
 
 The following options can be used to configure the screens in the navigator. These can be specified under `screenOptions` prop of `Tab.navigator` or `options` prop of `Tab.Screen`.

example/src/Examples/NativeBottomTabs.tsx

@@ -18,8 +18,10 @@ function NativeBottomTabs() {
       tabBarActiveTintColor="#F7DBA7"
       barTintColor="#1E2D2F"
       rippleColor="#F7DBA7"
-      fontFamily="Avenir"
-      fontSize={15}
+      tabLabelStyle={{
+        fontFamily: 'Avenir',
+        fontSize: 15,
+      }}
       activeIndicatorColor="#041F1E"
       screenListeners={{
         tabLongPress: (data) => {

ios/TabViewImpl.swift

@@ -170,12 +170,12 @@ struct TabItem: View {
 
 private func updateTabBarAppearance(props: TabViewProps, tabBar: UITabBar?) {
     guard let tabBar else { return }
-    
+
     if props.scrollEdgeAppearance == "transparent" {
         configureTransparentAppearance(tabBar: tabBar, props: props)
         return
     }
-    
+
     configureStandardAppearance(tabBar: tabBar, props: props)
 }
 
@@ -186,11 +186,11 @@ private func createFontAttributes(
   inactiveTintColor: UIColor?
 ) -> [NSAttributedString.Key: Any] {
   var attributes: [NSAttributedString.Key: Any] = [:]
-  
+
   if let inactiveTintColor {
     attributes[.foregroundColor] = inactiveTintColor
   }
-  
+
   if family != nil || weight != nil {
     attributes[.font] = RCTFont.update(
       nil,
@@ -204,33 +204,33 @@ private func createFontAttributes(
   } else {
     attributes[.font] = UIFont.boldSystemFont(ofSize: size)
   }
-  
+
   return attributes
 }
 
 private func configureTransparentAppearance(tabBar: UITabBar, props: TabViewProps) {
   tabBar.barTintColor = props.barTintColor
   tabBar.isTranslucent = props.translucent
   tabBar.unselectedItemTintColor = props.inactiveTintColor
-  
+
   guard let items = tabBar.items else { return }
-  
-  let fontSize = props.fontSize ?? 14
+
+  let fontSize = props.fontSize != nil ? CGFloat(props.fontSize!) : UIFont.smallSystemFontSize
   let attributes = createFontAttributes(
-    size: CGFloat(fontSize),
+    size: fontSize,
     family: props.fontFamily,
     weight: props.fontWeight,
     inactiveTintColor: props.inactiveTintColor
   )
-  
+
   items.forEach { item in
     item.setTitleTextAttributes(attributes, for: .normal)
   }
 }
 
 private func configureStandardAppearance(tabBar: UITabBar, props: TabViewProps) {
   let appearance = UITabBarAppearance()
-  
+
   // Configure background
   switch props.scrollEdgeAppearance {
   case "opaque":
@@ -239,29 +239,29 @@ private func configureStandardAppearance(tabBar: UITabBar, props: TabViewProps)
     appearance.configureWithDefaultBackground()
   }
   appearance.backgroundColor = props.barTintColor
-  
+
   // Configure item appearance
   let itemAppearance = UITabBarItemAppearance()
   let fontSize = props.fontSize != nil ? CGFloat(props.fontSize!) : UIFont.smallSystemFontSize
-  
+
   let attributes = createFontAttributes(
     size: fontSize,
     family: props.fontFamily,
     weight: props.fontWeight,
     inactiveTintColor: props.inactiveTintColor
   )
-  
+
   if let inactiveTintColor = props.inactiveTintColor {
     itemAppearance.normal.iconColor = inactiveTintColor
   }
-  
+
   itemAppearance.normal.titleTextAttributes = attributes
-  
+
   // Apply item appearance to all layouts
   appearance.stackedLayoutAppearance = itemAppearance
   appearance.inlineLayoutAppearance = itemAppearance
   appearance.compactInlineLayoutAppearance = itemAppearance
-  
+
   // Apply final appearance
   tabBar.standardAppearance = appearance
   if #available(iOS 15.0, *) {

src/TabView.tsx

@@ -123,18 +123,22 @@ interface Props<Route extends BaseRoute> {
    * Color of tab indicator. (Android only)
    */
   activeIndicatorColor?: ColorValue;
-  /**
-   * Font family for the tab labels.
-   */
-  fontFamily?: string;
-  /**
-   * Font weight for the tab labels.
-   */
-  fontWeight?: string;
-  /**
-   * Font size for the tab labels.
-   */
-  fontSize?: number;
+  tabLabelStyle?: {
+    /**
+     * Font family for the tab labels.
+     */
+    fontFamily?: string;
+
+    /**
+     * Font weight for the tab labels.
+     */
+    fontWeight?: string;
+
+    /**
+     * Font size for the tab labels.
+     */
+    fontSize?: number;
+  };
 }
 
 const ANDROID_MAX_TABS = 6;
@@ -160,6 +164,7 @@ const TabView = <Route extends BaseRoute>({
   getHidden = ({ route }: { route: Route }) => route.hidden,
   getActiveTintColor = ({ route }: { route: Route }) => route.activeTintColor,
   hapticFeedbackEnabled = true,
+  tabLabelStyle,
   ...props
 }: Props<Route>) => {
   // @ts-ignore
@@ -250,6 +255,7 @@ const TabView = <Route extends BaseRoute>({
   return (
     <TabViewAdapter
       {...props}
+      {...tabLabelStyle}
       style={styles.fullWidth}
       items={items}
       icons={resolvedIconAssets}

src/types.ts

@@ -14,9 +14,6 @@ export type BaseRoute = {
   unfocusedIcon?: ImageSourcePropType | AppleIcon;
   activeTintColor?: string;
   hidden?: boolean;
-  fontFamily?: string;
-  fontWeight?: string;
-  fontSize?: number;
 };
 
 export type NavigationState<Route extends BaseRoute> = {