expo-router 6.0.0-beta.5 → 6.0.0-beta.6

package/build/native-tabs/NativeBottomTabs/NativeTabTrigger.d.ts

@@ -1,4 +1,5 @@
 import { type ReactElement, type ReactNode } from 'react';
+import { NativeTabsTriggerTabBar } from './NativeTabsTriggerTabBar';
 import type { ExtendedNativeTabOptions, NativeTabTriggerProps } from './types';
 /**
  * The component used to customize the native tab options both in the _layout file and from the tab screen.
@@ -40,9 +41,13 @@ import type { ExtendedNativeTabOptions, NativeTabTriggerProps } from './types';
  *
  * > **Note:** You can use the alias `NativeTabs.Trigger` for this component.
  */
-export declare function NativeTabTrigger(props: NativeTabTriggerProps): null;
-export declare function convertTabPropsToOptions({ options, hidden, children, disablePopToTop, disableScrollToTop, }: NativeTabTriggerProps): ExtendedNativeTabOptions;
+declare function NativeTabTriggerImpl(props: NativeTabTriggerProps): null;
+export declare const NativeTabTrigger: typeof NativeTabTriggerImpl & {
+    TabBar: typeof NativeTabsTriggerTabBar;
+};
+export declare function convertTabPropsToOptions({ options, hidden, children, role, disablePopToTop, disableScrollToTop, }: NativeTabTriggerProps): ExtendedNativeTabOptions;
 export declare function isNativeTabTrigger(child: ReactNode, contextKey?: string): child is ReactElement<NativeTabTriggerProps & {
     name: string;
 }>;
+export {};
 //# sourceMappingURL=NativeTabTrigger.d.ts.map

package/build/native-tabs/NativeBottomTabs/NativeTabTrigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NativeTabTrigger.d.ts","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabTrigger.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,KAAK,EAAE,wBAAwB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAK/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,QAqB5D;AAED,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,MAAM,EACN,QAAQ,EACR,eAAe,EACf,kBAAkB,GACnB,EAAE,qBAAqB,4BAgEvB;AAED,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,SAAS,EAChB,UAAU,CAAC,EAAE,MAAM,GAClB,KAAK,IAAI,YAAY,CAAC,qBAAqB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CA6BjE"}
+{"version":3,"file":"NativeTabTrigger.d.ts","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabTrigger.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG1E,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,EACV,wBAAwB,EAExB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAYjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,iBAAS,oBAAoB,CAAC,KAAK,EAAE,qBAAqB,QAqBzD;AAED,eAAO,MAAM,gBAAgB;;CAE3B,CAAC;AAEH,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,eAAe,EACf,kBAAkB,GACnB,EAAE,qBAAqB,4BAiCvB;AAmHD,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,SAAS,EAChB,UAAU,CAAC,EAAE,MAAM,GAClB,KAAK,IAAI,YAAY,CAAC,qBAAqB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CA6BjE"}

package/build/native-tabs/NativeBottomTabs/NativeTabTrigger.js

@@ -1,11 +1,12 @@
 "use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NativeTabTrigger = NativeTabTrigger;
+exports.NativeTabTrigger = void 0;
 exports.convertTabPropsToOptions = convertTabPropsToOptions;
 exports.isNativeTabTrigger = isNativeTabTrigger;
 const native_1 = require("@react-navigation/native");
 const react_1 = require("react");
+const NativeTabsTriggerTabBar_1 = require("./NativeTabsTriggerTabBar");
 const utils_1 = require("./utils");
 const useSafeLayoutEffect_1 = require("../../views/useSafeLayoutEffect");
 const elements_1 = require("../common/elements");
@@ -49,7 +50,7 @@ const elements_1 = require("../common/elements");
  *
  * > **Note:** You can use the alias `NativeTabs.Trigger` for this component.
  */
-function NativeTabTrigger(props) {
+function NativeTabTriggerImpl(props) {
     const route = (0, native_1.useRoute)();
     const navigation = (0, native_1.useNavigation)();
     const isFocused = navigation.isFocused();
@@ -67,7 +68,10 @@ function NativeTabTrigger(props) {
     }, [isFocused, props]);
     return null;
 }
