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

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

@@ -1,5 +1,7 @@
 import { type ReactElement, type ReactNode } from 'react';
+import { NativeTabsTriggerTabBar } from './NativeTabsTriggerTabBar';
 import type { ExtendedNativeTabOptions, NativeTabTriggerProps } from './types';
+import { type IconProps } from '../common/elements';
 /**
  * The component used to customize the native tab options both in the _layout file and from the tab screen.
  *
@@ -40,9 +42,14 @@ 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 appendIconOptions(options: ExtendedNativeTabOptions, props: IconProps): void;
 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,EAGxB,qBAAqB,EACtB,MAAM,SAAS,CAAC;AAGjB,OAAO,EAKL,KAAK,SAAS,EAKf,MAAM,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;AAuBD,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,wBAAwB,EAAE,KAAK,EAAE,SAAS,QA8BpF;AAiFD,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,13 @@
 "use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NativeTabTrigger = NativeTabTrigger;
+exports.NativeTabTrigger = void 0;
 exports.convertTabPropsToOptions = convertTabPropsToOptions;
+exports.appendIconOptions = appendIconOptions;
 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 +51,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 +69,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 +82,147 @@ 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;
+            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) {
+        const icon = convertIconSrcToIconOption(props);
+        options.icon = icon?.icon;
+        options.selectedIcon = icon?.selectedIcon;
+    }
+    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 convertIconSrcToIconOption(icon) {
+    if (icon && icon.src) {
+        const { defaultIcon, selected } = typeof icon.src === 'object' && 'selected' in icon.src
+            ? { defaultIcon: icon.src.default, selected: icon.src.selected }
+            : { defaultIcon: icon.src };
+        const options = {};
+        options.icon = convertSrcOrComponentToSrc(defaultIcon);
+        options.selectedIcon = convertSrcOrComponentToSrc(selected);
+        return options;
+    }
+    return undefined;
+}
+function convertSrcOrComponentToSrc(src) {
+    if (src) {
+        if ((0, react_1.isValidElement)(src)) {
+            if (src.type === elements_1.VectorIcon) {
+                const props = src.props;
+                return { src: props.family.getImageSource(props.name, 24, 'white') };
             }
-            if (process.env.EXPO_OS === 'android') {
-                acc.icon = { drawable: child.props.drawable };
-                acc.selectedIcon = undefined;
+            else {
+                console.warn('Only VectorIcon is supported as a React element in Icon.src');
             }
         }
-        return acc;
-    }, { ...initialOptions });
+        else {
+            return { src };
+        }
+    }
+    return undefined;
+}
+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":";AAAA,YAAY,CAAC;;;AA8Fb,4DAwCC;AAuBD,8CA8BC;AAiFD,gDAgCC;AA1SD,qDAAmE;AACnE,iCAA0E;AAG1E,uEAAoE;AAOpE,mCAAuE;AACvE,yEAAsE;AACtE,iDAU4B;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,SAAS,oBAAoB,CAAC,KAA4B;IACxD,MAAM,KAAK,GAAG,IAAA,iBAAQ,GAAE,CAAC;IACzB,MAAM,UAAU,GAAG,IAAA,sBAAa,GAAE,CAAC;IACnC,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,CAAC;IAEzC,IAAA,yCAAmB,EAAC,GAAG,EAAE;QACvB,6DAA6D;QAC7D,yEAAyE;QACzE,iDAAiD;QACjD,IAAI,SAAS,EAAE,CAAC;YACd,IAAI,UAAU,CAAC,QAAQ,EAAE,EAAE,IAAI,KAAK,KAAK,EAAE,CAAC;gBAC1C,MAAM,IAAI,KAAK,CACb,wEAAwE,KAAK,CAAC,IAAI,EAAE,CACrF,CAAC;YACJ,CAAC;YACD,MAAM,OAAO,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;YAChD,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvB,OAAO,IAAI,CAAC;AACd,CAAC;AAEY,QAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,oBAAoB,EAAE;IAClE,MAAM,EAAE,iDAAuB;CAChC,CAAC,CAAC;AAEH,SAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,eAAe,EACf,kBAAkB,GACI;IACtB,MAAM,cAAc,GAA6B;QAC/C,GAAG,OAAO;QACV,MAAM,EAAE,CAAC,CAAC,MAAM;QAChB,cAAc,EAAE;YACd,oBAAoB,EAAE;gBACpB,SAAS,EAAE,CAAC,eAAe;gBAC3B,WAAW,EAAE,CAAC,kBAAkB;aACjC;SACF;QACD,IAAI,EAAE,IAAI,IAAI,OAAO,EAAE,IAAI;KAC5B,CAAC;IACF,MAAM,eAAe,GAAG,IAAA,qCAA6B,EAAC,QAAQ,EAAE;QAC9D,gBAAK;QACL,gBAAK;QACL,eAAI;QACJ,iDAAuB;KACxB,CAAC,CAAC;IACH,OAAO,eAAe,CAAC,MAAM,CAC3B,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QACb,IAAI,IAAA,qBAAa,EAAC,KAAK,EAAE,gBAAK,CAAC,EAAE,CAAC;YAChC,kBAAkB,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;QACvC,CAAC;aAAM,IAAI,IAAA,qBAAa,EAAC,KAAK,EAAE,gBAAK,CAAC,EAAE,CAAC;YACvC,kBAAkB,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;QACvC,CAAC;aAAM,IAAI,IAAA,qBAAa,EAAC,KAAK,EAAE,eAAI,CAAC,EAAE,CAAC;YACtC,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC;aAAM,IAAI,IAAA,qBAAa,EAAC,KAAK,EAAE,iDAAuB,CAAC,EAAE,CAAC;YACzD,mBAAmB,CAAC,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;QACxC,CAAC;QACD,OAAO,GAAG,CAAC;IACb,CAAC,EACD,EAAE,GAAG,cAAc,EAAE,CACtB,CAAC;AACJ,CAAC;AAED,SAAS,kBAAkB,CAAC,OAAiC,EAAE,KAAiB;IAC9E,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;QACnB,OAAO,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;QAC5C,OAAO,CAAC,4BAA4B,GAAG,KAAK,CAAC,uBAAuB,CAAC;IACvE,CAAC;SAAM,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;QACzB,kEAAkE;QAClE,4EAA4E;QAC5E,kKAAkK;QAClK,OAAO,CAAC,UAAU,GAAG,GAAG,CAAC;IAC3B,CAAC;AACH,CAAC;AAED,SAAS,kBAAkB,CAAC,OAAiC,EAAE,KAAiB;IAC9E,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;QACjB,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;IACrB,CAAC;SAAM,CAAC;QACN,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC;QAC/B,OAAO,CAAC,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAC;IACnD,CAAC;AACH,CAAC;AAED,SAAgB,iBAAiB,CAAC,OAAiC,EAAE,KAAgB;IACnF,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,CAAC,GAAG,EAAE,CAAC;QAChC,MAAM,IAAI,GAAG,0BAA0B,CAAC,KAAK,CAAC,CAAC;QAC/C,OAAO,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,CAAC;QAC1B,OAAO,CAAC,YAAY,GAAG,IAAI,EAAE,YAAY,CAAC;IAC5C,CAAC;SAAM,IAAI,IAAI,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,KAAK,KAAK,EAAE,CAAC;QAC1D,IAAI,OAAO,KAAK,CAAC,EAAE,KAAK,QAAQ,EAAE,CAAC;YACjC,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC,EAAE;gBACrB,CAAC,CAAC;oBACE,EAAE,EAAE,KAAK,CAAC,EAAE;iBACb;gBACH,CAAC,CAAC,SAAS,CAAC;YACd,OAAO,CAAC,YAAY,GAAG,SAAS,CAAC;QACnC,CAAC;aAAM,IAAI,KAAK,CAAC,EAAE,EAAE,CAAC;YACpB,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC,EAAE,CAAC,OAAO;gBAC7B,CAAC,CAAC;oBACE,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,OAAO;iBACrB;gBACH,CAAC,CAAC,SAAS,CAAC;YACd,OAAO,CAAC,YAAY,GAAG,KAAK,CAAC,EAAE,CAAC,QAAQ;gBACtC,CAAC,CAAC;oBACE,EAAE,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ;iBACtB;gBACH,CAAC,CAAC,SAAS,CAAC;QAChB,CAAC;IACH,CAAC;SAAM,IAAI,UAAU,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;QACpE,OAAO,CAAC,IAAI,GAAG,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC;QAC5C,OAAO,CAAC,YAAY,GAAG,SAAS,CAAC;IACnC,CAAC;IACD,OAAO,CAAC,iBAAiB,GAAG,KAAK,CAAC,aAAa,CAAC;AAClD,CAAC;AAED,SAAS,0BAA0B,CACjC,IAAuC;IAEvC,IAAI,IAAI,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC;QACrB,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAC7B,OAAO,IAAI,CAAC,GAAG,KAAK,QAAQ,IAAI,UAAU,IAAI,IAAI,CAAC,GAAG;YACpD,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE;YAChE,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC;QAEhC,MAAM,OAAO,GAAoD,EAAE,CAAC;QACpE,OAAO,CAAC,IAAI,GAAG,0BAA0B,CAAC,WAAW,CAAC,CAAC;QACvD,OAAO,CAAC,YAAY,GAAG,0BAA0B,CAAC,QAAQ,CAAC,CAAC;QAC5D,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,0BAA0B,CAAC,GAAmD;IACrF,IAAI,GAAG,EAAE,CAAC;QACR,IAAI,IAAA,sBAAc,EAAC,GAAG,CAAC,EAAE,CAAC;YACxB,IAAI,GAAG,CAAC,IAAI,KAAK,qBAAU,EAAE,CAAC;gBAC5B,MAAM,KAAK,GAAG,GAAG,CAAC,KAAgC,CAAC;gBACnD,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,OAAO,CAAC,EAAE,CAAC;YACvE,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,IAAI,CAAC,6DAA6D,CAAC,CAAC;YAC9E,CAAC;QACH,CAAC;aAAM,CAAC;YACN,OAAO,EAAE,GAAG,EAAE,CAAC;QACjB,CAAC;IACH,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,mBAAmB,CAC1B,OAAiC,EACjC,KAAmC;IAEnC,MAAM,EACJ,eAAe,EACf,UAAU,EACV,SAAS,EACT,8BAA8B,EAC9B,oBAAoB,EACpB,cAAc,EACd,cAAc,EACd,UAAU,GACX,GAAG,KAAK,CAAC;IAEV,IAAI,eAAe,EAAE,CAAC;QACpB,OAAO,CAAC,eAAe,GAAG,eAAe,CAAC;IAC5C,CAAC;IACD,uDAAuD;IACvD,mDAAmD;IACnD,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;QACtC,IAAI,UAAU,EAAE,CAAC;YACf,OAAO,CAAC,UAAU,GAAG,UAAU,CAAC;QAClC,CAAC;QACD,IAAI,SAAS,EAAE,CAAC;YACd,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;QAChC,CAAC;QACD,IAAI,8BAA8B,KAAK,SAAS,EAAE,CAAC;YACjD,OAAO,CAAC,8BAA8B,GAAG,8BAA8B,CAAC;QAC1E,CAAC;QACD,IAAI,oBAAoB,EAAE,CAAC;YACzB,OAAO,CAAC,oBAAoB,GAAG,oBAAoB,CAAC;QACtD,CAAC;QACD,IAAI,cAAc,EAAE,CAAC;YACnB,OAAO,CAAC,cAAc,GAAG,cAAc,CAAC;QAC1C,CAAC;QACD,IAAI,cAAc,EAAE,CAAC;YACnB,OAAO,CAAC,cAAc,GAAG,cAAc,CAAC;QAC1C,CAAC;QACD,IAAI,UAAU,EAAE,CAAC;YACf,OAAO,CAAC,UAAU,GAAG,UAAU,CAAC;QAClC,CAAC;IACH,CAAC;AACH,CAAC;AAED,SAAgB,kBAAkB,CAChC,KAAgB,EAChB,UAAmB;IAEnB,IAAI,IAAA,sBAAc,EAAC,KAAK,CAAC,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,wBAAgB,EAAE,CAAC;QACtE,IACE,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ;YAC/B,KAAK,CAAC,KAAK;YACX,MAAM,IAAI,KAAK,CAAC,KAAK;YACrB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,EACjB,CAAC;YACD,MAAM,IAAI,KAAK,CACb,uDAAuD,UAAU,8EAA8E,CAChJ,CAAC;QACJ,CAAC;QAED,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;YAC1C,IACE,CAAC,WAAW,EAAE,cAAc,CAAC,CAAC,IAAI,CAChC,CAAC,GAAG,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,IAAI,GAAG,IAAI,KAAK,CAAC,KAAK,CAC9E,EACD,CAAC;gBACD,MAAM,IAAI,KAAK,CACb,uDAAuD,UAAU,0GAA0G,CAC5K,CAAC;YACJ,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC","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  NativeTabOptions,\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  type SourceIconCombination,\n  VectorIcon,\n  type VectorIconProps,\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\nexport function appendIconOptions(options: ExtendedNativeTabOptions, props: IconProps) {\n  if ('src' in props && props.src) {\n    const icon = convertIconSrcToIconOption(props);\n    options.icon = icon?.icon;\n    options.selectedIcon = icon?.selectedIcon;\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 convertIconSrcToIconOption(\n  icon: SourceIconCombination | undefined\n): Pick<NativeTabOptions, 'icon' | 'selectedIcon'> | undefined {\n  if (icon && icon.src) {\n    const { defaultIcon, selected } =\n      typeof icon.src === 'object' && 'selected' in icon.src\n        ? { defaultIcon: icon.src.default, selected: icon.src.selected }\n        : { defaultIcon: icon.src };\n\n    const options: Pick<NativeTabOptions, 'icon' | 'selectedIcon'> = {};\n    options.icon = convertSrcOrComponentToSrc(defaultIcon);\n    options.selectedIcon = convertSrcOrComponentToSrc(selected);\n    return options;\n  }\n\n  return undefined;\n}\n\nfunction convertSrcOrComponentToSrc(src: ImageSourcePropType | ReactElement | undefined) {\n  if (src) {\n    if (isValidElement(src)) {\n      if (src.type === VectorIcon) {\n        const props = src.props as VectorIconProps<string>;\n        return { src: props.family.getImageSource(props.name, 24, 'white') };\n      } else {\n        console.warn('Only VectorIcon is supported as a React element in Icon.src');\n      }\n    } else {\n      return { src };\n    }\n  }\n  return undefined;\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,KAAyD,MAAM,OAAO,CAAC;AAkB9E,OAAO,EAKL,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,58 @@ function NativeTabsView(props) {
       {children}
     </BottomTabsWrapper>);
 }
+// TODO: remove after fix is merged in screens
+const rolesIcons = {
+    bookmarks: 'book.fill',
+    contacts: 'person.crop.circle.fill',
+    downloads: 'square.and.arrow.down.fill',
+    favorites: 'star.fill',
+    featured: 'star.fill',
+    history: 'clock.fill',
+    more: 'ellipsis',
+    mostRecent: 'clock.fill',
+    mostViewed: 'list.number',
+    recents: 'clock.fill',
+    search: 'magnifyingglass',
+    topRated: 'star.fill',
+};
+function Screen(props) {
+    const { routeKey, name, descriptor, isFocused, standardAppearance, scrollEdgeAppearance, badgeTextColor, } = props;
+    const title = descriptor.options.title ?? name;
+    let icon = useAwaitedScreensIcon(descriptor.options.icon);
+    let selectedIcon = useAwaitedScreensIcon(descriptor.options.selectedIcon);
+    // Fix for an issue in screens
+    if (descriptor.options.role) {
+        if (descriptor.options.role && descriptor.options.role in rolesIcons) {
+            icon = { sf: rolesIcons[descriptor.options.role] };
+            selectedIcon = icon;
+        }
+    }
+    return (<react_native_screens_1.BottomTabsScreen {...descriptor.options} tabBarItemBadgeBackgroundColor={standardAppearance.stacked?.normal?.tabBarItemBadgeBackgroundColor} tabBarItemBadgeTextColor={badgeTextColor} standardAppearance={standardAppearance} scrollEdgeAppearance={scrollEdgeAppearance} iconResourceName={getAndroidIconResourceName(icon)} iconResource={getAndroidIconResource(icon)} icon={convertOptionsIconToPropsIcon(icon)} selectedIcon={convertOptionsIconToPropsIcon(selectedIcon)} title={title} freezeContents={false} tabKey={routeKey} systemItem={descriptor.options.role} isFocused={isFocused}>
+      {descriptor.render()}
+    </react_native_screens_1.BottomTabsScreen>);
+}
+function useAwaitedScreensIcon(icon) {
+    const src = icon && typeof icon === 'object' && 'src' in icon ? icon.src : undefined;
+    const [awaitedIcon, setAwaitedIcon] = (0, react_1.useState)(undefined);
+    (0, react_1.useEffect)(() => {
+        const loadIcon = async () => {
+            if (src && src instanceof Promise) {
+                const currentAwaitedIcon = { src: await src };
+                setAwaitedIcon(currentAwaitedIcon);
+            }
+        };
+        loadIcon();
+        // Checking `src` rather then icon here, to avoid unnecessary re-renders
+        // The icon object can be recreated, while src should stay the same
+        // In this case as we control `VectorIcon`, it will only change if `family` or `name` props change
+        // So we should be safe with promise resolving
+    }, [src]);
+    return (0, react_1.useMemo)(() => (isAwaitedIcon(icon) ? icon : awaitedIcon), [awaitedIcon, icon]);
+}
+function isAwaitedIcon(icon) {
+    return !icon || !('src' in icon && icon.src instanceof Promise);
+}
 function convertOptionsIconToPropsIcon(icon) {
     if (!icon) {
         return undefined;
@@ -87,21 +174,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