expo-router 5.2.0-canary-20250729-d8899ae → 6.0.0-beta.0

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

@@ -0,0 +1,153 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NativeTabTrigger = NativeTabTrigger;
+exports.convertTabPropsToOptions = convertTabPropsToOptions;
+exports.isNativeTabTrigger = isNativeTabTrigger;
+const native_1 = require("@react-navigation/native");
+const react_1 = require("react");
+const utils_1 = require("./utils");
+const useSafeLayoutEffect_1 = require("../../views/useSafeLayoutEffect");
+const elements_1 = require("../common/elements");
+/**
+ * The component used to customize the native tab options both in the _layout file and from the tab screen.
+ *
+ * When used in the _layout file, you need to provide a `name` prop.
+ * When used in the tab screen, the `name` prop takes no effect.
+ *
+ * @example
+ * ```tsx
+ * // In _layout file
+ * import { NativeTabs } from 'expo-router/unstable-native-tabs';
+ *
+ * export default function Layout() {
+ *   return (
+ *     <NativeTabs>
+ *       <NativeTabs.Trigger name="home" />
+ *       <NativeTabs.Trigger name="settings" />
+ *     </NativeTabs>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // In a tab screen
+ * import { NativeTabs } from 'expo-router/unstable-native-tabs';
+ *
+ * export default function HomeScreen() {
+ *   return (
+ *     <View>
+ *       <NativeTabs.Trigger>
+ *         <Label>Home</Label>
+ *       </NativeTabs.Trigger>
+ *       <Text>This is home screen!</Text>
+ *     </View>
+ *   );
+ * }
+ *
+ * **Note:** You can use the alias `NativeTabs.Trigger` for this component.
+ */
+function NativeTabTrigger(props) {
+    const route = (0, native_1.useRoute)();
+    const navigation = (0, native_1.useNavigation)();
+    const isFocused = navigation.isFocused();
+    (0, useSafeLayoutEffect_1.useSafeLayoutEffect)(() => {
+        // This will cause the tab to update only when it is focused.
+        // As long as all tabs are loaded at the start, we don't need this check.
+        // It is here to ensure similar behavior to stack
+        if (isFocused) {
+            if (navigation.getState()?.type !== 'tab') {
+                throw new Error(`Trigger component can only be used in the tab screen. Current route: ${route.name}`);
+            }
+            const options = convertTabPropsToOptions(props);
+            navigation.setOptions(options);
+        }
+    }, [isFocused, props]);
+    return null;
+}
+function convertTabPropsToOptions({ options, hidden, children, disablePopToTop, disableScrollToTop, }) {
+    const initialOptions = {
+        ...options,
+        hidden: !!hidden,
+        specialEffects: {
+            repeatedTabSelection: {
+                popToRoot: !disablePopToTop,
+                scrollToTop: !disableScrollToTop,
+            },
+        },
+    };
+    const allowedChildren = (0, utils_1.filterAllowedChildrenElements)(children, [elements_1.Badge, elements_1.Label, elements_1.Icon]);
+    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 = ' ';
+            }
+        }
+        else if ((0, utils_1.isChildOfType)(child, elements_1.Label)) {
+            if (child.props.hidden) {
+                acc.title = '';
+            }
+            else {
+                acc.title = child.props.children;
+            }
+        }
+        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;
+            }
+        }
+        return acc;
+    }, { ...initialOptions });
+}
+function isNativeTabTrigger(child, contextKey) {
+    if ((0, react_1.isValidElement)(child) && child && child.type === NativeTabTrigger) {
+        if (typeof child.props === 'object' &&
+            child.props &&
+            'name' in child.props &&
+            !child.props.name) {
+            throw new Error(`<Trigger /> component in \`default export\` at \`app${contextKey}/_layout\` must have a \`name\` prop when used as a child of a Layout Route.`);
+        }
+        if (process.env.NODE_ENV !== 'production') {
+            if (['component', 'getComponent'].some((key) => child.props && typeof child.props === 'object' && key in child.props)) {
+                throw new Error(`<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`);
+            }
+        }
+        return true;
+    }
+    return false;
+}
+//# sourceMappingURL=NativeTabTrigger.js.map

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

