@soundtrackio/react-native-bottom-tabs 1.4.0

package/src/BottomAccessoryViewNativeComponent.ts

@@ -0,0 +1,27 @@
+import { codegenNativeComponent } from 'react-native';
+import type { ViewProps } from 'react-native';
+import type {
+  DirectEventHandler,
+  Double,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export type OnNativeLayout = Readonly<{
+  width: Double;
+  height: Double;
+}>;
+
+export type OnPlacementChanged = Readonly<{
+  placement: string;
+}>;
+
+export interface BottomAccessoryViewNativeProps extends ViewProps {
+  onNativeLayout?: DirectEventHandler<OnNativeLayout>;
+  onPlacementChanged?: DirectEventHandler<OnPlacementChanged>;
+}
+
+export default codegenNativeComponent<BottomAccessoryViewNativeProps>(
+  'BottomAccessoryView',
+  {
+    excludedPlatforms: ['android'],
+  }
+);

package/src/DelayedFreeze.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Freeze } from 'react-freeze';
+
+interface FreezeWrapperProps {
+  freeze: boolean;
+  children: React.ReactNode;
+}
+
+// Animation delay for freeze effect.
+const ANIMATION_DELAY = 200;
+
+// This component delays the freeze effect by animation delay.
+// So that the screen is not frozen immediately causing background flash.
+function DelayedFreeze({ freeze, children }: FreezeWrapperProps) {
+  // flag used for determining whether freeze should be enabled
+  const [freezeState, setFreezeState] = React.useState(false);
+
+  React.useEffect(() => {
+    const id = setTimeout(() => {
+      setFreezeState(freeze);
+    }, ANIMATION_DELAY);
+
+    return () => {
+      clearTimeout(id);
+    };
+  }, [freeze]);
+
+  return <Freeze freeze={freeze ? freezeState : false}>{children}</Freeze>;
+}
+
+export default DelayedFreeze;

package/src/NativeSVGDecoder.ts

@@ -0,0 +1,5 @@
+import { TurboModuleRegistry, type TurboModule } from 'react-native';
+
+export interface Spec extends TurboModule {}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('SvgDecoder');

package/src/SceneMap.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+type SceneProps = {
+  route: any;
+  jumpTo: (key: string) => void;
+};
+
+const SceneComponent = React.memo(
+  <T extends { component: React.ComponentType<any> } & SceneProps>({
+    component,
+    ...rest
+  }: T) => {
+    return React.createElement(component, rest);
+  }
+);
+
+SceneComponent.displayName = 'SceneComponent';
+
+export function SceneMap<T>(scenes: { [key: string]: React.ComponentType<T> }) {
+  return ({ route, jumpTo }: SceneProps) => {
+    const component = scenes[route.key];
+    if (!component) {
+      return null;
+    }
+    return (
+      <SceneComponent
+        key={route.key}
+        jumpTo={jumpTo}
+        component={component}
+        route={route}
+      />
+    );
+  };
+}

package/src/TabView.tsx

