@soundtrackio/react-native-bottom-tabs 1.4.0

package/lib/typescript/src/TabView.d.ts

@@ -0,0 +1,219 @@
+import React from 'react';
+import { type ColorValue, type StyleProp, type ViewStyle } from 'react-native';
+import type { ImageSource } from 'react-native/Libraries/Image/ImageSource';
+import type { AppleIcon, BaseRoute, IconRenderingMode, LayoutDirection, NavigationState, TabRole } from './types';
+import { type BottomAccessoryViewProps } from './BottomAccessoryView';
+interface Props<Route extends BaseRoute> {
+    labeled?: boolean;
+    /**
+     * A tab bar style that adapts to each platform.
+     *
+     * that varies depending on the platform:
+     * Tab views using the sidebar adaptable style have an appearance
+     * - iPadOS displays a top tab bar that can adapt into a sidebar.
+     * - iOS displays a bottom tab bar.
+     * - macOS and tvOS always show a sidebar.
+     * - visionOS shows an ornament and also shows a sidebar for secondary tabs within a `TabSection`.
+     */
+    sidebarAdaptable?: boolean;
+    /**
+     * Whether to disable page animations between tabs. (iOS only) Defaults to `false`.
+     */
+    disablePageAnimations?: boolean;
+    /**
+     * Whether to enable haptic feedback. Defaults to `false`.
+     */
+    hapticFeedbackEnabled?: boolean;
+    /**
+     * Describes the appearance attributes for the tabBar to use when an observable scroll view is scrolled to the bottom. (iOS only)
+     */
+    scrollEdgeAppearance?: 'default' | 'opaque' | 'transparent';
+    /**
+     * Behavior for minimizing the tab bar. (iOS 26+)
+     */
+    minimizeBehavior?: 'automatic' | 'onScrollDown' | 'onScrollUp' | 'never';
+    /**
+     * Active tab color.
+     */
+    tabBarActiveTintColor?: ColorValue;
+    /**
+     * Inactive tab color.
+     * Has no effect on iOS 26 and above (Liquid Glass).
+     */
+    tabBarInactiveTintColor?: ColorValue;
+    /**
+     * Enables the experimental iOS 26 Liquid Glass tint color workaround that bakes tab labels into images.
+     * This has many drawbacks, such as affecting icon sizing when labels have different widths, bad positioning of badges, and possibly breaking accessibility features.
+     *
+     * @platform ios
+     */
+    experimental_bakedTintColors?: boolean;
+    /**
+     * State for the tab view.
+     *
+     * The state should contain a `routes` prop which is an array of objects containing `key` and `title` props, such as `{ key: 'music', title: 'Music' }`.
+     *
+     */
+    navigationState: NavigationState<Route>;
+    /**
+     * Function which takes an object with the route and returns a React element.
+     */
+    renderScene: (props: {
+        route: Route;
+        jumpTo: (key: string) => void;
+    }) => React.ReactNode | null;
+    /**
+     * Callback which is called on tab change, receives the index of the new tab as argument.
+     */
+    onIndexChange: (index: number) => void;
+    /**
+     * Callback which is called on long press on tab, receives the index of the tab as argument.
+     */
+    onTabLongPress?: (index: number) => void;
+    /**
+     * Get lazy for the current screen. Uses true by default.
+     */
+    getLazy?: (props: {
+        route: Route;
+    }) => boolean | undefined;
+    /**
+     * Get label text for the tab, uses `route.title` by default.
+     */
+    getLabelText?: (props: {
+        route: Route;
+    }) => string | undefined;
+    /**
+     * Get badge for the tab, uses `route.badge` by default.
+     */
+    getBadge?: (props: {
+        route: Route;
+    }) => string | undefined;
+    /**
+     * Get badge background color for the tab, uses `route.badgeBackgroundColor` by default. (Android only)
+     */
+    getBadgeBackgroundColor?: (props: {
+        route: Route;
+    }) => ColorValue | undefined;
+    /**
+     * Get badge text color for the tab, uses `route.badgeTextColor` by default. (Android only)
+     */
+    getBadgeTextColor?: (props: {
+        route: Route;
+    }) => ColorValue | undefined;
+    /**
+     * Get active tint color for the tab, uses `route.activeTintColor` by default.
+     */
+    getActiveTintColor?: (props: {
+        route: Route;
+    }) => ColorValue | undefined;
+    /**
+     * Determines whether the tab prevents default action (switching tabs) on press, uses `route.preventsDefault` by default.
+     */
+    getPreventsDefault?: (props: {
+        route: Route;
+    }) => boolean | undefined;
+    /**
+     * Get icon for the tab, uses `route.focusedIcon` by default.
+     */
+    getIcon?: (props: {
+        route: Route;
+        focused: boolean;
+    }) => ImageSource | AppleIcon | undefined | null;
+    /**
+     * Get the rendering mode for the tab icon, uses `route.iconRenderingMode` by default.
+     *
+     * Use `original` to preserve multicolor image icons instead of applying the native tab tint.
+     */
+    getIconRenderingMode?: (props: {
+        route: Route;
+    }) => IconRenderingMode | undefined;
+    /**
+     * Get hidden for the tab, uses `route.hidden` by default.
+     * If `true`, the tab will be hidden.
+     */
+    getHidden?: (props: {
+        route: Route;
+    }) => boolean | undefined;
+    /**
+     * Get testID for the tab, uses `route.testID` by default.
+     */
+    getTestID?: (props: {
+        route: Route;
+    }) => string | undefined;
+    /**
+     * Get role for the tab, uses `route.role` by default. (iOS only)
+     */
+    getRole?: (props: {
+        route: Route;
+    }) => TabRole | undefined;
+    /**
+     * Custom tab bar to render. Set to `null` to hide the tab bar completely.
+     */
+    tabBar?: () => React.ReactNode;
+    /**
+     * Get freezeOnBlur for the current screen. Uses false by default.
+     */
+    getFreezeOnBlur?: (props: {
+        route: Route;
+    }) => boolean | undefined;
+    /**
+     * Get style for the scene, uses `route.style` by default.
+     */
+    getSceneStyle?: (props: {
+        route: Route;
+    }) => StyleProp<ViewStyle>;
+    tabBarStyle?: {
+        /**
+         * Background color of the tab bar.
+         */
+        backgroundColor?: ColorValue;
+    };
+    /**
+     * A Boolean value that indicates whether the tab bar is translucent. (iOS only)
+     */
+    translucent?: boolean;
+    rippleColor?: ColorValue;
+    /**
+     * Color of tab indicator. (Android only)
+     */
+    activeIndicatorColor?: ColorValue;
+    tabLabelStyle?: {
+        /**
+         * Font family for the tab labels.
+         */
+        fontFamily?: string;
+        /**
+         * Font weight for the tab labels.
+         */
+        fontWeight?: string;
+        /**
+         * Font size for the tab labels.
+         */
+        fontSize?: number;
+    };
+    /**
+     * A function that returns a React element to display as bottom accessory view.
+     * iOS 26+ only.
+     *
+     * @platform ios
+     */
+    renderBottomAccessoryView?: BottomAccessoryViewProps['renderBottomAccessoryView'];
+    /**
+     * The direction of the layout.
+     * @default 'locale'
+     */
+    layoutDirection?: LayoutDirection;
+    /**
+     * Whether to hide the native tab bar.
+     */
+    tabBarHidden?: boolean;
+    /**
+     * Whether to hide the tab bar while the keyboard is shown. Android only:
+     * with `adjustResize` the bar is otherwise lifted above the keyboard.
+     *
+     * @platform android
+     */
+    tabBarHideOnKeyboard?: boolean;
+}
+declare const TabView: <Route extends BaseRoute>({ navigationState, renderScene, onIndexChange, onTabLongPress, rippleColor, tabBarActiveTintColor: activeTintColor, tabBarInactiveTintColor: inactiveTintColor, getBadge, getBadgeBackgroundColor, getBadgeTextColor, getLazy, getLabelText, getIcon, getHidden, getActiveTintColor, getTestID, getRole, getIconRenderingMode, getSceneStyle, getPreventsDefault, hapticFeedbackEnabled, labeled, getFreezeOnBlur, tabBar: renderCustomTabBar, tabBarHidden, tabBarHideOnKeyboard, tabBarStyle, tabLabelStyle, renderBottomAccessoryView, layoutDirection, experimental_bakedTintColors: experimentalBakedTintColors, ...props }: Props<Route>) => import("react/jsx-runtime").JSX.Element;
+export default TabView;