@@ -0,0 +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 * **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"]}

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

@@ -0,0 +1,24 @@
+import { NativeTabTrigger } from './NativeTabTrigger';
+import type { NativeTabsProps } from './types';
+/**
+ * The component used to create native tabs layout.
+ *
+ * @example
+ * ```tsx
+ * // In _layout file
+ * import { NativeTabs } from 'expo-router/unstable-native-tabs';
+ *
+ * export default function Layout() {
+ *   return (
+ *     <NativeTabs>
+ *       <NativeTabs.Trigger name="home" />
+ *       <NativeTabs.Trigger name="settings" />
+ *     </NativeTabs>
+ *   );
+ * }
+ * ```
+ */
+export declare const NativeTabs: ((props: NativeTabsProps) => import("react").JSX.Element) & {
+    Trigger: typeof NativeTabTrigger;
+};
+//# sourceMappingURL=NativeTabs.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NativeTabs = void 0;
+const NativeBottomTabsNavigator_1 = require("./NativeBottomTabsNavigator");
+const NativeTabTrigger_1 = require("./NativeTabTrigger");
+/**
+ * The component used to create native tabs layout.
+ *
+ * @example
+ * ```tsx
+ * // In _layout file
+ * import { NativeTabs } from 'expo-router/unstable-native-tabs';
+ *
+ * export default function Layout() {
+ *   return (
+ *     <NativeTabs>
+ *       <NativeTabs.Trigger name="home" />
+ *       <NativeTabs.Trigger name="settings" />
+ *     </NativeTabs>
+ *   );
+ * }
+ * ```
+ */
+exports.NativeTabs = Object.assign((props) => {
+    return <NativeBottomTabsNavigator_1.NativeTabsNavigatorWithContext {...props}/>;
+}, { Trigger: NativeTabTrigger_1.NativeTabTrigger });
+//# sourceMappingURL=NativeTabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NativeTabs.js","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabs.tsx"],"names":[],"mappings":";;;AAAA,2EAA6E;AAC7E,yDAAsD;AAGtD;;;;;;;;;;;;;;;;;GAiBG;AACU,QAAA,UAAU,GAAG,MAAM,CAAC,MAAM,CACrC,CAAC,KAAsB,EAAE,EAAE;IACzB,OAAO,CAAC,0DAA8B,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;AACvD,CAAC,EACD,EAAE,OAAO,EAAE,mCAAgB,EAAE,CAC9B,CAAC","sourcesContent":["import { NativeTabsNavigatorWithContext } from './NativeBottomTabsNavigator';\nimport { NativeTabTrigger } from './NativeTabTrigger';\nimport type { NativeTabsProps } from './types';\n\n/**\n * The component used to create native tabs layout.\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 */\nexport const NativeTabs = Object.assign(\n  (props: NativeTabsProps) => {\n    return <NativeTabsNavigatorWithContext {...props} />;\n  },\n  { Trigger: NativeTabTrigger }\n);\n"]}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { NativeTabsViewProps } from './types';
+export declare function NativeTabsView(props: NativeTabsViewProps): React.JSX.Element;
+//# sourceMappingURL=NativeTabsView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NativeTabsView.d.ts","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabsView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,OAAO,KAAK,EAAoB,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAYrE,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAkGxD"}

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