@@ -0,0 +1,558 @@
+import React, { useLayoutEffect, useRef } from 'react';
+import type {
+  OnNativeLayout,
+  OnPageSelectedEventData,
+  OnTabBarMeasured,
+  TabViewItems,
+} from './TabViewNativeComponent';
+import {
+  type ColorValue,
+  type DimensionValue,
+  Image,
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  View,
+  type ViewStyle,
+  processColor,
+} from 'react-native';
+import { BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
+
+// eslint-disable-next-line @react-native/no-deep-imports
+import type { ImageSource } from 'react-native/Libraries/Image/ImageSource';
+import NativeTabView from './TabViewNativeComponent';
+import useLatestCallback from 'use-latest-callback';
+import type {
+  AppleIcon,
+  BaseRoute,
+  IconRenderingMode,
+  LayoutDirection,
+  NavigationState,
+  TabRole,
+} from './types';
+import DelayedFreeze from './DelayedFreeze';
+import {
+  BottomAccessoryView,
+  type BottomAccessoryViewProps,
+} from './BottomAccessoryView';
+
+const isAppleSymbol = (icon: any): icon is { sfSymbol: string } =>
+  icon?.sfSymbol;
+
+interface Props<Route extends BaseRoute> {
+  /*
+   * Whether to show labels in tabs. When false, only icons will be displayed.
+   */
+  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;
+}
+
+const ANDROID_MAX_TABS = 100;
+
+const TabView = <Route extends BaseRoute>({
+  navigationState,
+  renderScene,
+  onIndexChange,
+  onTabLongPress,
+  rippleColor,
+  tabBarActiveTintColor: activeTintColor,
+  tabBarInactiveTintColor: inactiveTintColor,
+  getBadge = ({ route }: { route: Route }) => route.badge,
+  getBadgeBackgroundColor = ({ route }: { route: Route }) =>
+    route.badgeBackgroundColor,
+  getBadgeTextColor = ({ route }: { route: Route }) => route.badgeTextColor,
+  getLazy = ({ route }: { route: Route }) => route.lazy,
+  getLabelText = ({ route }: { route: Route }) => route.title,
+  getIcon = ({ route, focused }: { route: Route; focused: boolean }) =>
+    route.unfocusedIcon
+      ? focused
+        ? route.focusedIcon
+        : route.unfocusedIcon
+      : route.focusedIcon,
+  getHidden = ({ route }: { route: Route }) => route.hidden,
+  getActiveTintColor = ({ route }: { route: Route }) => route.activeTintColor,
+  getTestID = ({ route }: { route: Route }) => route.testID,
+  getRole = ({ route }: { route: Route }) => route.role,
+  getIconRenderingMode = ({ route }: { route: Route }) =>
+    route.iconRenderingMode,
+  getSceneStyle = ({ route }: { route: Route }) => route.style,
+  getPreventsDefault = ({ route }: { route: 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: Route }) => route.freezeOnBlur,
+  tabBar: renderCustomTabBar,
+  tabBarHidden,
+  tabBarHideOnKeyboard,
+  tabBarStyle,
+  tabLabelStyle,
+  renderBottomAccessoryView,
+  layoutDirection = 'locale',
+  experimental_bakedTintColors: experimentalBakedTintColors = false,
+  ...props
+}: Props<Route>) => {
+  // @ts-ignore
+  const focusedKey = navigationState.routes[navigationState.index].key;
+  const customTabBarWrapperRef = useRef<View>(null);
+  const [tabBarHeight, setTabBarHeight] = React.useState<number | undefined>(0);
+  const [measuredDimensions, setMeasuredDimensions] = React.useState<
+    { width: DimensionValue; height: DimensionValue } | undefined
+  >({ 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<string[]>([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: TabViewItems = 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: ImageSource[] = 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: ImageSource[] = 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: string) => {
+    const index = trimmedRoutes.findIndex((route) => route.key === key);
+
+    onIndexChange(index);
+  });
+
+  const handleTabLongPress = React.useCallback(
+    ({ nativeEvent: { key } }: { nativeEvent: OnPageSelectedEventData }) => {
+      const index = trimmedRoutes.findIndex((route) => route.key === key);
+      onTabLongPress?.(index);
+    },
+    [trimmedRoutes, onTabLongPress]
+  );
+
+  const handlePageSelected = React.useCallback(
+    ({ nativeEvent: { key } }: { nativeEvent: OnPageSelectedEventData }) => {
+      jumpTo(key);
+    },
+    [jumpTo]
+  );
+
+  const handleTabBarMeasured = React.useCallback(
+    ({ nativeEvent: { height } }: { nativeEvent: OnTabBarMeasured }) => {
+      setTabBarHeight(height);
+    },
+    [setTabBarHeight]
+  );
+
+  const handleNativeLayout = React.useCallback(
+    ({ nativeEvent: { width, height } }: { nativeEvent: OnNativeLayout }) => {
+      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 (
+    <BottomTabBarHeightContext.Provider value={tabBarHeight}>
+      <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}
+      >
+        {trimmedRoutes.map((route) => {
+          if (getLazy({ route }) !== false && !loaded.includes(route.key)) {
+            // Don't render a screen if we've never navigated to it
+            return (
+              <View
+                key={route.key}
+                collapsable={false}
+                style={styles.fullWidth}
+              />
+            );
+          }
+
+          const focused = route.key === focusedKey;
+          const freeze = !focused ? getFreezeOnBlur({ route }) : false;
+
+          const customStyle = getSceneStyle({ route });
+
+          return (
+            <View
+              key={route.key}
+              style={[
+                styles.screen,
+                renderCustomTabBar ? styles.fullWidth : measuredDimensions,
+                customStyle,
+              ]}
+              collapsable={false}
+              pointerEvents={focused ? 'auto' : 'none'}
+              accessibilityElementsHidden={!focused}
+              importantForAccessibility={
+                focused ? 'auto' : 'no-hide-descendants'
+              }
+            >
+              <DelayedFreeze freeze={!!freeze}>
+                {renderScene({
+                  route,
+                  jumpTo,
+                })}
+              </DelayedFreeze>
+            </View>
+          );
+        })}
+        {Platform.OS === 'ios' &&
+        parseFloat(Platform.Version) >= 26 &&
+        renderBottomAccessoryView &&
+        !renderCustomTabBar ? (
+          <BottomAccessoryView
+            renderBottomAccessoryView={renderBottomAccessoryView}
+          />
+        ) : null}
+      </NativeTabView>
+      {renderCustomTabBar ? (
+        <View ref={customTabBarWrapperRef}>{renderCustomTabBar()}</View>
+      ) : null}
+    </BottomTabBarHeightContext.Provider>
+  );
+};
+
+const styles = StyleSheet.create({
+  fullWidth: {
+    width: '100%',
+    height: '100%',
+    flex: 1,
+  },
+  screen: {
+    position: 'absolute',
+  },
+});
+
+export default TabView;