expo-router 6.0.0-beta.0 → 6.0.0-beta.10

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

@@ -1,12 +1,15 @@
 "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 PreviewRouteContext_1 = require("../../link/preview/PreviewRouteContext");
 const useSafeLayoutEffect_1 = require("../../views/useSafeLayoutEffect");
 const elements_1 = require("../common/elements");
 /**
@@ -45,96 +48,185 @@ const elements_1 = require("../common/elements");
  *     </View>
  *   );
  * }
+ * ```
  *
- * **Note:** You can use the alias `NativeTabs.Trigger` for this component.
+ * > **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();
+    const isInPreview = (0, PreviewRouteContext_1.useIsPreview)();
     (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 (isFocused && !isInPreview) {
             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);
+            const options = convertTabPropsToOptions(props, true);
             navigation.setOptions(options);
         }
-    }, [isFocused, props]);
+    }, [isFocused, props, isInPreview]);
     return null;
 }
-function convertTabPropsToOptions({ options, hidden, children, disablePopToTop, disableScrollToTop, }) {
-    const initialOptions = {
-        ...options,
-        hidden: !!hidden,
-        specialEffects: {
-            repeatedTabSelection: {
-                popToRoot: !disablePopToTop,
-                scrollToTop: !disableScrollToTop,
+exports.NativeTabTrigger = Object.assign(NativeTabTriggerImpl, {
+    TabBar: NativeTabsTriggerTabBar_1.NativeTabsTriggerTabBar,
+});
+function convertTabPropsToOptions({ options, hidden, children, role, disablePopToTop, disableScrollToTop }, isDynamic = false) {
+    const initialOptions = isDynamic
+        ? { ...options }
+        : {
+            ...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]);
+            role: role ?? options?.role,
+        };
+    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 * **Note:** You can use the alias `NativeTabs.Trigger` for this component.\n */\nexport function NativeTabTrigger(props: NativeTabTriggerProps) {\n  const route = useRoute();\n  const navigation = useNavigation();\n  const isFocused = navigation.isFocused();\n\n  useSafeLayoutEffect(() => {\n    // This will cause the tab to update only when it is focused.\n    // As long as all tabs are loaded at the start, we don't need this check.\n    // It is here to ensure similar behavior to stack\n    if (isFocused) {\n      if (navigation.getState()?.type !== 'tab') {\n        throw new Error(\n          `Trigger component can only be used in the tab screen. Current route: ${route.name}`\n        );\n      }\n      const options = convertTabPropsToOptions(props);\n      navigation.setOptions(options);\n    }\n  }, [isFocused, props]);\n\n  return null;\n}\n\nexport function convertTabPropsToOptions({\n  options,\n  hidden,\n  children,\n  disablePopToTop,\n  disableScrollToTop,\n}: NativeTabTriggerProps) {\n  const initialOptions: ExtendedNativeTabOptions = {\n    ...options,\n    hidden: !!hidden,\n    specialEffects: {\n      repeatedTabSelection: {\n        popToRoot: !disablePopToTop,\n        scrollToTop: !disableScrollToTop,\n      },\n    },\n  };\n  const allowedChildren = filterAllowedChildrenElements(children, [Badge, Label, Icon]);\n  return allowedChildren.reduce<ExtendedNativeTabOptions>(\n    (acc, child) => {\n      if (isChildOfType(child, Badge)) {\n        if (child.props.children) {\n          acc.badgeValue = String(child.props.children);\n        } else if (!child.props.hidden) {\n          // If no value is provided, we set it to a space to show the badge\n          // Otherwise, the `react-native-screens` will interpret it as a hidden badge\n          // https://github.com/software-mansion/react-native-screens/blob/b4358fd95dd0736fc54df6bb97f210dc89edf24c/ios/bottom-tabs/RNSBottomTabsScreenComponentView.mm#L172\n          acc.badgeValue = ' ';\n        }\n      } else if (isChildOfType(child, Label)) {\n        if (child.props.hidden) {\n          acc.title = '';\n        } else {\n          acc.title = child.props.children;\n        }\n      } else if (isChildOfType(child, Icon)) {\n        if ('src' in child.props || 'selectedSrc' in child.props) {\n          acc.icon = child.props.src\n            ? {\n                src: child.props.src,\n              }\n            : undefined;\n          acc.selectedIcon = child.props.selectedSrc\n            ? {\n                src: child.props.selectedSrc,\n              }\n            : undefined;\n        } else if ('sf' in child.props || 'selectedSf' in child.props) {\n          if (process.env.EXPO_OS === 'ios') {\n            acc.icon = child.props.sf\n              ? {\n                  sf: child.props.sf,\n                }\n              : undefined;\n            acc.selectedIcon = child.props.selectedSf\n              ? {\n                  sf: child.props.selectedSf,\n                }\n              : undefined;\n          }\n        }\n        if (process.env.EXPO_OS === 'android') {\n          acc.icon = { drawable: child.props.drawable };\n          acc.selectedIcon = undefined;\n        }\n      }\n      return acc;\n    },\n    { ...initialOptions }\n  );\n}\n\nexport function isNativeTabTrigger(\n  child: ReactNode,\n  contextKey?: string\n): child is ReactElement<NativeTabTriggerProps & { name: string }> {\n  if (isValidElement(child) && child && child.type === NativeTabTrigger) {\n    if (\n      typeof child.props === 'object' &&\n      child.props &&\n      'name' in child.props &&\n      !child.props.name\n    ) {\n      throw new Error(\n        `<Trigger /> component in \\`default export\\` at \\`app${contextKey}/_layout\\` must have a \\`name\\` prop when used as a child of a Layout Route.`\n      );\n    }\n\n    if (process.env.NODE_ENV !== 'production') {\n      if (\n        ['component', 'getComponent'].some(\n          (key) => child.props && typeof child.props === 'object' && key in child.props\n        )\n      ) {\n        throw new Error(\n          `<Trigger /> component in \\`default export\\` at \\`app${contextKey}/_layout\\` must not have a \\`component\\` or \\`getComponent\\` prop when used as a child of a Layout Route`\n        );\n      }\n    }\n\n    return true;\n  }\n\n  return false;\n}\n"]}
+{"version":3,"file":"NativeTabTrigger.js","sourceRoot":"","sources":["../../../src/native-tabs/NativeBottomTabs/NativeTabTrigger.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { useNavigation, useRoute } from '@react-navigation/native';\nimport { isValidElement, type ReactElement, type ReactNode } from 'react';\nimport type { ImageSourcePropType } from 'react-native';\n\nimport { NativeTabsTriggerTabBar } from './NativeTabsTriggerTabBar';\nimport type {\n  ExtendedNativeTabOptions,\n  NativeTabOptions,\n  NativeTabsTriggerTabBarProps,\n  NativeTabTriggerProps,\n} from './types';\nimport { filterAllowedChildrenElements, isChildOfType } from './utils';\nimport { useIsPreview } from '../../link/preview/PreviewRouteContext';\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  const isInPreview = useIsPreview();\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 && !isInPreview) {\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, true);\n      navigation.setOptions(options);\n    }\n  }, [isFocused, props, isInPreview]);\n\n  return null;\n}\n\nexport const NativeTabTrigger = Object.assign(NativeTabTriggerImpl, {\n  TabBar: NativeTabsTriggerTabBar,\n});\n\nexport function convertTabPropsToOptions(\n  { options, hidden, children, role, disablePopToTop, disableScrollToTop }: NativeTabTriggerProps,\n  isDynamic: boolean = false\n) {\n  const initialOptions: ExtendedNativeTabOptions = isDynamic\n    ? { ...options }\n    : {\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

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { NativeTabsViewProps } from './types';
+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

@@ -1 +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"}
+{"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;AASjB,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBA4IxD"}

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

@@ -36,57 +36,73 @@ 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");
-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
+const supportedBlurEffectsSet = new Set(types_1.SUPPORTED_BLUR_EFFECTS);
 function NativeTabsView(props) {
-    const { builder, style, minimizeBehavior, disableIndicator } = props;
+    const { builder, minimizeBehavior, disableIndicator, focusedIndex } = 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));
+    let blurEffect = props.blurEffect;
+    if (blurEffect && !supportedBlurEffectsSet.has(blurEffect)) {
+        console.warn(`Unsupported blurEffect: ${blurEffect}. Supported values are: ${types_1.SUPPORTED_BLUR_EFFECTS.map((effect) => `"${effect}"`).join(', ')}`);
+        blurEffect = undefined;
     }
-    // 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 deferredFocusedIndex = (0, react_1.useDeferredValue)(focusedIndex);
+    let standardAppearance = (0, appearance_1.convertStyleToAppearance)({
+        ...props.labelStyle,
+        iconColor: props.iconColor,
+        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,
+        backgroundColor: props.backgroundColor,
+        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];
-        // 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>);
+        const isFocused = index === deferredFocusedIndex;
+        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}/>);
     });
-    // 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 } }) => {
+    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({
@@ -96,10 +112,43 @@ function NativeTabsView(props) {
                     name: route.name,
                 },
             });
-            isDuringNativeTransition.current = true;
         }}>
       {children}