@@ -0,0 +1,116 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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 utils_1 = require("./utils");
+const linking_1 = require("../../link/linking");
+// 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;
+// TODO: ENG-16896: Enable freeze globally and disable only for NativeTabsView
+(0, react_native_screens_1.enableFreeze)(false);
+// TODO: Add support for dynamic params inside a route
+function NativeTabsView(props) {
+    const { builder, style, minimizeBehavior, disableIndicator } = props;
+    const { state, descriptors, navigation } = builder;
+    const { routes } = state;
+    let focusedIndex = state.index;
+    const isAnyRouteFocused = routes[focusedIndex].key &&
+        descriptors[routes[focusedIndex].key] &&
+        (0, utils_1.shouldTabBeVisible)(descriptors[routes[focusedIndex].key].options);
+    if (!isAnyRouteFocused) {
+        if (process.env.NODE_ENV !== 'production') {
+            throw new Error(`The focused tab in NativeTabsView cannot be displayed. Make sure path is correct and the route is not hidden. Path: "${(0, linking_1.getPathFromState)(state)}"`);
+        }
+        // Set focusedIndex to the first visible tab
+        focusedIndex = routes.findIndex((route) => (0, utils_1.shouldTabBeVisible)(descriptors[route.key].options));
+    }
+    // This is flag that is set to true, when the transition is executed by native tab change
+    // In this case we don't need to change the isFocused of the screens, because the transition will happen on native side
+    const isDuringNativeTransition = (0, react_1.useRef)(false);
+    // This is the last index that was not part of a native transition, e.g navigation from link
+    const lastNotNativeTransitionIndex = (0, react_1.useRef)(focusedIndex);
+    // If the flag was set in the onNativeFocusChange handler, it will be still true here
+    // It is set to false, later in this function
+    // Thus if it is false, we know that the transition was not triggered by a native tab change
+    // and we need to reset the lastNotNativeTransitionIndex
+    if (!isDuringNativeTransition.current) {
+        lastNotNativeTransitionIndex.current = focusedIndex;
+    }
+    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];
+        // In case of native transition we want to keep the last focused index
+        // Otherwise the lastNotNativeTransitionIndex is set to focusedIndex in the if above this statement
+        const isFocused = index === lastNotNativeTransitionIndex.current;
+        const title = descriptor.options.title ?? route.name;
+        return (<react_native_screens_1.BottomTabsScreen key={route.key} {...descriptor.options} iconResourceName={descriptor.options.icon?.drawable} icon={convertOptionsIconToPropsIcon(descriptor.options.icon)} selectedIcon={convertOptionsIconToPropsIcon(descriptor.options.selectedIcon)} title={title} tabKey={route.key} isFocused={isFocused}>
+          {descriptor.render()}
+        </react_native_screens_1.BottomTabsScreen>);
+    });
+    // The native render is over, we can reset the flag
+    isDuringNativeTransition.current = false;
+    return (<react_native_screens_1.BottomTabs tabBarItemTitleFontColor={style?.color} tabBarItemTitleFontFamily={style?.fontFamily} tabBarItemTitleFontSize={style?.fontSize} tabBarItemTitleFontWeight={style?.fontWeight} 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 } }) => {
+            const descriptor = descriptors[tabKey];
+            const route = descriptor.route;
+            navigation.dispatch({
+                type: 'JUMP_TO',
+                target: state.key,
+                payload: {
+                    name: route.name,
+                },
+            });
+            isDuringNativeTransition.current = true;
+        }}>
+      {children}
+    </react_native_screens_1.BottomTabs>);
+}
+function convertOptionsIconToPropsIcon(icon) {
+    if (!icon) {
+        return undefined;
+    }
+    if ('sf' in icon && icon.sf) {
+        return { sfSymbolName: icon.sf };
+    }
+    else if ('src' in icon && icon.src) {
+        return { templateSource: icon.src };
+    }
+    return undefined;
+}
+//# sourceMappingURL=NativeTabsView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NativeTabsView.js","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabsView.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useRef } from 'react';\nimport {\n  BottomTabs,\n  BottomTabsScreen,\n  enableFreeze,\n  featureFlags,\n  type BottomTabsScreenProps,\n} from 'react-native-screens';\n\nimport type { NativeTabOptions, NativeTabsViewProps } from './types';\nimport { shouldTabBeVisible } from './utils';\nimport { getPathFromState } from '../../link/linking';\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\n// TODO: ENG-16896: Enable freeze globally and disable only for NativeTabsView\nenableFreeze(false);\n\n// TODO: Add support for dynamic params inside a route\nexport function NativeTabsView(props: NativeTabsViewProps) {\n  const { builder, style, minimizeBehavior, disableIndicator } = props;\n  const { state, descriptors, navigation } = builder;\n  const { routes } = state;\n\n  let focusedIndex = state.index;\n  const isAnyRouteFocused =\n    routes[focusedIndex].key &&\n    descriptors[routes[focusedIndex].key] &&\n    shouldTabBeVisible(descriptors[routes[focusedIndex].key].options);\n\n  if (!isAnyRouteFocused) {\n    if (process.env.NODE_ENV !== 'production') {\n      throw new Error(\n        `The focused tab in NativeTabsView cannot be displayed. Make sure path is correct and the route is not hidden. Path: \"${getPathFromState(state)}\"`\n      );\n    }\n    // Set focusedIndex to the first visible tab\n    focusedIndex = routes.findIndex((route) => shouldTabBeVisible(descriptors[route.key].options));\n  }\n\n  // This is flag that is set to true, when the transition is executed by native tab change\n  // In this case we don't need to change the isFocused of the screens, because the transition will happen on native side\n  const isDuringNativeTransition = useRef<boolean>(false);\n  // This is the last index that was not part of a native transition, e.g navigation from link\n  const lastNotNativeTransitionIndex = useRef<number>(focusedIndex);\n\n  // If the flag was set in the onNativeFocusChange handler, it will be still true here\n  // It is set to false, later in this function\n  // Thus if it is false, we know that the transition was not triggered by a native tab change\n  // and we need to reset the lastNotNativeTransitionIndex\n  if (!isDuringNativeTransition.current) {\n    lastNotNativeTransitionIndex.current = focusedIndex;\n  }\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      // In case of native transition we want to keep the last focused index\n      // Otherwise the lastNotNativeTransitionIndex is set to focusedIndex in the if above this statement\n      const isFocused = index === lastNotNativeTransitionIndex.current;\n      const title = descriptor.options.title ?? route.name;\n\n      return (\n        <BottomTabsScreen\n          key={route.key}\n          {...descriptor.options}\n          iconResourceName={descriptor.options.icon?.drawable}\n          icon={convertOptionsIconToPropsIcon(descriptor.options.icon)}\n          selectedIcon={convertOptionsIconToPropsIcon(descriptor.options.selectedIcon)}\n          title={title}\n          tabKey={route.key}\n          isFocused={isFocused}>\n          {descriptor.render()}\n        </BottomTabsScreen>\n      );\n    });\n\n  // The native render is over, we can reset the flag\n  isDuringNativeTransition.current = false;\n\n  return (\n    <BottomTabs\n      tabBarItemTitleFontColor={style?.color}\n      tabBarItemTitleFontFamily={style?.fontFamily}\n      tabBarItemTitleFontSize={style?.fontSize}\n      tabBarItemTitleFontWeight={style?.fontWeight}\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        isDuringNativeTransition.current = true;\n      }}>\n      {children}\n    </BottomTabs>\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"]}

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