package/lib/typescript/src/TabView.d.ts.map

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

package/lib/typescript/src/TabView.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useLayoutEffect, useRef } from 'react';
+import { Image, Platform, StyleSheet, View, processColor, } from 'react-native';
+import { BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
+import NativeTabView from './TabViewNativeComponent';
+import useLatestCallback from 'use-latest-callback';
+import DelayedFreeze from './DelayedFreeze';
+import { BottomAccessoryView, } from './BottomAccessoryView';
+const isAppleSymbol = (icon) => icon?.sfSymbol;
+const ANDROID_MAX_TABS = 100;
+const TabView = ({ navigationState, renderScene, onIndexChange, onTabLongPress, rippleColor, tabBarActiveTintColor: activeTintColor, tabBarInactiveTintColor: inactiveTintColor, getBadge = ({ route }) => route.badge, getBadgeBackgroundColor = ({ route }) => route.badgeBackgroundColor, getBadgeTextColor = ({ route }) => route.badgeTextColor, getLazy = ({ route }) => route.lazy, getLabelText = ({ route }) => route.title, getIcon = ({ route, focused }) => route.unfocusedIcon
+    ? focused
+        ? route.focusedIcon
+        : route.unfocusedIcon
+    : route.focusedIcon, getHidden = ({ route }) => route.hidden, getActiveTintColor = ({ route }) => route.activeTintColor, getTestID = ({ route }) => route.testID, getRole = ({ route }) => route.role, getIconRenderingMode = ({ route }) => route.iconRenderingMode, getSceneStyle = ({ route }) => route.style, getPreventsDefault = ({ route }) => route.preventsDefault, hapticFeedbackEnabled = false, 
+// Android's native behavior is to show labels when there are less than 4 tabs. We leave it as undefined to use the platform default behavior.
+labeled = Platform.OS !== 'android' ? true : undefined, getFreezeOnBlur = ({ route }) => route.freezeOnBlur, tabBar: renderCustomTabBar, tabBarHidden, tabBarHideOnKeyboard, tabBarStyle, tabLabelStyle, renderBottomAccessoryView, layoutDirection = 'locale', experimental_bakedTintColors: experimentalBakedTintColors = false, ...props }) => {
+    // @ts-ignore
+    const focusedKey = navigationState.routes[navigationState.index].key;
+    const customTabBarWrapperRef = useRef(null);
+    const [tabBarHeight, setTabBarHeight] = React.useState(0);
+    const [measuredDimensions, setMeasuredDimensions] = React.useState({ width: '100%', height: '100%' });
+    const trimmedRoutes = React.useMemo(() => {
+        if (Platform.OS === 'android' &&
+            navigationState.routes.length > ANDROID_MAX_TABS) {
+            console.warn(`TabView only supports up to ${ANDROID_MAX_TABS} tabs on Android`);
+            return navigationState.routes.slice(0, ANDROID_MAX_TABS);
+        }
+        return navigationState.routes;
+    }, [navigationState.routes]);
+    /**
+     * List of loaded tabs, tabs will be loaded when navigated to.
+     */
+    const [loaded, setLoaded] = React.useState([focusedKey]);
+    if (!loaded.includes(focusedKey)) {
+        // Set the current tab to be loaded if it was not loaded before
+        setLoaded((loaded) => [...loaded, focusedKey]);
+    }
+    const icons = React.useMemo(() => trimmedRoutes.map((route) => getIcon({
+        route,
+        // iOS uses UITabBarItem.selectedImage for selected and Liquid Glass hover states.
+        // Keep the base image unfocused so a selected tab can render unfocused while another tab is hovered.
+        focused: Platform.OS === 'ios' ? false : route.key === focusedKey,
+    })), [focusedKey, getIcon, trimmedRoutes]);
+    const focusedIcons = React.useMemo(() => trimmedRoutes.map((route) => getIcon({
+        route,
+        focused: true,
+    })), [getIcon, trimmedRoutes]);
+    const items = React.useMemo(() => trimmedRoutes.map((route, index) => {
+        const icon = icons[index];
+        const isSfSymbol = isAppleSymbol(icon);
+        const focusedIcon = focusedIcons[index];
+        const isFocusedSfSymbol = isAppleSymbol(focusedIcon);
+        if (Platform.OS === 'android' && isSfSymbol) {
+            console.warn('SF Symbols are not supported on Android. Use require() or pass uri to load an image instead.');
+        }
+        return {
+            key: route.key,
+            title: getLabelText({ route }) ?? route.key,
+            sfSymbol: isSfSymbol ? icon.sfSymbol : undefined,
+            focusedSfSymbol: isFocusedSfSymbol ? focusedIcon.sfSymbol : undefined,
+            badge: getBadge?.({ route }),
+            badgeBackgroundColor: processColor(getBadgeBackgroundColor?.({ route })),
+            badgeTextColor: processColor(getBadgeTextColor?.({ route })),
+            activeTintColor: processColor(getActiveTintColor({ route })),
+            iconRenderingMode: getIconRenderingMode({ route }),
+            hidden: getHidden?.({ route }),
+            testID: getTestID?.({ route }),
+            role: getRole?.({ route }),
+            preventsDefault: getPreventsDefault?.({ route }),
+        };
+    }), [
+        trimmedRoutes,
+        icons,
+        focusedIcons,
+        getLabelText,
+        getBadge,
+        getBadgeBackgroundColor,
+        getBadgeTextColor,
+        getActiveTintColor,
+        getIconRenderingMode,
+        getHidden,
+        getTestID,
+        getRole,
+        getPreventsDefault,
+    ]);
+    const resolvedIconAssets = React.useMemo(() => 
+    // Pass empty object for icons that are not provided to avoid index mismatch on native side.
+    icons.map((icon) => icon && !isAppleSymbol(icon)
+        ? // @ts-expect-error: TODO: Migrate of deep imports
+            Image.resolveAssetSource(icon)
+        : { uri: '' }), [icons]);
+    const resolvedFocusedIconAssets = React.useMemo(() => 
+    // Pass empty object for icons that are not provided to avoid index mismatch on native side.
+    focusedIcons.map((icon) => icon && !isAppleSymbol(icon)
+        ? // @ts-expect-error: TODO: Migrate of deep imports
+            Image.resolveAssetSource(icon)
+        : { uri: '' }), [focusedIcons]);
+    const jumpTo = useLatestCallback((key) => {
+        const index = trimmedRoutes.findIndex((route) => route.key === key);
+        onIndexChange(index);
+    });
+    const handleTabLongPress = React.useCallback(({ nativeEvent: { key } }) => {
+        const index = trimmedRoutes.findIndex((route) => route.key === key);
+        onTabLongPress?.(index);
+    }, [trimmedRoutes, onTabLongPress]);
+    const handlePageSelected = React.useCallback(({ nativeEvent: { key } }) => {
+        jumpTo(key);
+    }, [jumpTo]);
+    const handleTabBarMeasured = React.useCallback(({ nativeEvent: { height } }) => {
+        setTabBarHeight(height);
+    }, [setTabBarHeight]);
+    const handleNativeLayout = React.useCallback(({ nativeEvent: { width, height } }) => {
+        setMeasuredDimensions({ width, height });
+    }, [setMeasuredDimensions]);
+    useLayoutEffect(() => {
+        // If we are rendering a custom tab bar, we need to measure it to set the tab bar height.
+        if (renderCustomTabBar && customTabBarWrapperRef.current) {
+            customTabBarWrapperRef.current.measure((_x, _y, _width, height) => {
+                setTabBarHeight(height);
+            });
+        }
+    }, [renderCustomTabBar]);
+    return (_jsxs(BottomTabBarHeightContext.Provider, { value: tabBarHeight, children: [_jsxs(NativeTabView, { ...props, ...tabLabelStyle, style: styles.fullWidth, items: items, 
+                // When rendering a custom tab bar, icons can be React elements, which will not be properly resolved.
+                icons: renderCustomTabBar ? undefined : resolvedIconAssets, focusedIcons: renderCustomTabBar ? undefined : resolvedFocusedIconAssets, selectedPage: focusedKey, tabBarHidden: tabBarHidden ?? !!renderCustomTabBar, tabBarHideOnKeyboard: tabBarHideOnKeyboard, onTabLongPress: handleTabLongPress, onPageSelected: handlePageSelected, onTabBarMeasured: handleTabBarMeasured, onNativeLayout: handleNativeLayout, hapticFeedbackEnabled: hapticFeedbackEnabled, layoutDirection: layoutDirection, activeTintColor: activeTintColor, inactiveTintColor: inactiveTintColor, experimentalBakedTintColors: experimentalBakedTintColors, barTintColor: tabBarStyle?.backgroundColor, rippleColor: rippleColor, labeled: labeled, children: [trimmedRoutes.map((route) => {
+                        if (getLazy({ route }) !== false && !loaded.includes(route.key)) {
+                            // Don't render a screen if we've never navigated to it
+                            return (_jsx(View, { collapsable: false, style: styles.fullWidth }, route.key));
+                        }
+                        const focused = route.key === focusedKey;
+                        const freeze = !focused ? getFreezeOnBlur({ route }) : false;
+                        const customStyle = getSceneStyle({ route });
+                        return (_jsx(View, { style: [
+                                styles.screen,
+                                renderCustomTabBar ? styles.fullWidth : measuredDimensions,
+                                customStyle,
+                            ], collapsable: false, pointerEvents: focused ? 'auto' : 'none', accessibilityElementsHidden: !focused, importantForAccessibility: focused ? 'auto' : 'no-hide-descendants', children: _jsx(DelayedFreeze, { freeze: !!freeze, children: renderScene({
+                                    route,
+                                    jumpTo,
+                                }) }) }, route.key));
+                    }), Platform.OS === 'ios' &&
+                        parseFloat(Platform.Version) >= 26 &&
+                        renderBottomAccessoryView &&
+                        !renderCustomTabBar ? (_jsx(BottomAccessoryView, { renderBottomAccessoryView: renderBottomAccessoryView })) : null] }), renderCustomTabBar ? (_jsx(View, { ref: customTabBarWrapperRef, children: renderCustomTabBar() })) : null] }));
+};
+const styles = StyleSheet.create({
+    fullWidth: {
+        width: '100%',
+        height: '100%',
+        flex: 1,
+    },
+    screen: {
+        position: 'absolute',
+    },
+});
+export default TabView;

package/lib/typescript/src/TabViewNativeComponent.d.ts

@@ -0,0 +1,59 @@
+import type { ColorValue, ProcessedColorValue, ViewProps } from 'react-native';
+import type { DirectEventHandler, Double, Int32, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+import type { ImageSource } from 'react-native/Libraries/Image/ImageSource';
+export type OnPageSelectedEventData = Readonly<{
+    key: string;
+}>;
+export type OnTabBarMeasured = Readonly<{
+    height: Int32;
+}>;
+export type OnNativeLayout = Readonly<{
+    width: Double;
+    height: Double;
+}>;
+export type TabViewItems = ReadonlyArray<{
+    key: string;
+    title: string;
+    sfSymbol?: string;
+    focusedSfSymbol?: string;
+    badge?: string;
+    badgeBackgroundColor?: ProcessedColorValue | null;
+    badgeTextColor?: ProcessedColorValue | null;
+    activeTintColor?: ProcessedColorValue | null;
+    iconRenderingMode?: string;
+    hidden?: boolean;
+    testID?: string;
+    role?: string;
+    preventsDefault?: boolean;
+}>;
+export interface TabViewProps extends ViewProps {
+    items: TabViewItems;
+    selectedPage: string;
+    onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;
+    onTabLongPress?: DirectEventHandler<OnPageSelectedEventData>;
+    onTabBarMeasured?: DirectEventHandler<OnTabBarMeasured>;
+    onNativeLayout?: DirectEventHandler<OnNativeLayout>;
+    icons?: ReadonlyArray<ImageSource>;
+    focusedIcons?: ReadonlyArray<ImageSource>;
+    tabBarHidden?: boolean;
+    tabBarHideOnKeyboard?: boolean;
+    labeled?: boolean;
+    sidebarAdaptable?: boolean;
+    scrollEdgeAppearance?: string;
+    barTintColor?: ColorValue;
+    translucent?: WithDefault<boolean, true>;
+    rippleColor?: ColorValue;
+    activeTintColor?: ColorValue;
+    inactiveTintColor?: ColorValue;
+    experimentalBakedTintColors?: WithDefault<boolean, false>;
+    disablePageAnimations?: boolean;
+    activeIndicatorColor?: ColorValue;
+    hapticFeedbackEnabled?: boolean;
+    layoutDirection?: string;
+    minimizeBehavior?: string;
+    fontFamily?: string;
+    fontWeight?: string;
+    fontSize?: Int32;
+}
+declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<TabViewProps>;
+export default _default;

package/lib/typescript/src/TabViewNativeComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/TabViewNativeComponent.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC/E,OAAO,KAAK,EACV,kBAAkB,EAClB,MAAM,EACN,KAAK,EACL,WAAW,EACZ,MAAM,2CAA2C,CAAC;AAEnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAE5E,MAAM,MAAM,uBAAuB,GAAG,QAAQ,CAAC;IAC7C,GAAG,EAAE,MAAM,CAAC;CACb,CAAC,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,MAAM,EAAE,KAAK,CAAC;CACf,CAAC,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC;IACvC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAClD,cAAc,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAC5C,eAAe,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAC7C,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC,CAAC;AAEH,MAAM,WAAW,YAAa,SAAQ,SAAS;IAC7C,KAAK,EAAE,YAAY,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,kBAAkB,CAAC,uBAAuB,CAAC,CAAC;IAC7D,cAAc,CAAC,EAAE,kBAAkB,CAAC,uBAAuB,CAAC,CAAC;IAC7D,gBAAgB,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACxD,cAAc,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IACpD,KAAK,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACnC,YAAY,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,2BAA2B,CAAC,EAAE,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IAC1D,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,oBAAoB,CAAC,EAAE,UAAU,CAAC;IAClC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;;AAED,wBAEG"}

package/lib/typescript/src/TabViewNativeComponent.js

@@ -0,0 +1,4 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+export default codegenNativeComponent('RNCTabView', {
+    interfaceOnly: true,
+});

package/lib/typescript/src/expo.d.ts

@@ -0,0 +1,6 @@
+import { type ConfigPlugin } from '@expo/config-plugins';
+type ConfigProps = {
+    theme: 'material2' | 'material3' | 'material3-dynamic' | 'material3-expressive';
+};
+declare const _default: ConfigPlugin<ConfigProps>;
+export default _default;

package/lib/typescript/src/expo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expo.d.ts","sourceRoot":"","sources":["../../../src/expo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAiBzD,KAAK,WAAW,GAAG;IAKjB,KAAK,EACD,WAAW,GACX,WAAW,GACX,mBAAmB,GACnB,sBAAsB,CAAC;CAC5B,CAAC;;AA2BF,wBAGE"}

package/lib/typescript/src/expo.js

@@ -0,0 +1,34 @@
+import {} from '@expo/config-plugins';
+import { createRequire } from 'node:module';
+const require = createRequire(import.meta.url);
+const ConfigPlugins = require('@expo/config-plugins');
+const { createRunOncePlugin, withAndroidStyles } = ConfigPlugins;
+const MATERIAL3_THEME_DYANMIC = 'Theme.Material3.DynamicColors.DayNight.NoActionBar';
+const MATERIAL3_THEME = 'Theme.Material3.DayNight.NoActionBar';
+const MATERIAL2_THEME = 'Theme.MaterialComponents.DayNight.NoActionBar';
+const MATERIAL3_EXPRESSIVE_THEME = 'Theme.Material3Expressive.DayNight.NoActionBar';
+const withMaterial3Theme = (config, options) => {
+    const theme = options?.theme;
+    return withAndroidStyles(config, (stylesConfig) => {
+        stylesConfig.modResults.resources.style =
+            stylesConfig.modResults.resources.style?.map((style) => {
+                if (style.$.name === 'AppTheme') {
+                    if (theme === 'material3-dynamic') {
+                        style.$.parent = MATERIAL3_THEME_DYANMIC;
+                    }
+                    else if (theme === 'material2') {
+                        style.$.parent = MATERIAL2_THEME;
+                    }
+                    else if (theme === 'material3-expressive') {
+                        style.$.parent = MATERIAL3_EXPRESSIVE_THEME;
+                    }
+                    else {
+                        style.$.parent = MATERIAL3_THEME;
+                    }
+                }
+                return style;
+            });
+        return stylesConfig;
+    });
+};
+export default createRunOncePlugin(withMaterial3Theme, 'react-native-bottom-tabs');

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,15 @@
+import TabView from './TabView';
+/**
+ * Views
+ */
+export default TabView;
+/**
+ * Utilities
+ */
+export { SceneMap } from './SceneMap';
+export { useBottomTabBarHeight } from './utils/useBottomTabBarHeight';
+export { BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
+/**
+ * Types
+ */
+export type { AppleIcon, IconRenderingMode, LayoutDirection, TabRole, } from './types';

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC;;GAEG;AACH,eAAe,OAAO,CAAC;AAEvB;;GAEG;AACH,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAE9E;;GAEG;AACH,YAAY,EACV,SAAS,EACT,iBAAiB,EACjB,eAAe,EACf,OAAO,GACR,MAAM,SAAS,CAAC"}

package/lib/typescript/src/index.js

@@ -0,0 +1,11 @@
+import TabView from './TabView';
+/**
+ * Views
+ */
+export default TabView;
+/**
+ * Utilities
+ */
+export { SceneMap } from './SceneMap';
+export { useBottomTabBarHeight } from './utils/useBottomTabBarHeight';
+export { BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';

package/lib/typescript/src/types.d.ts

@@ -0,0 +1,31 @@
+import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import type { SFSymbol } from 'sf-symbols-typescript';
+export type IconSource = string | ImageSourcePropType;
+export type AppleIcon = {
+    sfSymbol: SFSymbol;
+};
+export type TabRole = 'search';
+export type IconRenderingMode = 'automatic' | 'original';
+export type LayoutDirection = 'ltr' | 'rtl' | 'locale';
+export type BaseRoute = {
+    key: string;
+    title?: string;
+    badge?: string;
+    badgeBackgroundColor?: string;
+    badgeTextColor?: string;
+    lazy?: boolean;
+    focusedIcon?: ImageSourcePropType | AppleIcon;
+    unfocusedIcon?: ImageSourcePropType | AppleIcon;
+    iconRenderingMode?: IconRenderingMode;
+    activeTintColor?: string;
+    hidden?: boolean;
+    testID?: string;
+    role?: TabRole;
+    freezeOnBlur?: boolean;
+    style?: StyleProp<ViewStyle>;
+    preventsDefault?: boolean;
+};
+export type NavigationState<Route extends BaseRoute> = {
+    index: number;
+    routes: Route[];
+};

package/lib/typescript/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,mBAAmB,CAAC;AAEtD,MAAM,MAAM,SAAS,GAAG;IAAE,QAAQ,EAAE,QAAQ,CAAA;CAAE,CAAC;AAE/C,MAAM,MAAM,OAAO,GAAG,QAAQ,CAAC;AAE/B,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,UAAU,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEvD,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC9C,aAAa,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAChD,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,SAAS,IAAI;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC"}

package/lib/typescript/src/types.js

@@ -0,0 +1 @@
+export {};

package/lib/typescript/src/utils/BottomTabBarHeightContext.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const BottomTabBarHeightContext: React.Context<number | undefined>;

package/lib/typescript/src/utils/BottomTabBarHeightContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomTabBarHeightContext.d.ts","sourceRoot":"","sources":["../../../../src/utils/BottomTabBarHeightContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,yBAAyB,mCAE1B,CAAC"}

package/lib/typescript/src/utils/BottomTabBarHeightContext.js

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export const BottomTabBarHeightContext = React.createContext(undefined);

package/lib/typescript/src/utils/useBottomTabBarHeight.d.ts

@@ -0,0 +1 @@
+export declare function useBottomTabBarHeight(): number;

package/lib/typescript/src/utils/useBottomTabBarHeight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBottomTabBarHeight.d.ts","sourceRoot":"","sources":["../../../../src/utils/useBottomTabBarHeight.ts"],"names":[],"mappings":"AAIA,wBAAgB,qBAAqB,WAUpC"}

package/lib/typescript/src/utils/useBottomTabBarHeight.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { BottomTabBarHeightContext } from './BottomTabBarHeightContext';
+export function useBottomTabBarHeight() {
+    const height = React.useContext(BottomTabBarHeightContext);
+    if (height === undefined) {
+        throw new Error("Couldn't find the bottom tab bar height. Are you inside a screen in Native Bottom Tab Navigator?");
+    }
+    return height;
+}