-function convertTabPropsToOptions({ options, hidden, children, disablePopToTop, disableScrollToTop, }) {
+exports.NativeTabTrigger = Object.assign(NativeTabTriggerImpl, {
+    TabBar: NativeTabsTriggerTabBar_1.NativeTabsTriggerTabBar,
+});
+function convertTabPropsToOptions({ options, hidden, children, role, disablePopToTop, disableScrollToTop, }) {
     const initialOptions = {
         ...options,
         hidden: !!hidden,
@@ -77,65 +81,134 @@ function convertTabPropsToOptions({ options, hidden, children, disablePopToTop,
                 scrollToTop: !disableScrollToTop,
             },
         },
+        role: role ?? options?.role,
     };
-    const allowedChildren = (0, utils_1.filterAllowedChildrenElements)(children, [elements_1.Badge, elements_1.Label, elements_1.Icon]);
+    const allowedChildren = (0, utils_1.filterAllowedChildrenElements)(children, [
+        elements_1.Badge,
+        elements_1.Label,
+        elements_1.Icon,
+        NativeTabsTriggerTabBar_1.NativeTabsTriggerTabBar,
+    ]);
     return allowedChildren.reduce((acc, child) => {
         if ((0, utils_1.isChildOfType)(child, elements_1.Badge)) {
-            if (child.props.children) {
-                acc.badgeValue = String(child.props.children);
-            }
-            else if (!child.props.hidden) {
-                // If no value is provided, we set it to a space to show the badge
-                // Otherwise, the `react-native-screens` will interpret it as a hidden badge
-                // https://github.com/software-mansion/react-native-screens/blob/b4358fd95dd0736fc54df6bb97f210dc89edf24c/ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm#L172
-                acc.badgeValue = ' ';
-            }
+            appendBadgeOptions(acc, child.props);
         }
         else if ((0, utils_1.isChildOfType)(child, elements_1.Label)) {
-            if (child.props.hidden) {
-                acc.title = '';
-            }
-            else {
-                acc.title = child.props.children;
-            }
+            appendLabelOptions(acc, child.props);
         }
         else if ((0, utils_1.isChildOfType)(child, elements_1.Icon)) {
-            if ('src' in child.props || 'selectedSrc' in child.props) {
-                acc.icon = child.props.src
-                    ? {
-                        src: child.props.src,
-                    }
-                    : undefined;
-                acc.selectedIcon = child.props.selectedSrc
-                    ? {
-                        src: child.props.selectedSrc,
-                    }
-                    : undefined;
-            }
-            else if ('sf' in child.props || 'selectedSf' in child.props) {
-                if (process.env.EXPO_OS === 'ios') {
-                    acc.icon = child.props.sf
-                        ? {
-                            sf: child.props.sf,
-                        }
-                        : undefined;
-                    acc.selectedIcon = child.props.selectedSf
-                        ? {
-                            sf: child.props.selectedSf,
-                        }
-                        : undefined;
-                }
-            }
-            if (process.env.EXPO_OS === 'android') {
-                acc.icon = { drawable: child.props.drawable };
-                acc.selectedIcon = undefined;
-            }
+            appendIconOptions(acc, child.props);
+        }
+        else if ((0, utils_1.isChildOfType)(child, NativeTabsTriggerTabBar_1.NativeTabsTriggerTabBar)) {
+            appendTabBarOptions(acc, child.props);
         }
         return acc;
     }, { ...initialOptions });
 }
+function appendBadgeOptions(options, props) {
+    if (props.children) {
+        options.badgeValue = String(props.children);
+        options.selectedBadgeBackgroundColor = props.selectedBackgroundColor;
+    }
+    else if (!props.hidden) {
+        // If no value is provided, we set it to a space to show the badge
+        // Otherwise, the `react-native-screens` will interpret it as a hidden badge
+        // https://github.com/software-mansion/react-native-screens/blob/b4358fd95dd0736fc54df6bb97f210dc89edf24c/ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm#L172
+        options.badgeValue = ' ';
+    }
+}
+function appendLabelOptions(options, props) {
+    if (props.hidden) {
+        options.title = '';
+    }
+    else {
+        options.title = props.children;
+        options.selectedLabelStyle = props.selectedStyle;
+    }
+}
+function appendIconOptions(options, props) {
+    if ('src' in props && props.src) {
+        if (typeof props.src === 'object' && 'default' in props.src) {
+            options.icon = props.src.default
+                ? {
+                    src: props.src.default,
+                }
+                : undefined;
+            options.selectedIcon = props.src.selected
+                ? {
+                    src: props.src.selected,
+                }
+                : undefined;
+        }
+        else {
+            options.icon = props.src
+                ? {
+                    src: props.src,
+                }
+                : undefined;
+        }
+    }
+    else if ('sf' in props && process.env.EXPO_OS === 'ios') {
+        if (typeof props.sf === 'string') {
+            options.icon = props.sf
+                ? {
+                    sf: props.sf,
+                }
+                : undefined;
+            options.selectedIcon = undefined;
+        }
+        else if (props.sf) {
+            options.icon = props.sf.default
+                ? {
+                    sf: props.sf.default,
+                }
+                : undefined;
+            options.selectedIcon = props.sf.selected
+                ? {
+                    sf: props.sf.selected,
+                }
+                : undefined;
+        }
+    }
+    else if ('drawable' in props && process.env.EXPO_OS === 'android') {
+        options.icon = { drawable: props.drawable };
+        options.selectedIcon = undefined;
+    }
+    options.selectedIconColor = props.selectedColor;
+}
+function appendTabBarOptions(options, props) {
+    const { backgroundColor, blurEffect, iconColor, disableTransparentOnScrollEdge, badgeBackgroundColor, badgeTextColor, indicatorColor, labelStyle, } = props;
+    if (backgroundColor) {
+        options.backgroundColor = backgroundColor;
+    }
+    // We need better native integration of this on Android
+    // Simulating from JS side creates ugly transitions
+    if (process.env.EXPO_OS !== 'android') {
+        if (blurEffect) {
+            options.blurEffect = blurEffect;
+        }
+        if (iconColor) {
+            options.iconColor = iconColor;
+        }
+        if (disableTransparentOnScrollEdge !== undefined) {
+            options.disableTransparentOnScrollEdge = disableTransparentOnScrollEdge;
+        }
+        if (badgeBackgroundColor) {
+            options.badgeBackgroundColor = badgeBackgroundColor;
+        }
+        if (badgeTextColor) {
+            options.badgeTextColor = badgeTextColor;
+        }
+        if (indicatorColor) {
+            options.indicatorColor = indicatorColor;
+        }
+        if (labelStyle) {
+            options.labelStyle = labelStyle;
+        }
+    }
+}
 function isNativeTabTrigger(child, contextKey) {
-    if ((0, react_1.isValidElement)(child) && child && child.type === NativeTabTrigger) {
+    if ((0, react_1.isValidElement)(child) && child && child.type === exports.NativeTabTrigger) {
         if (typeof child.props === 'object' &&
             child.props &&
             'name' in child.props &&

package/build/native-tabs/NativeBottomTabs/NativeTabTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeTabTrigger.js","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabTrigger.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useNavigation, useRoute } from '@react-navigation/native';\nimport { isValidElement, type ReactElement, type ReactNode } from 'react';\n\nimport type { ExtendedNativeTabOptions, NativeTabTriggerProps } from './types';\nimport { filterAllowedChildrenElements, isChildOfType } from './utils';\nimport { useSafeLayoutEffect } from '../../views/useSafeLayoutEffect';\nimport { Icon, Badge, Label } from '../common/elements';\n\n/**\n * The component used to customize the native tab options both in the _layout file and from the tab screen.\n *\n * When used in the _layout file, you need to provide a `name` prop.\n * When used in the tab screen, the `name` prop takes no effect.\n *\n * @example\n * ```tsx\n * // In _layout file\n * import { NativeTabs } from 'expo-router/unstable-native-tabs';\n *\n * export default function Layout() {\n *   return (\n *     <NativeTabs>\n *       <NativeTabs.Trigger name=\"home\" />\n *       <NativeTabs.Trigger name=\"settings\" />\n *     </NativeTabs>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // In a tab screen\n * import { NativeTabs } from 'expo-router/unstable-native-tabs';\n *\n * export default function HomeScreen() {\n *   return (\n *     <View>\n *       <NativeTabs.Trigger>\n *         <Label>Home</Label>\n *       </NativeTabs.Trigger>\n *       <Text>This is home screen!</Text>\n *     </View>\n *   );\n * }\n * ```\n *\n * > **Note:** You can use the alias `NativeTabs.Trigger` for this component.\n */\nexport function NativeTabTrigger(props: NativeTabTriggerProps) {\n  const route = useRoute();\n  const navigation = useNavigation();\n  const isFocused = navigation.isFocused();\n\n  useSafeLayoutEffect(() => {\n    // This will cause the tab to update only when it is focused.\n    // As long as all tabs are loaded at the start, we don't need this check.\n    // It is here to ensure similar behavior to stack\n    if (isFocused) {\n      if (navigation.getState()?.type !== 'tab') {\n        throw new Error(\n          `Trigger component can only be used in the tab screen. Current route: ${route.name}`\n        );\n      }\n      const options = convertTabPropsToOptions(props);\n      navigation.setOptions(options);\n    }\n  }, [isFocused, props]);\n\n  return null;\n}\n\nexport function convertTabPropsToOptions({\n  options,\n  hidden,\n  children,\n  disablePopToTop,\n  disableScrollToTop,\n}: NativeTabTriggerProps) {\n  const initialOptions: ExtendedNativeTabOptions = {\n    ...options,\n    hidden: !!hidden,\n    specialEffects: {\n      repeatedTabSelection: {\n        popToRoot: !disablePopToTop,\n        scrollToTop: !disableScrollToTop,\n      },\n    },\n  };\n  const allowedChildren = filterAllowedChildrenElements(children, [Badge, Label, Icon]);\n  return allowedChildren.reduce<ExtendedNativeTabOptions>(\n    (acc, child) => {\n      if (isChildOfType(child, Badge)) {\n        if (child.props.children) {\n          acc.badgeValue = String(child.props.children);\n        } else if (!child.props.hidden) {\n          // If no value is provided, we set it to a space to show the badge\n          // Otherwise, the `react-native-screens` will interpret it as a hidden badge\n          // https://github.com/software-mansion/react-native-screens/blob/b4358fd95dd0736fc54df6bb97f210dc89edf24c/ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm#L172\n          acc.badgeValue = ' ';\n        }\n      } else if (isChildOfType(child, Label)) {\n        if (child.props.hidden) {\n          acc.title = '';\n        } else {\n          acc.title = child.props.children;\n        }\n      } else if (isChildOfType(child, Icon)) {\n        if ('src' in child.props || 'selectedSrc' in child.props) {\n          acc.icon = child.props.src\n            ? {\n                src: child.props.src,\n              }\n            : undefined;\n          acc.selectedIcon = child.props.selectedSrc\n            ? {\n                src: child.props.selectedSrc,\n              }\n            : undefined;\n        } else if ('sf' in child.props || 'selectedSf' in child.props) {\n          if (process.env.EXPO_OS === 'ios') {\n            acc.icon = child.props.sf\n              ? {\n                  sf: child.props.sf,\n                }\n              : undefined;\n            acc.selectedIcon = child.props.selectedSf\n              ? {\n                  sf: child.props.selectedSf,\n                }\n              : undefined;\n          }\n        }\n        if (process.env.EXPO_OS === 'android') {\n          acc.icon = { drawable: child.props.drawable };\n          acc.selectedIcon = undefined;\n        }\n      }\n      return acc;\n    },\n    { ...initialOptions }\n  );\n}\n\nexport function isNativeTabTrigger(\n  child: ReactNode,\n  contextKey?: string\n): child is ReactElement<NativeTabTriggerProps & { name: string }> {\n  if (isValidElement(child) && child && child.type === NativeTabTrigger) {\n    if (\n      typeof child.props === 'object' &&\n      child.props &&\n      'name' in child.props &&\n      !child.props.name\n    ) {\n      throw new Error(\n        `<Trigger /> component in \\`default export\\` at \\`app${contextKey}/_layout\\` must have a \\`name\\` prop when used as a child of a Layout Route.`\n      );\n    }\n\n    if (process.env.NODE_ENV !== 'production') {\n      if (\n        ['component', 'getComponent'].some(\n          (key) => child.props && typeof child.props === 'object' && key in child.props\n        )\n      ) {\n        throw new Error(\n          `<Trigger /> component in \\`default export\\` at \\`app${contextKey}/_layout\\` must not have a \\`component\\` or \\`getComponent\\` prop when used as a child of a Layout Route`\n        );\n      }\n    }\n\n    return true;\n  }\n\n  return false;\n}\n"]}
+{"version":3,"file":"NativeTabTrigger.js","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabTrigger.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useNavigation, useRoute } from '@react-navigation/native';\nimport { isValidElement, type ReactElement, type ReactNode } from 'react';\nimport type { ImageSourcePropType } from 'react-native';\n\nimport { NativeTabsTriggerTabBar } from './NativeTabsTriggerTabBar';\nimport type {\n  ExtendedNativeTabOptions,\n  NativeTabsTriggerTabBarProps,\n  NativeTabTriggerProps,\n} from './types';\nimport { filterAllowedChildrenElements, isChildOfType } from './utils';\nimport { useSafeLayoutEffect } from '../../views/useSafeLayoutEffect';\nimport {\n  Icon,\n  Badge,\n  Label,\n  type LabelProps,\n  type IconProps,\n  type BadgeProps,\n} from '../common/elements';\n\n/**\n * The component used to customize the native tab options both in the _layout file and from the tab screen.\n *\n * When used in the _layout file, you need to provide a `name` prop.\n * When used in the tab screen, the `name` prop takes no effect.\n *\n * @example\n * ```tsx\n * // In _layout file\n * import { NativeTabs } from 'expo-router/unstable-native-tabs';\n *\n * export default function Layout() {\n *   return (\n *     <NativeTabs>\n *       <NativeTabs.Trigger name=\"home\" />\n *       <NativeTabs.Trigger name=\"settings\" />\n *     </NativeTabs>\n *   );\n * }\n * ```\n *\n * @example\n * ```tsx\n * // In a tab screen\n * import { NativeTabs } from 'expo-router/unstable-native-tabs';\n *\n * export default function HomeScreen() {\n *   return (\n *     <View>\n *       <NativeTabs.Trigger>\n *         <Label>Home</Label>\n *       </NativeTabs.Trigger>\n *       <Text>This is home screen!</Text>\n *     </View>\n *   );\n * }\n * ```\n *\n * > **Note:** You can use the alias `NativeTabs.Trigger` for this component.\n */\nfunction NativeTabTriggerImpl(props: NativeTabTriggerProps) {\n  const route = useRoute();\n  const navigation = useNavigation();\n  const isFocused = navigation.isFocused();\n\n  useSafeLayoutEffect(() => {\n    // This will cause the tab to update only when it is focused.\n    // As long as all tabs are loaded at the start, we don't need this check.\n    // It is here to ensure similar behavior to stack\n    if (isFocused) {\n      if (navigation.getState()?.type !== 'tab') {\n        throw new Error(\n          `Trigger component can only be used in the tab screen. Current route: ${route.name}`\n        );\n      }\n      const options = convertTabPropsToOptions(props);\n      navigation.setOptions(options);\n    }\n  }, [isFocused, props]);\n\n  return null;\n}\n\nexport const NativeTabTrigger = Object.assign(NativeTabTriggerImpl, {\n  TabBar: NativeTabsTriggerTabBar,\n});\n\nexport function convertTabPropsToOptions({\n  options,\n  hidden,\n  children,\n  role,\n  disablePopToTop,\n  disableScrollToTop,\n}: NativeTabTriggerProps) {\n  const initialOptions: ExtendedNativeTabOptions = {\n    ...options,\n    hidden: !!hidden,\n    specialEffects: {\n      repeatedTabSelection: {\n        popToRoot: !disablePopToTop,\n        scrollToTop: !disableScrollToTop,\n      },\n    },\n    role: role ?? options?.role,\n  };\n  const allowedChildren = filterAllowedChildrenElements(children, [\n    Badge,\n    Label,\n    Icon,\n    NativeTabsTriggerTabBar,\n  ]);\n  return allowedChildren.reduce<ExtendedNativeTabOptions>(\n    (acc, child) => {\n      if (isChildOfType(child, Badge)) {\n        appendBadgeOptions(acc, child.props);\n      } else if (isChildOfType(child, Label)) {\n        appendLabelOptions(acc, child.props);\n      } else if (isChildOfType(child, Icon)) {\n        appendIconOptions(acc, child.props);\n      } else if (isChildOfType(child, NativeTabsTriggerTabBar)) {\n        appendTabBarOptions(acc, child.props);\n      }\n      return acc;\n    },\n    { ...initialOptions }\n  );\n}\n\nfunction appendBadgeOptions(options: ExtendedNativeTabOptions, props: BadgeProps) {\n  if (props.children) {\n    options.badgeValue = String(props.children);\n    options.selectedBadgeBackgroundColor = props.selectedBackgroundColor;\n  } else if (!props.hidden) {\n    // If no value is provided, we set it to a space to show the badge\n    // Otherwise, the `react-native-screens` will interpret it as a hidden badge\n    // https://github.com/software-mansion/react-native-screens/blob/b4358fd95dd0736fc54df6bb97f210dc89edf24c/ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm#L172\n    options.badgeValue = ' ';\n  }\n}\n\nfunction appendLabelOptions(options: ExtendedNativeTabOptions, props: LabelProps) {\n  if (props.hidden) {\n    options.title = '';\n  } else {\n    options.title = props.children;\n    options.selectedLabelStyle = props.selectedStyle;\n  }\n}\n\nfunction appendIconOptions(options: ExtendedNativeTabOptions, props: IconProps) {\n  if ('src' in props && props.src) {\n    if (typeof props.src === 'object' && 'default' in props.src) {\n      options.icon = props.src.default\n        ? {\n            src: props.src.default,\n          }\n        : undefined;\n      options.selectedIcon = props.src.selected\n        ? {\n            src: props.src.selected,\n          }\n        : undefined;\n    } else {\n      options.icon = props.src\n        ? {\n            src: props.src as ImageSourcePropType,\n          }\n        : undefined;\n    }\n  } else if ('sf' in props && process.env.EXPO_OS === 'ios') {\n    if (typeof props.sf === 'string') {\n      options.icon = props.sf\n        ? {\n            sf: props.sf,\n          }\n        : undefined;\n      options.selectedIcon = undefined;\n    } else if (props.sf) {\n      options.icon = props.sf.default\n        ? {\n            sf: props.sf.default,\n          }\n        : undefined;\n      options.selectedIcon = props.sf.selected\n        ? {\n            sf: props.sf.selected,\n          }\n        : undefined;\n    }\n  } else if ('drawable' in props && process.env.EXPO_OS === 'android') {\n    options.icon = { drawable: props.drawable };\n    options.selectedIcon = undefined;\n  }\n  options.selectedIconColor = props.selectedColor;\n}\n\nfunction appendTabBarOptions(\n  options: ExtendedNativeTabOptions,\n  props: NativeTabsTriggerTabBarProps\n) {\n  const {\n    backgroundColor,\n    blurEffect,\n    iconColor,\n    disableTransparentOnScrollEdge,\n    badgeBackgroundColor,\n    badgeTextColor,\n    indicatorColor,\n    labelStyle,\n  } = props;\n\n  if (backgroundColor) {\n    options.backgroundColor = backgroundColor;\n  }\n  // We need better native integration of this on Android\n  // Simulating from JS side creates ugly transitions\n  if (process.env.EXPO_OS !== 'android') {\n    if (blurEffect) {\n      options.blurEffect = blurEffect;\n    }\n    if (iconColor) {\n      options.iconColor = iconColor;\n    }\n    if (disableTransparentOnScrollEdge !== undefined) {\n      options.disableTransparentOnScrollEdge = disableTransparentOnScrollEdge;\n    }\n    if (badgeBackgroundColor) {\n      options.badgeBackgroundColor = badgeBackgroundColor;\n    }\n    if (badgeTextColor) {\n      options.badgeTextColor = badgeTextColor;\n    }\n    if (indicatorColor) {\n      options.indicatorColor = indicatorColor;\n    }\n    if (labelStyle) {\n      options.labelStyle = labelStyle;\n    }\n  }\n}\n\nexport function isNativeTabTrigger(\n  child: ReactNode,\n  contextKey?: string\n): child is ReactElement<NativeTabTriggerProps & { name: string }> {\n  if (isValidElement(child) && child && child.type === NativeTabTrigger) {\n    if (\n      typeof child.props === 'object' &&\n      child.props &&\n      'name' in child.props &&\n      !child.props.name\n    ) {\n      throw new Error(\n        `<Trigger /> component in \\`default export\\` at \\`app${contextKey}/_layout\\` must have a \\`name\\` prop when used as a child of a Layout Route.`\n      );\n    }\n\n    if (process.env.NODE_ENV !== 'production') {\n      if (\n        ['component', 'getComponent'].some(\n          (key) => child.props && typeof child.props === 'object' && key in child.props\n        )\n      ) {\n        throw new Error(\n          `<Trigger /> component in \\`default export\\` at \\`app${contextKey}/_layout\\` must not have a \\`component\\` or \\`getComponent\\` prop when used as a child of a Layout Route`\n        );\n      }\n    }\n\n    return true;\n  }\n\n  return false;\n}\n"]}

package/build/native-tabs/NativeBottomTabs/NativeTabs.d.ts

@@ -1,4 +1,3 @@
-import { NativeTabTrigger } from './NativeTabTrigger';
 import type { NativeTabsProps } from './types';
 /**
  * The component used to create native tabs layout.
@@ -19,6 +18,8 @@ import type { NativeTabsProps } from './types';
  * ```
  */
 export declare const NativeTabs: ((props: NativeTabsProps) => import("react").JSX.Element) & {
-    Trigger: typeof NativeTabTrigger;
+    Trigger: ((props: import("./types").NativeTabTriggerProps) => null) & {
+        TabBar: typeof import("./NativeTabsTriggerTabBar").NativeTabsTriggerTabBar;
+    };
 };
 //# sourceMappingURL=NativeTabs.d.ts.map

package/build/native-tabs/NativeBottomTabs/NativeTabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NativeTabs.d.ts","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabs.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,UAAU,WACb,eAAe;;CAIxB,CAAC"}
+{"version":3,"file":"NativeTabs.d.ts","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,UAAU,WACb,eAAe;;;;CAIxB,CAAC"}

package/build/native-tabs/NativeBottomTabs/NativeTabsTriggerTabBar.d.ts

@@ -0,0 +1,24 @@
+import type { NativeTabsTriggerTabBarProps } from './types';
+/**
+ * The component used to customize the style of the tab bar, when given trigger is selected.
+ *
+ * Prefer this to global changes of tab bar styles, directly in the page.
+ *
+ * > **Note:** You can use the alias `NativeTabs.Trigger.TabBar` for this component.
+ *
+ * @example
+ * ```tsx
+ * <NativeTabs
+ *  backgroundColor="black"
+ * >
+ *  <NativeTabs.Trigger name="page">
+ *    <NativeTabs.Trigger.TabBar
+ *      backgroundColor="white"
+ *    />
+ *    <Label>Page</Label>
+ *  </NativeTabs.Trigger>
+ * </NativeTabs>
+ *
+ */
+export declare function NativeTabsTriggerTabBar(props: NativeTabsTriggerTabBarProps): React.ReactNode;
+//# sourceMappingURL=NativeTabsTriggerTabBar.d.ts.map

package/build/native-tabs/NativeBottomTabs/NativeTabsTriggerTabBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeTabsTriggerTabBar.d.ts","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabsTriggerTabBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAC;AAE5D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,4BAA4B,GAAG,KAAK,CAAC,SAAS,CAE5F"}

package/build/native-tabs/NativeBottomTabs/NativeTabsTriggerTabBar.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NativeTabsTriggerTabBar = NativeTabsTriggerTabBar;
+/**
+ * The component used to customize the style of the tab bar, when given trigger is selected.
+ *
+ * Prefer this to global changes of tab bar styles, directly in the page.
+ *
+ * > **Note:** You can use the alias `NativeTabs.Trigger.TabBar` for this component.
+ *
+ * @example
+ * ```tsx
+ * <NativeTabs
+ *  backgroundColor="black"
+ * >
+ *  <NativeTabs.Trigger name="page">
+ *    <NativeTabs.Trigger.TabBar
+ *      backgroundColor="white"
+ *    />
+ *    <Label>Page</Label>
+ *  </NativeTabs.Trigger>
+ * </NativeTabs>
+ *
+ */
+function NativeTabsTriggerTabBar(props) {
+    return null;
+}
+//# sourceMappingURL=NativeTabsTriggerTabBar.js.map

package/build/native-tabs/NativeBottomTabs/NativeTabsTriggerTabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeTabsTriggerTabBar.js","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabsTriggerTabBar.tsx"],"names":[],"mappings":";;AAuBA,0DAEC;AAvBD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAgB,uBAAuB,CAAC,KAAmC;IACzE,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["import type { NativeTabsTriggerTabBarProps } from './types';\n\n/**\n * The component used to customize the style of the tab bar, when given trigger is selected.\n *\n * Prefer this to global changes of tab bar styles, directly in the page.\n *\n * > **Note:** You can use the alias `NativeTabs.Trigger.TabBar` for this component.\n *\n * @example\n * ```tsx\n * <NativeTabs\n *  backgroundColor=\"black\"\n * >\n *  <NativeTabs.Trigger name=\"page\">\n *    <NativeTabs.Trigger.TabBar\n *      backgroundColor=\"white\"\n *    />\n *    <Label>Page</Label>\n *  </NativeTabs.Trigger>\n * </NativeTabs>\n *\n */\nexport function NativeTabsTriggerTabBar(props: NativeTabsTriggerTabBarProps): React.ReactNode {\n  return null;\n}\n"]}

package/build/native-tabs/NativeBottomTabs/NativeTabsView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NativeTabsView.d.ts","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabsView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAShD,OAAO,EAKL,KAAK,mBAAmB,EACzB,MAAM,SAAS,CAAC;AAOjB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAyExD"}
+{"version":3,"file":"NativeTabsView.d.ts","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabsView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAiBhD,OAAO,EAIL,KAAK,mBAAmB,EACzB,MAAM,SAAS,CAAC;AAOjB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAwIxD"}

package/build/native-tabs/NativeBottomTabs/NativeTabsView.js

@@ -36,32 +36,67 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NativeTabsView = NativeTabsView;
 const react_1 = __importStar(require("react"));
 const react_native_screens_1 = require("react-native-screens");
+const appearance_1 = require("./appearance");
 const types_1 = require("./types");
 const utils_1 = require("./utils");
 // We let native tabs to control the changes. This requires freeze to be disabled for tab bar.
 // Otherwise user may see glitches when switching between tabs.
 react_native_screens_1.featureFlags.experiment.controlledBottomTabs = false;
 function NativeTabsView(props) {
-    const { builder, style, minimizeBehavior, disableIndicator, focusedIndex } = props;
+    const { builder, minimizeBehavior, disableIndicator, focusedIndex, disableTransparentOnScrollEdge, } = props;
     const { state, descriptors, navigation } = builder;
     const { routes } = state;
     const deferredFocusedIndex = (0, react_1.useDeferredValue)(focusedIndex);
+    let standardAppearance = (0, appearance_1.convertStyleToAppearance)({
+        ...props.labelStyle,
+        iconColor: props.iconColor,
+        blurEffect: props.blurEffect,
+        backgroundColor: props.backgroundColor,
+        badgeBackgroundColor: props.badgeBackgroundColor,
+    });
+    if (props.tintColor) {
+        standardAppearance = (0, appearance_1.appendSelectedStyleToAppearance)({ iconColor: props.tintColor, color: props.tintColor }, standardAppearance);
+    }
+    const scrollEdgeAppearance = (0, appearance_1.convertStyleToAppearance)({
+        ...props.labelStyle,
+        iconColor: props.iconColor,
+        blurEffect: disableTransparentOnScrollEdge ? props.blurEffect : 'none',
+        backgroundColor: disableTransparentOnScrollEdge ? props.backgroundColor : null,
+        badgeBackgroundColor: props.badgeBackgroundColor,
+    });
+    const appearances = routes.map((route) => ({
+        standardAppearance: (0, appearance_1.createStandardAppearanceFromOptions)(descriptors[route.key].options, standardAppearance),
+        scrollEdgeAppearance: (0, appearance_1.createScrollEdgeAppearanceFromOptions)(descriptors[route.key].options, scrollEdgeAppearance),
+    }));
+    const options = routes.map((route) => descriptors[route.key].options);
     const children = routes
         .map((route, index) => ({ route, index }))
         .filter(({ route: { key } }) => (0, utils_1.shouldTabBeVisible)(descriptors[key].options))
         .map(({ route, index }) => {
         const descriptor = descriptors[route.key];
         const isFocused = index === deferredFocusedIndex;
-        const title = descriptor.options.title ?? route.name;
-        return (<react_native_screens_1.BottomTabsScreen key={route.key} {...descriptor.options} tabBarItemBadgeBackgroundColor={style?.badgeBackgroundColor} tabBarItemBadgeTextColor={style?.badgeTextColor} tabBarItemTitlePositionAdjustment={style?.titlePositionAdjustment} iconResourceName={descriptor.options.icon?.drawable} icon={convertOptionsIconToPropsIcon(descriptor.options.icon)} selectedIcon={convertOptionsIconToPropsIcon(descriptor.options.selectedIcon)} title={title} freezeContents={false} tabKey={route.key} isFocused={isFocused}>
-          {descriptor.render()}
-        </react_native_screens_1.BottomTabsScreen>);
+        return (<Screen key={route.key} routeKey={route.key} name={route.name} descriptor={descriptor} isFocused={isFocused} standardAppearance={appearances[index].standardAppearance} scrollEdgeAppearance={appearances[index].scrollEdgeAppearance} badgeTextColor={props.badgeTextColor}/>);
     });
-    return (<BottomTabsWrapper tabBarItemTitleFontColor={style?.color} tabBarItemTitleFontFamily={style?.fontFamily} tabBarItemTitleFontSize={style?.fontSize} 
-    // Only string values are accepted by screens
-    tabBarItemTitleFontWeight={style?.fontWeight
-            ? String(style.fontWeight)
-            : undefined} tabBarItemTitleFontStyle={style?.fontStyle} tabBarBackgroundColor={style?.backgroundColor} tabBarBlurEffect={style?.blurEffect} tabBarTintColor={style?.tintColor} tabBarItemBadgeBackgroundColor={style?.badgeBackgroundColor} tabBarItemRippleColor={style?.rippleColor} tabBarItemLabelVisibilityMode={style?.labelVisibilityMode} tabBarItemIconColor={style?.iconColor} tabBarItemIconColorActive={style?.['&:active']?.iconColor ?? style?.tintColor} tabBarItemTitleFontColorActive={style?.['&:active']?.color ?? style?.tintColor} tabBarItemTitleFontSizeActive={style?.['&:active']?.fontSize} tabBarItemActiveIndicatorColor={style?.['&:active']?.indicatorColor} tabBarItemActiveIndicatorEnabled={!disableIndicator} tabBarMinimizeBehavior={minimizeBehavior} onNativeFocusChange={({ nativeEvent: { tabKey } }) => {
+    return (<BottomTabsWrapper 
+    // #region android props
+    tabBarItemTitleFontColor={appearances[deferredFocusedIndex].standardAppearance.stacked?.normal
+            ?.tabBarItemTitleFontColor} tabBarItemTitleFontFamily={appearances[deferredFocusedIndex].standardAppearance.stacked?.normal
+            ?.tabBarItemTitleFontFamily} tabBarItemTitleFontSize={appearances[deferredFocusedIndex].standardAppearance.stacked?.normal
+            ?.tabBarItemTitleFontSize} tabBarItemTitleFontSizeActive={appearances[deferredFocusedIndex].standardAppearance.stacked?.normal
+            ?.tabBarItemTitleFontSize} tabBarItemTitleFontWeight={appearances[deferredFocusedIndex].standardAppearance.stacked?.normal
+            ?.tabBarItemTitleFontWeight} tabBarItemTitleFontStyle={appearances[deferredFocusedIndex].standardAppearance.stacked?.normal
+            ?.tabBarItemTitleFontStyle} tabBarItemIconColor={appearances[deferredFocusedIndex].standardAppearance.stacked?.normal?.tabBarItemIconColor} tabBarBackgroundColor={appearances[deferredFocusedIndex].standardAppearance.tabBarBackgroundColor ??
+            props.backgroundColor ??
+            undefined} tabBarItemRippleColor={props.rippleColor} tabBarItemLabelVisibilityMode={props.labelVisibilityMode} tabBarItemIconColorActive={appearances[deferredFocusedIndex].standardAppearance?.stacked?.selected
+            ?.tabBarItemIconColor ?? props?.tintColor} tabBarItemTitleFontColorActive={appearances[deferredFocusedIndex].standardAppearance?.stacked?.selected
+            ?.tabBarItemTitleFontColor ?? props?.tintColor} 
+    // tabBarItemTitleFontSizeActive={activeStyle?.fontSize}
+    tabBarItemActiveIndicatorColor={options[deferredFocusedIndex]?.indicatorColor ?? props?.indicatorColor} tabBarItemActiveIndicatorEnabled={!disableIndicator} 
+    // #endregion
+    // #region iOS props
+    tabBarTintColor={props?.tintColor} tabBarMinimizeBehavior={minimizeBehavior} 
+    // #endregion
+    onNativeFocusChange={({ nativeEvent: { tabKey } }) => {
             const descriptor = descriptors[tabKey];
             const route = descriptor.route;
             navigation.dispatch({
@@ -75,6 +110,21 @@ function NativeTabsView(props) {
       {children}
     </BottomTabsWrapper>);
 }
+function Screen(props) {
+    const { routeKey, name, descriptor, isFocused, standardAppearance, scrollEdgeAppearance, badgeTextColor, } = props;
+    const title = descriptor.options.title ?? name;
+    let icon = convertOptionsIconToPropsIcon(descriptor.options.icon);
+    // Fix for an issue in screens
+    if (descriptor.options.role) {
+        switch (descriptor.options.role) {
+            case 'search':
+                icon = { sfSymbolName: 'magnifyingglass' };
+        }
+    }
+    return (<react_native_screens_1.BottomTabsScreen {...descriptor.options} tabBarItemBadgeBackgroundColor={standardAppearance.stacked?.normal?.tabBarItemBadgeBackgroundColor} tabBarItemBadgeTextColor={badgeTextColor} standardAppearance={standardAppearance} scrollEdgeAppearance={scrollEdgeAppearance} iconResourceName={getAndroidIconResourceName(descriptor.options.icon)} iconResource={getAndroidIconResource(descriptor.options.icon)} icon={icon} selectedIcon={convertOptionsIconToPropsIcon(descriptor.options.selectedIcon)} title={title} freezeContents={false} tabKey={routeKey} systemItem={descriptor.options.role} isFocused={isFocused}>
+      {descriptor.render()}
+    </react_native_screens_1.BottomTabsScreen>);
+}
 function convertOptionsIconToPropsIcon(icon) {
     if (!icon) {
         return undefined;
@@ -87,21 +137,31 @@ function convertOptionsIconToPropsIcon(icon) {
     }
     return undefined;
 }
+function getAndroidIconResource(icon) {
+    if (icon && 'src' in icon && icon.src) {
+        return icon.src;
+    }
+    return undefined;
+}
+function getAndroidIconResourceName(icon) {
+    if (icon && 'drawable' in icon && icon.drawable) {
+        return icon.drawable;
+    }
+    return undefined;
+}
 const supportedTabBarMinimizeBehaviorsSet = new Set(types_1.SUPPORTED_TAB_BAR_MINIMIZE_BEHAVIORS);
 const supportedTabBarItemLabelVisibilityModesSet = new Set(types_1.SUPPORTED_TAB_BAR_ITEM_LABEL_VISIBILITY_MODES);
-const supportedBlurEffectsSet = new Set(types_1.SUPPORTED_BLUR_EFFECTS);
 function BottomTabsWrapper(props) {
-    const { tabBarMinimizeBehavior, tabBarItemLabelVisibilityMode, tabBarBlurEffect, ...rest } = props;
+    let { tabBarMinimizeBehavior, tabBarItemLabelVisibilityMode, ...rest } = props;
     if (tabBarMinimizeBehavior && !supportedTabBarMinimizeBehaviorsSet.has(tabBarMinimizeBehavior)) {
-        throw new Error(`Unsupported minimizeBehavior: ${tabBarMinimizeBehavior}. Supported values are: ${types_1.SUPPORTED_TAB_BAR_MINIMIZE_BEHAVIORS.map((behavior) => `"${behavior}"`).join(', ')}`);
+        console.warn(`Unsupported minimizeBehavior: ${tabBarMinimizeBehavior}. Supported values are: ${types_1.SUPPORTED_TAB_BAR_MINIMIZE_BEHAVIORS.map((behavior) => `"${behavior}"`).join(', ')}`);
+        tabBarMinimizeBehavior = undefined;
     }
     if (tabBarItemLabelVisibilityMode &&
         !supportedTabBarItemLabelVisibilityModesSet.has(tabBarItemLabelVisibilityMode)) {
-        throw new Error(`Unsupported labelVisibilityMode: ${tabBarItemLabelVisibilityMode}. Supported values are: ${types_1.SUPPORTED_TAB_BAR_ITEM_LABEL_VISIBILITY_MODES.map((mode) => `"${mode}"`).join(', ')}`);
-    }
-    if (tabBarBlurEffect && !supportedBlurEffectsSet.has(tabBarBlurEffect)) {
-        throw new Error(`Unsupported blurEffect: ${tabBarBlurEffect}. Supported values are: ${types_1.SUPPORTED_BLUR_EFFECTS.map((effect) => `"${effect}"`).join(', ')}`);
+        console.warn(`Unsupported labelVisibilityMode: ${tabBarItemLabelVisibilityMode}. Supported values are: ${types_1.SUPPORTED_TAB_BAR_ITEM_LABEL_VISIBILITY_MODES.map((mode) => `"${mode}"`).join(', ')}`);
+        tabBarItemLabelVisibilityMode = undefined;
     }
-    return (<react_native_screens_1.BottomTabs tabBarBlurEffect={tabBarBlurEffect} tabBarItemLabelVisibilityMode={tabBarItemLabelVisibilityMode} tabBarMinimizeBehavior={tabBarMinimizeBehavior} {...rest}/>);
+    return (<react_native_screens_1.BottomTabs tabBarItemLabelVisibilityMode={tabBarItemLabelVisibilityMode} tabBarMinimizeBehavior={tabBarMinimizeBehavior} {...rest}/>);
 }
 //# sourceMappingURL=NativeTabsView.js.map

package/build/native-tabs/NativeBottomTabs/NativeTabsView.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeTabsView.js","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabsView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useDeferredValue } from 'react';\nimport {\n  BottomTabs,\n  BottomTabsScreen,\n  featureFlags,\n  type BottomTabsProps,\n  type BottomTabsScreenProps,\n} from 'react-native-screens';\n\nimport {\n  SUPPORTED_BLUR_EFFECTS,\n  SUPPORTED_TAB_BAR_ITEM_LABEL_VISIBILITY_MODES,\n  SUPPORTED_TAB_BAR_MINIMIZE_BEHAVIORS,\n  type NativeTabOptions,\n  type NativeTabsViewProps,\n} from './types';\nimport { shouldTabBeVisible } from './utils';\n\n// We let native tabs to control the changes. This requires freeze to be disabled for tab bar.\n// Otherwise user may see glitches when switching between tabs.\nfeatureFlags.experiment.controlledBottomTabs = false;\n\nexport function NativeTabsView(props: NativeTabsViewProps) {\n  const { builder, style, minimizeBehavior, disableIndicator, focusedIndex } = props;\n  const { state, descriptors, navigation } = builder;\n  const { routes } = state;\n\n  const deferredFocusedIndex = useDeferredValue(focusedIndex);\n\n  const children = routes\n    .map((route, index) => ({ route, index }))\n    .filter(({ route: { key } }) => shouldTabBeVisible(descriptors[key].options))\n    .map(({ route, index }) => {\n      const descriptor = descriptors[route.key];\n      const isFocused = index === deferredFocusedIndex;\n      const title = descriptor.options.title ?? route.name;\n\n      return (\n        <BottomTabsScreen\n          key={route.key}\n          {...descriptor.options}\n          tabBarItemBadgeBackgroundColor={style?.badgeBackgroundColor}\n          tabBarItemBadgeTextColor={style?.badgeTextColor}\n          tabBarItemTitlePositionAdjustment={style?.titlePositionAdjustment}\n          iconResourceName={descriptor.options.icon?.drawable}\n          icon={convertOptionsIconToPropsIcon(descriptor.options.icon)}\n          selectedIcon={convertOptionsIconToPropsIcon(descriptor.options.selectedIcon)}\n          title={title}\n          freezeContents={false}\n          tabKey={route.key}\n          isFocused={isFocused}>\n          {descriptor.render()}\n        </BottomTabsScreen>\n      );\n    });\n\n  return (\n    <BottomTabsWrapper\n      tabBarItemTitleFontColor={style?.color}\n      tabBarItemTitleFontFamily={style?.fontFamily}\n      tabBarItemTitleFontSize={style?.fontSize}\n      // Only string values are accepted by screens\n      tabBarItemTitleFontWeight={\n        style?.fontWeight\n          ? (String(style.fontWeight) as `${NonNullable<(typeof style)['fontWeight']>}`)\n          : undefined\n      }\n      tabBarItemTitleFontStyle={style?.fontStyle}\n      tabBarBackgroundColor={style?.backgroundColor}\n      tabBarBlurEffect={style?.blurEffect}\n      tabBarTintColor={style?.tintColor}\n      tabBarItemBadgeBackgroundColor={style?.badgeBackgroundColor}\n      tabBarItemRippleColor={style?.rippleColor}\n      tabBarItemLabelVisibilityMode={style?.labelVisibilityMode}\n      tabBarItemIconColor={style?.iconColor}\n      tabBarItemIconColorActive={style?.['&:active']?.iconColor ?? style?.tintColor}\n      tabBarItemTitleFontColorActive={style?.['&:active']?.color ?? style?.tintColor}\n      tabBarItemTitleFontSizeActive={style?.['&:active']?.fontSize}\n      tabBarItemActiveIndicatorColor={style?.['&:active']?.indicatorColor}\n      tabBarItemActiveIndicatorEnabled={!disableIndicator}\n      tabBarMinimizeBehavior={minimizeBehavior}\n      onNativeFocusChange={({ nativeEvent: { tabKey } }) => {\n        const descriptor = descriptors[tabKey];\n        const route = descriptor.route;\n        navigation.dispatch({\n          type: 'JUMP_TO',\n          target: state.key,\n          payload: {\n            name: route.name,\n          },\n        });\n      }}>\n      {children}\n    </BottomTabsWrapper>\n  );\n}\n\nfunction convertOptionsIconToPropsIcon(\n  icon: NativeTabOptions['icon']\n): BottomTabsScreenProps['icon'] {\n  if (!icon) {\n    return undefined;\n  }\n  if ('sf' in icon && icon.sf) {\n    return { sfSymbolName: icon.sf };\n  } else if ('src' in icon && icon.src) {\n    return { templateSource: icon.src };\n  }\n  return undefined;\n}\n\nconst supportedTabBarMinimizeBehaviorsSet = new Set<string>(SUPPORTED_TAB_BAR_MINIMIZE_BEHAVIORS);\nconst supportedTabBarItemLabelVisibilityModesSet = new Set<string>(\n  SUPPORTED_TAB_BAR_ITEM_LABEL_VISIBILITY_MODES\n);\nconst supportedBlurEffectsSet = new Set<string>(SUPPORTED_BLUR_EFFECTS);\n\nfunction BottomTabsWrapper(props: BottomTabsProps) {\n  const { tabBarMinimizeBehavior, tabBarItemLabelVisibilityMode, tabBarBlurEffect, ...rest } =\n    props;\n  if (tabBarMinimizeBehavior && !supportedTabBarMinimizeBehaviorsSet.has(tabBarMinimizeBehavior)) {\n    throw new Error(\n      `Unsupported minimizeBehavior: ${tabBarMinimizeBehavior}. Supported values are: ${SUPPORTED_TAB_BAR_MINIMIZE_BEHAVIORS.map((behavior) => `\"${behavior}\"`).join(', ')}`\n    );\n  }\n  if (\n    tabBarItemLabelVisibilityMode &&\n    !supportedTabBarItemLabelVisibilityModesSet.has(tabBarItemLabelVisibilityMode)\n  ) {\n    throw new Error(\n      `Unsupported labelVisibilityMode: ${tabBarItemLabelVisibilityMode}. Supported values are: ${SUPPORTED_TAB_BAR_ITEM_LABEL_VISIBILITY_MODES.map((mode) => `\"${mode}\"`).join(', ')}`\n    );\n  }\n  if (tabBarBlurEffect && !supportedBlurEffectsSet.has(tabBarBlurEffect)) {\n    throw new Error(\n      `Unsupported blurEffect: ${tabBarBlurEffect}. Supported values are: ${SUPPORTED_BLUR_EFFECTS.map((effect) => `\"${effect}\"`).join(', ')}`\n    );\n  }\n\n  return (\n    <BottomTabs\n      tabBarBlurEffect={tabBarBlurEffect}\n      tabBarItemLabelVisibilityMode={tabBarItemLabelVisibilityMode}\n      tabBarMinimizeBehavior={tabBarMinimizeBehavior}\n      {...rest}\n    />\n  );\n}\n"]}
+{"version":3,"file":"NativeTabsView.js","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabsView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useDeferredValue } from 'react';\nimport type { ColorValue } from 'react-native';\nimport {\n  BottomTabs,\n  BottomTabsScreen,\n  featureFlags,\n  type BottomTabsProps,\n  type BottomTabsScreenAppearance,\n  type BottomTabsScreenProps,\n} from 'react-native-screens';\n\nimport {\n  appendSelectedStyleToAppearance,\n  convertStyleToAppearance,\n  createScrollEdgeAppearanceFromOptions,\n  createStandardAppearanceFromOptions,\n} from './appearance';\nimport {\n  SUPPORTED_TAB_BAR_ITEM_LABEL_VISIBILITY_MODES,\n  SUPPORTED_TAB_BAR_MINIMIZE_BEHAVIORS,\n  type NativeTabOptions,\n  type NativeTabsViewProps,\n} from './types';\nimport { shouldTabBeVisible } from './utils';\n\n// We let native tabs to control the changes. This requires freeze to be disabled for tab bar.\n// Otherwise user may see glitches when switching between tabs.\nfeatureFlags.experiment.controlledBottomTabs = false;\n\nexport function NativeTabsView(props: NativeTabsViewProps) {\n  const {\n    builder,\n    minimizeBehavior,\n    disableIndicator,\n    focusedIndex,\n    disableTransparentOnScrollEdge,\n  } = props;\n  const { state, descriptors, navigation } = builder;\n  const { routes } = state;\n\n  const deferredFocusedIndex = useDeferredValue(focusedIndex);\n  let standardAppearance = convertStyleToAppearance({\n    ...props.labelStyle,\n    iconColor: props.iconColor,\n    blurEffect: props.blurEffect,\n    backgroundColor: props.backgroundColor,\n    badgeBackgroundColor: props.badgeBackgroundColor,\n  });\n  if (props.tintColor) {\n    standardAppearance = appendSelectedStyleToAppearance(\n      { iconColor: props.tintColor, color: props.tintColor },\n      standardAppearance\n    );\n  }\n  const scrollEdgeAppearance = convertStyleToAppearance({\n    ...props.labelStyle,\n    iconColor: props.iconColor,\n    blurEffect: disableTransparentOnScrollEdge ? props.blurEffect : 'none',\n    backgroundColor: disableTransparentOnScrollEdge ? props.backgroundColor : null,\n    badgeBackgroundColor: props.badgeBackgroundColor,\n  });\n\n  const appearances = routes.map((route) => ({\n    standardAppearance: createStandardAppearanceFromOptions(\n      descriptors[route.key].options,\n      standardAppearance\n    ),\n    scrollEdgeAppearance: createScrollEdgeAppearanceFromOptions(\n      descriptors[route.key].options,\n      scrollEdgeAppearance\n    ),\n  }));\n\n  const options = routes.map((route) => descriptors[route.key].options);\n\n  const children = routes\n    .map((route, index) => ({ route, index }))\n    .filter(({ route: { key } }) => shouldTabBeVisible(descriptors[key].options))\n    .map(({ route, index }) => {\n      const descriptor = descriptors[route.key];\n      const isFocused = index === deferredFocusedIndex;\n\n      return (\n        <Screen\n          key={route.key}\n          routeKey={route.key}\n          name={route.name}\n          descriptor={descriptor}\n          isFocused={isFocused}\n          standardAppearance={appearances[index].standardAppearance}\n          scrollEdgeAppearance={appearances[index].scrollEdgeAppearance}\n          badgeTextColor={props.badgeTextColor}\n        />\n      );\n    });\n\n  return (\n    <BottomTabsWrapper\n      // #region android props\n      tabBarItemTitleFontColor={\n        appearances[deferredFocusedIndex].standardAppearance.stacked?.normal\n          ?.tabBarItemTitleFontColor\n      }\n      tabBarItemTitleFontFamily={\n        appearances[deferredFocusedIndex].standardAppearance.stacked?.normal\n          ?.tabBarItemTitleFontFamily\n      }\n      tabBarItemTitleFontSize={\n        appearances[deferredFocusedIndex].standardAppearance.stacked?.normal\n          ?.tabBarItemTitleFontSize\n      }\n      tabBarItemTitleFontSizeActive={\n        appearances[deferredFocusedIndex].standardAppearance.stacked?.normal\n          ?.tabBarItemTitleFontSize\n      }\n      tabBarItemTitleFontWeight={\n        appearances[deferredFocusedIndex].standardAppearance.stacked?.normal\n          ?.tabBarItemTitleFontWeight\n      }\n      tabBarItemTitleFontStyle={\n        appearances[deferredFocusedIndex].standardAppearance.stacked?.normal\n          ?.tabBarItemTitleFontStyle\n      }\n      tabBarItemIconColor={\n        appearances[deferredFocusedIndex].standardAppearance.stacked?.normal?.tabBarItemIconColor\n      }\n      tabBarBackgroundColor={\n        appearances[deferredFocusedIndex].standardAppearance.tabBarBackgroundColor ??\n        props.backgroundColor ??\n        undefined\n      }\n      tabBarItemRippleColor={props.rippleColor}\n      tabBarItemLabelVisibilityMode={props.labelVisibilityMode}\n      tabBarItemIconColorActive={\n        appearances[deferredFocusedIndex].standardAppearance?.stacked?.selected\n          ?.tabBarItemIconColor ?? props?.tintColor\n      }\n      tabBarItemTitleFontColorActive={\n        appearances[deferredFocusedIndex].standardAppearance?.stacked?.selected\n          ?.tabBarItemTitleFontColor ?? props?.tintColor\n      }\n      // tabBarItemTitleFontSizeActive={activeStyle?.fontSize}\n      tabBarItemActiveIndicatorColor={\n        options[deferredFocusedIndex]?.indicatorColor ?? props?.indicatorColor\n      }\n      tabBarItemActiveIndicatorEnabled={!disableIndicator}\n      // #endregion\n      // #region iOS props\n      tabBarTintColor={props?.tintColor}\n      tabBarMinimizeBehavior={minimizeBehavior}\n      // #endregion\n      onNativeFocusChange={({ nativeEvent: { tabKey } }) => {\n        const descriptor = descriptors[tabKey];\n        const route = descriptor.route;\n        navigation.dispatch({\n          type: 'JUMP_TO',\n          target: state.key,\n          payload: {\n            name: route.name,\n          },\n        });\n      }}>\n      {children}\n    </BottomTabsWrapper>\n  );\n}\n\nfunction Screen(props: {\n  routeKey: string;\n  name: string;\n  descriptor: NativeTabsViewProps['builder']['descriptors'][string];\n  isFocused: boolean;\n  standardAppearance: BottomTabsScreenAppearance;\n  scrollEdgeAppearance: BottomTabsScreenAppearance;\n  badgeTextColor: ColorValue | undefined;\n}) {\n  const {\n    routeKey,\n    name,\n    descriptor,\n    isFocused,\n    standardAppearance,\n    scrollEdgeAppearance,\n    badgeTextColor,\n  } = props;\n  const title = descriptor.options.title ?? name;\n\n  let icon = convertOptionsIconToPropsIcon(descriptor.options.icon);\n\n  // Fix for an issue in screens\n  if (descriptor.options.role) {\n    switch (descriptor.options.role) {\n      case 'search':\n        icon = { sfSymbolName: 'magnifyingglass' };\n    }\n  }\n\n  return (\n    <BottomTabsScreen\n      {...descriptor.options}\n      tabBarItemBadgeBackgroundColor={\n        standardAppearance.stacked?.normal?.tabBarItemBadgeBackgroundColor\n      }\n      tabBarItemBadgeTextColor={badgeTextColor}\n      standardAppearance={standardAppearance}\n      scrollEdgeAppearance={scrollEdgeAppearance}\n      iconResourceName={getAndroidIconResourceName(descriptor.options.icon)}\n      iconResource={getAndroidIconResource(descriptor.options.icon)}\n      icon={icon}\n      selectedIcon={convertOptionsIconToPropsIcon(descriptor.options.selectedIcon)}\n      title={title}\n      freezeContents={false}\n      tabKey={routeKey}\n      systemItem={descriptor.options.role}\n      isFocused={isFocused}>\n      {descriptor.render()}\n    </BottomTabsScreen>\n  );\n}\n\nfunction convertOptionsIconToPropsIcon(\n  icon: NativeTabOptions['icon']\n): BottomTabsScreenProps['icon'] {\n  if (!icon) {\n    return undefined;\n  }\n  if ('sf' in icon && icon.sf) {\n    return { sfSymbolName: icon.sf };\n  } else if ('src' in icon && icon.src) {\n    return { templateSource: icon.src };\n  }\n  return undefined;\n}\n\nfunction getAndroidIconResource(\n  icon: NativeTabOptions['icon']\n): BottomTabsScreenProps['iconResource'] {\n  if (icon && 'src' in icon && icon.src) {\n    return icon.src;\n  }\n  return undefined;\n}\n\nfunction getAndroidIconResourceName(\n  icon: NativeTabOptions['icon']\n): BottomTabsScreenProps['iconResourceName'] {\n  if (icon && 'drawable' in icon && icon.drawable) {\n    return icon.drawable;\n  }\n  return undefined;\n}\n\nconst supportedTabBarMinimizeBehaviorsSet = new Set<string>(SUPPORTED_TAB_BAR_MINIMIZE_BEHAVIORS);\nconst supportedTabBarItemLabelVisibilityModesSet = new Set<string>(\n  SUPPORTED_TAB_BAR_ITEM_LABEL_VISIBILITY_MODES\n);\n\nfunction BottomTabsWrapper(props: BottomTabsProps) {\n  let { tabBarMinimizeBehavior, tabBarItemLabelVisibilityMode, ...rest } = props;\n  if (tabBarMinimizeBehavior && !supportedTabBarMinimizeBehaviorsSet.has(tabBarMinimizeBehavior)) {\n    console.warn(\n      `Unsupported minimizeBehavior: ${tabBarMinimizeBehavior}. Supported values are: ${SUPPORTED_TAB_BAR_MINIMIZE_BEHAVIORS.map((behavior) => `\"${behavior}\"`).join(', ')}`\n    );\n    tabBarMinimizeBehavior = undefined;\n  }\n  if (\n    tabBarItemLabelVisibilityMode &&\n    !supportedTabBarItemLabelVisibilityModesSet.has(tabBarItemLabelVisibilityMode)\n  ) {\n    console.warn(\n      `Unsupported labelVisibilityMode: ${tabBarItemLabelVisibilityMode}. Supported values are: ${SUPPORTED_TAB_BAR_ITEM_LABEL_VISIBILITY_MODES.map((mode) => `\"${mode}\"`).join(', ')}`\n    );\n    tabBarItemLabelVisibilityMode = undefined;\n  }\n\n  return (\n    <BottomTabs\n      tabBarItemLabelVisibilityMode={tabBarItemLabelVisibilityMode}\n      tabBarMinimizeBehavior={tabBarMinimizeBehavior}\n      {...rest}\n    />\n  );\n}\n"]}

package/build/native-tabs/NativeBottomTabs/NativeTabsView.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NativeTabsView.web.d.ts","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabsView.web.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAInD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAuDxD"}
+{"version":3,"file":"NativeTabsView.web.d.ts","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabsView.web.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAoB,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAIrE,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAwDxD"}