@@ -0,0 +1,166 @@
+import type { DefaultRouterOptions, ParamListBase, TabNavigationState, TabRouterOptions, useNavigationBuilder } from '@react-navigation/native';
+import type { PropsWithChildren } from 'react';
+import type { ColorValue, ImageSourcePropType, TextStyle } from 'react-native';
+import type { BottomTabsProps, BottomTabsScreenProps, TabBarItemLabelVisibilityMode } from 'react-native-screens';
+import type { SFSymbol } from 'sf-symbols-typescript';
+export type NativeTabOptions = Omit<BottomTabsScreenProps, 'children' | 'placeholder' | 'onWillAppear' | 'onDidAppear' | 'onWillDisappear' | 'onDidDisappear' | 'isFocused' | 'tabKey' | 'icon' | 'selectedIcon' | 'iconResourceName' | 'specialEffects'> & DefaultRouterOptions & {
+    /**
+     * The icon to display in the tab bar.
+     * @platform android
+     * @platform iOS
+     */
+    icon?: SfSymbolOrImageSource & {
+        /**
+         * The name of the drawable resource to use as an icon.
+         * @platform android
+         */
+        drawable?: string;
+    };
+    /**
+     * The icon to display when the tab is selected.
+     * @platform iOS
+     */
+    selectedIcon?: SfSymbolOrImageSource;
+};
+export type SfSymbolOrImageSource = {
+    /**
+     * The name of the SF Symbol to use as an icon.
+     * @platform iOS
+     */
+    sf?: SFSymbol;
+} | {
+    /**
+     * The image source to use as an icon.
+     * @platform iOS
+     */
+    src?: ImageSourcePropType;
+};
+export interface ExtendedNativeTabOptions extends NativeTabOptions {
+    /**
+     * If true, the tab will be hidden from the tab bar.
+     */
+    hidden?: boolean;
+    specialEffects?: BottomTabsScreenProps['specialEffects'];
+}
+export interface NativeTabsStyleType {
+    fontFamily?: TextStyle['fontFamily'];
+    fontSize?: TextStyle['fontSize'];
+    fontWeight?: TextStyle['fontWeight'];
+    fontStyle?: TextStyle['fontStyle'];
+    color?: TextStyle['color'];
+    /**
+     * @platform android
+     * @platform iOS
+     */
+    iconColor?: ColorValue;
+    backgroundColor?: ColorValue;
+    /**
+     * @platform iOS
+     */
+    blurEffect?: BottomTabsScreenProps['tabBarBlurEffect'];
+    tintColor?: ColorValue;
+    badgeBackgroundColor?: ColorValue;
+    /**
+     * @platform android
+     */
+    rippleColor?: ColorValue;
+    /**
+     * @platform android
+     */
+    labelVisibilityMode?: TabBarItemLabelVisibilityMode;
+    /**
+     * @platform android
+     */
+    '&:active'?: NativeTabsActiveStyleType;
+}
+export interface NativeTabsActiveStyleType {
+    /**
+     * @platform android
+     */
+    color?: ColorValue;
+    /**
+     * @platform android
+     */
+    fontSize?: TextStyle['fontSize'];
+    /**
+     * @platform android
+     */
+    iconColor?: ColorValue;
+    /**
+     * @platform android
+     */
+    indicatorColor?: ColorValue;
+}
+export interface NativeTabsProps extends PropsWithChildren {
+    style?: NativeTabsStyleType;
+    /**
+     * https://developer.apple.com/documentation/uikit/uitabbarcontroller/tabbarminimizebehavior
+     *
+     * Supported values:
+     * - `none` - The tab bar does not minimize.
+     * - `onScrollUp` - The tab bar minimizes when scrolling up, and expands when scrolling back down. Recommended if the scroll view content is aligned to the bottom.
+     * - `onScrollDown` - The tab bar minimizes when scrolling down, and expands when scrolling back up.
+     * - `automatic` - Resolves to the system default minimize behavior.
+     *
+     * @default automatic
+     *
+     * @platform iOS 26
+     */
+    minimizeBehavior?: BottomTabsProps['tabBarMinimizeBehavior'];
+    /**
+     * Disables the active indicator for the tab bar.
+     *
+     * @platform android
+     */
+    disableIndicator?: boolean;
+    /**
+     * The behavior when navigating back with the back button.
+     *
+     * @platform android
+     */
+    backBehavior?: 'none' | 'initialRoute' | 'history';
+}
+export interface NativeTabsViewProps extends NativeTabsProps {
+    builder: ReturnType<typeof useNavigationBuilder<TabNavigationState<ParamListBase>, TabRouterOptions, Record<string, (...args: any) => void>, NativeTabOptions, Record<string, any>>>;
+}
+export interface NativeTabTriggerProps {
+    /**
+     * The name of the route.
+     *
+     * This is required when used inside a Layout component.
+     *
+     * When used in a route it has no effect.
+     */
+    name?: string;
+    /**
+     * If true, the tab will be hidden from the tab bar.
+     */
+    hidden?: boolean;
+    /**
+     * The options for the trigger.
+     *
+     * Use `Icon`, `Label`, and `Badge` components as children to customize the tab, rather then raw options.
+     */
+    options?: NativeTabOptions;
+    /**
+     * If true, the tab will not pop stack to the root when selected again.
+     * @default false
+     *
+     * @platform ios
+     */
+    disablePopToTop?: boolean;
+    /**
+     * If true, the tab will not scroll to the top when selected again.
+     * @default false
+     *
+     * @platform ios
+     */
+    disableScrollToTop?: boolean;
+    /**
+     * The children of the trigger.
+     *
+     * Use `Icon`, `Label`, and `Badge` components to customize the tab.
+     */
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/types.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  DefaultRouterOptions,\n  ParamListBase,\n  TabNavigationState,\n  TabRouterOptions,\n  useNavigationBuilder,\n} from '@react-navigation/native';\nimport type { PropsWithChildren } from 'react';\nimport type { ColorValue, ImageSourcePropType, TextStyle } from 'react-native';\nimport type {\n  BottomTabsProps,\n  BottomTabsScreenProps,\n  TabBarItemLabelVisibilityMode,\n} from 'react-native-screens';\nimport type { SFSymbol } from 'sf-symbols-typescript';\n\nexport type NativeTabOptions = Omit<\n  BottomTabsScreenProps,\n  | 'children'\n  | 'placeholder'\n  | 'onWillAppear'\n  | 'onDidAppear'\n  | 'onWillDisappear'\n  | 'onDidDisappear'\n  | 'isFocused'\n  | 'tabKey'\n  | 'icon'\n  | 'selectedIcon'\n  | 'iconResourceName'\n  | 'specialEffects'\n> &\n  DefaultRouterOptions & {\n    /**\n     * The icon to display in the tab bar.\n     * @platform android\n     * @platform iOS\n     */\n    icon?: SfSymbolOrImageSource & {\n      /**\n       * The name of the drawable resource to use as an icon.\n       * @platform android\n       */\n      drawable?: string;\n    };\n    /**\n     * The icon to display when the tab is selected.\n     * @platform iOS\n     */\n    selectedIcon?: SfSymbolOrImageSource;\n  };\n\nexport type SfSymbolOrImageSource =\n  | {\n      /**\n       * The name of the SF Symbol to use as an icon.\n       * @platform iOS\n       */\n      sf?: SFSymbol;\n    }\n  | {\n      /**\n       * The image source to use as an icon.\n       * @platform iOS\n       */\n      src?: ImageSourcePropType;\n    };\n\nexport interface ExtendedNativeTabOptions extends NativeTabOptions {\n  /**\n   * If true, the tab will be hidden from the tab bar.\n   */\n  hidden?: boolean;\n  specialEffects?: BottomTabsScreenProps['specialEffects'];\n}\n\nexport interface NativeTabsStyleType {\n  fontFamily?: TextStyle['fontFamily'];\n  fontSize?: TextStyle['fontSize'];\n  fontWeight?: TextStyle['fontWeight'];\n  fontStyle?: TextStyle['fontStyle'];\n  color?: TextStyle['color'];\n  /**\n   * @platform android\n   * @platform iOS\n   */\n  iconColor?: ColorValue;\n  backgroundColor?: ColorValue;\n  /**\n   * @platform iOS\n   */\n  blurEffect?: BottomTabsScreenProps['tabBarBlurEffect'];\n  tintColor?: ColorValue;\n  badgeBackgroundColor?: ColorValue;\n  /**\n   * @platform android\n   */\n  rippleColor?: ColorValue;\n  /**\n   * @platform android\n   */\n  labelVisibilityMode?: TabBarItemLabelVisibilityMode;\n  /**\n   * @platform android\n   */\n  '&:active'?: NativeTabsActiveStyleType;\n}\n\nexport interface NativeTabsActiveStyleType {\n  /**\n   * @platform android\n   */\n  color?: ColorValue;\n  /**\n   * @platform android\n   */\n  fontSize?: TextStyle['fontSize'];\n  /**\n   * @platform android\n   */\n  iconColor?: ColorValue;\n  /**\n   * @platform android\n   */\n  indicatorColor?: ColorValue;\n}\n\nexport interface NativeTabsProps extends PropsWithChildren {\n  style?: NativeTabsStyleType;\n  /**\n   * https://developer.apple.com/documentation/uikit/uitabbarcontroller/tabbarminimizebehavior\n   *\n   * Supported values:\n   * - `none` - The tab bar does not minimize.\n   * - `onScrollUp` - The tab bar minimizes when scrolling up, and expands when scrolling back down. Recommended if the scroll view content is aligned to the bottom.\n   * - `onScrollDown` - The tab bar minimizes when scrolling down, and expands when scrolling back up.\n   * - `automatic` - Resolves to the system default minimize behavior.\n   *\n   * @default automatic\n   *\n   * @platform iOS 26\n   */\n  minimizeBehavior?: BottomTabsProps['tabBarMinimizeBehavior'];\n  /**\n   * Disables the active indicator for the tab bar.\n   *\n   * @platform android\n   */\n  disableIndicator?: boolean;\n  /**\n   * The behavior when navigating back with the back button.\n   *\n   * @platform android\n   */\n  backBehavior?: 'none' | 'initialRoute' | 'history';\n}\n\nexport interface NativeTabsViewProps extends NativeTabsProps {\n  builder: ReturnType<\n    typeof useNavigationBuilder<\n      TabNavigationState<ParamListBase>,\n      TabRouterOptions,\n      Record<string, (...args: any) => void>,\n      NativeTabOptions,\n      Record<string, any>\n    >\n  >;\n}\n\nexport interface NativeTabTriggerProps {\n  /**\n   * The name of the route.\n   *\n   * This is required when used inside a Layout component.\n   *\n   * When used in a route it has no effect.\n   */\n  name?: string;\n  /**\n   * If true, the tab will be hidden from the tab bar.\n   */\n  hidden?: boolean;\n  /**\n   * The options for the trigger.\n   *\n   * Use `Icon`, `Label`, and `Badge` components as children to customize the tab, rather then raw options.\n   */\n  options?: NativeTabOptions;\n  /**\n   * If true, the tab will not pop stack to the root when selected again.\n   * @default false\n   *\n   * @platform ios\n   */\n  disablePopToTop?: boolean;\n  /**\n   * If true, the tab will not scroll to the top when selected again.\n   * @default false\n   *\n   * @platform ios\n   */\n  disableScrollToTop?: boolean;\n  /**\n   * The children of the trigger.\n   *\n   * Use `Icon`, `Label`, and `Badge` components to customize the tab.\n   */\n  children?: React.ReactNode;\n}\n"]}

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