-    </react_native_screens_1.BottomTabs>);
+    </BottomTabsWrapper>);
+}
+function Screen(props) {
+    const { routeKey, name, descriptor, isFocused, standardAppearance, scrollEdgeAppearance, badgeTextColor, } = props;
+    const role = descriptor.options.role;
+    // To align with apple documentation and prevent untested cases,
+    // title and icon cannot be changed when role is defined
+    const shouldResetTitleAndIcon = !!role && process.env.EXPO_OS === 'ios';
+    const title = descriptor.options.title ?? name;
+    const icon = useAwaitedScreensIcon(descriptor.options.icon);
+    const selectedIcon = useAwaitedScreensIcon(descriptor.options.selectedIcon);
+    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={shouldResetTitleAndIcon ? undefined : convertOptionsIconToPropsIcon(icon)} selectedIcon={shouldResetTitleAndIcon ? undefined : convertOptionsIconToPropsIcon(selectedIcon)} title={shouldResetTitleAndIcon ? undefined : 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) {
@@ -113,4 +162,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);
+function BottomTabsWrapper(props) {
+    let { tabBarMinimizeBehavior, tabBarItemLabelVisibilityMode, ...rest } = props;
+    if (tabBarMinimizeBehavior && !supportedTabBarMinimizeBehaviorsSet.has(tabBarMinimizeBehavior)) {
+        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)) {
+        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 tabBarItemLabelVisibilityMode={tabBarItemLabelVisibilityMode} tabBarMinimizeBehavior={tabBarMinimizeBehavior} {...rest}/>);
+}
 //# sourceMappingURL=NativeTabsView.js.map