@@ -0,0 +1,7 @@
+import type { JSXElementConstructor, ReactNode } from 'react';
+import React from 'react';
+import type { ExtendedNativeTabOptions } from './types';
+export declare function filterAllowedChildrenElements<Components extends JSXElementConstructor<any>[]>(children: ReactNode | ReactNode[], components: Components): React.ReactElement<React.ComponentProps<Components[number]>, Components[number]>[];
+export declare function isChildOfType<T extends JSXElementConstructor<any>>(child: ReactNode, type: T): child is React.ReactElement<React.ComponentProps<T>, T>;
+export declare function shouldTabBeVisible(options: ExtendedNativeTabOptions): boolean;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAExD,wBAAgB,6BAA6B,CAAC,UAAU,SAAS,qBAAqB,CAAC,GAAG,CAAC,EAAE,EAC3F,QAAQ,EAAE,SAAS,GAAG,SAAS,EAAE,EACjC,UAAU,EAAE,UAAU,GACrB,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,CAOpF;AAED,wBAAgB,aAAa,CAAC,CAAC,SAAS,qBAAqB,CAAC,GAAG,CAAC,EAChE,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,CAAC,GACN,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAEzD;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,wBAAwB,GAAG,OAAO,CAI7E"}

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.filterAllowedChildrenElements = filterAllowedChildrenElements;
+exports.isChildOfType = isChildOfType;
+exports.shouldTabBeVisible = shouldTabBeVisible;
+const react_1 = __importDefault(require("react"));
+function filterAllowedChildrenElements(children, components) {
+    return react_1.default.Children.toArray(children).filter((child) => react_1.default.isValidElement(child) && components.includes(child.type));
+}
+function isChildOfType(child, type) {
+    return react_1.default.isValidElement(child) && child.type === type;
+}
+function shouldTabBeVisible(options) {
+    // The <NativeTab.Trigger> always sets `hidden` to defined boolean value.
+    // If it is not defined, then it was not specified, and we should hide the tab.
+    return options.hidden === false;
+}
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/utils.ts"],"names":[],"mappings":";;;;;AAKA,sEAUC;AAED,sCAKC;AAED,gDAIC;AA3BD,kDAA0B;AAI1B,SAAgB,6BAA6B,CAC3C,QAAiC,EACjC,UAAsB;IAEtB,OAAO,eAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAC5C,CACE,KAAK,EACsF,EAAE,CAC7F,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAiC,CAAC,CAC9F,CAAC;AACJ,CAAC;AAED,SAAgB,aAAa,CAC3B,KAAgB,EAChB,IAAO;IAEP,OAAO,eAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC;AAC5D,CAAC;AAED,SAAgB,kBAAkB,CAAC,OAAiC;IAClE,yEAAyE;IACzE,+EAA+E;IAC/E,OAAO,OAAO,CAAC,MAAM,KAAK,KAAK,CAAC;AAClC,CAAC","sourcesContent":["import type { JSXElementConstructor, ReactNode } from 'react';\nimport React from 'react';\n\nimport type { ExtendedNativeTabOptions } from './types';\n\nexport function filterAllowedChildrenElements<Components extends JSXElementConstructor<any>[]>(\n  children: ReactNode | ReactNode[],\n  components: Components\n): React.ReactElement<React.ComponentProps<Components[number]>, Components[number]>[] {\n  return React.Children.toArray(children).filter(\n    (\n      child\n    ): child is React.ReactElement<React.ComponentProps<Components[number]>, Components[number]> =>\n      React.isValidElement(child) && components.includes(child.type as (props: any) => ReactNode)\n  );\n}\n\nexport function isChildOfType<T extends JSXElementConstructor<any>>(\n  child: ReactNode,\n  type: T\n): child is React.ReactElement<React.ComponentProps<T>, T> {\n  return React.isValidElement(child) && child.type === type;\n}\n\nexport function shouldTabBeVisible(options: ExtendedNativeTabOptions): boolean {\n  // The <NativeTab.Trigger> always sets `hidden` to defined boolean value.\n  // If it is not defined, then it was not specified, and we should hide the tab.\n  return options.hidden === false;\n}\n"]}