@onekeyfe/react-native-bottom-tabs 0.0.0-stage → 6.7.0-7

package/lib/module/BottomTabs.js

@@ -0,0 +1,323 @@
+"use strict";
+
+import React, { useLayoutEffect, useRef } from 'react';
+import { Image, Platform, StyleSheet, View, processColor } from 'react-native';
+import { BottomTabBarHeightContext } from "./utils/BottomTabBarHeightContext.js";
+
+// eslint-disable-next-line @react-native/no-deep-imports
+
+import NativeBottomTabs from './BottomTabsNativeComponent';
+import useLatestCallback from 'use-latest-callback';
+import DelayedFreeze from "./DelayedFreeze.js";
+import { BottomAccessoryView } from "./BottomAccessoryView.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const isAppleSymbol = icon => icon?.sfSymbol;
+const ANDROID_MAX_TABS = 100;
+const BottomTabs = ({
+  navigationState,
+  renderScene,
+  renderLazyPlaceholder,
+  onIndexChange,
+  onTabDoublePress,
+  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,
+  getSceneStyle = ({
+    route
+  }) => route.style,
+  getPreventsDefault = ({
+    route
+  }) => route.preventsDefault,
+  hapticFeedbackEnabled = false,
+  labeled = Platform.OS !== 'android' ? true : undefined,
+  getFreezeOnBlur = ({
+    route
+  }) => route.freezeOnBlur,
+  tabBar: renderCustomTabBar,
+  tabBarStyle,
+  tabLabelStyle,
+  renderBottomAccessoryView,
+  activeIndicatorColor,
+  delayedFreeze = false,
+  ...props
+}) => {
+  // @ts-ignore
+  const focusedKey = navigationState.routes[navigationState.index].key;
+  const customTabBarWrapperRef = useRef(null);
+  const nativeBottomTabsRef = 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(`BottomTabs only supports up to ${ANDROID_MAX_TABS} tabs on Android`);
+      return navigationState.routes.slice(0, ANDROID_MAX_TABS);
+    }
+    return navigationState.routes;
+  }, [navigationState.routes]);
+  const [loaded, setLoaded] = React.useState([focusedKey]);
+  if (!loaded.includes(focusedKey)) {
+    setLoaded(loaded => [...loaded, focusedKey]);
+  }
+  const isIOS = Platform.OS === 'ios';
+
+  // Unfocused (outline) icons — independent of focusedKey so the array stays
+  // stable across tab switches and the native side never reloads on switch.
+  const unfocusedIcons = React.useMemo(() => trimmedRoutes.map(route => getIcon({
+    route,
+    focused: false
+  })), [getIcon, trimmedRoutes]);
+  // Focused (solid) icons — also stable; handed to iOS as selectedImage.
+  const focusedIcons = React.useMemo(() => trimmedRoutes.map(route => getIcon({
+    route,
+    focused: true
+  })), [getIcon, trimmedRoutes]);
+  // Legacy single array driven by focusedKey. Android still swaps the icon in
+  // JS (it has no selectedImage equivalent).
+  const focusKeyedIcons = React.useMemo(() => trimmedRoutes.map(route => getIcon({
+    route,
+    focused: route.key === focusedKey
+  })), [focusedKey, getIcon, trimmedRoutes]);
+
+  // iOS hands both states to UIKit (image + selectedImage) so the focused
+  // artwork swaps natively, in sync with the selection animation, instead of
+  // waiting for a JS round-trip. Android keeps the focusedKey-driven array.
+  const icons = isIOS ? unfocusedIcons : focusKeyedIcons;
+  const items = React.useMemo(() => trimmedRoutes.map((route, index) => {
+    const icon = icons[index];
+    const isSfSymbol = isAppleSymbol(icon);
+    if (Platform.OS === 'android' && isSfSymbol) {
+      console.warn('SF Symbols are not supported on Android. Use require() or pass uri to load an image instead.');
+    }
+    const color = processColor(getActiveTintColor({
+      route
+    }));
+    const badgeBgColor = processColor(getBadgeBackgroundColor?.({
+      route
+    }));
+    const badgeTxtColor = processColor(getBadgeTextColor?.({
+      route
+    }));
+    return {
+      key: route.key,
+      title: getLabelText({
+        route
+      }) ?? route.key,
+      sfSymbol: isSfSymbol ? icon.sfSymbol : undefined,
+      badge: getBadge?.({
+        route
+      }),
+      badgeBackgroundColor: typeof badgeBgColor === 'number' ? badgeBgColor : undefined,
+      badgeTextColor: typeof badgeTxtColor === 'number' ? badgeTxtColor : undefined,
+      activeTintColor: typeof color === 'number' ? color : undefined,
+      hidden: getHidden?.({
+        route
+      }),
+      testID: getTestID?.({
+        route
+      }),
+      role: getRole?.({
+        route
+      }),
+      preventsDefault: getPreventsDefault?.({
+        route
+      })
+    };
+  }), [trimmedRoutes, icons, getLabelText, getBadge, getBadgeBackgroundColor, getBadgeTextColor, getActiveTintColor, getHidden, getTestID, getRole, getPreventsDefault]);
+  const resolvedIconAssets = React.useMemo(() => icons.map(icon => {
+    if (icon && !isAppleSymbol(icon)) {
+      // @ts-ignore - resolveAssetSource accepts ImageSourcePropType
+      const resolved = Image.resolveAssetSource(icon);
+      return {
+        uri: resolved?.uri ?? '',
+        width: resolved?.width ?? 0,
+        height: resolved?.height ?? 0,
+        scale: resolved?.scale ?? 1
+      };
+    }
+    return {
+      uri: '',
+      width: 0,
+      height: 0,
+      scale: 1
+    };
+  }), [icons]);
+
+  // Focused (solid) assets passed to iOS as selectedImage. iOS only — Android
+  // ignores selectedIcons and keeps swapping via the focusedKey array above.
+  const resolvedSelectedIconAssets = React.useMemo(() => focusedIcons.map(icon => {
+    if (icon && !isAppleSymbol(icon)) {
+      // @ts-ignore - resolveAssetSource accepts ImageSourcePropType
+      const resolved = Image.resolveAssetSource(icon);
+      return {
+        uri: resolved?.uri ?? '',
+        width: resolved?.width ?? 0,
+        height: resolved?.height ?? 0,
+        scale: resolved?.scale ?? 1
+      };
+    }
+    return {
+      uri: '',
+      width: 0,
+      height: 0,
+      scale: 1
+    };
+  }), [focusedIcons]);
+  const jumpTo = useLatestCallback(key => {
+    const index = trimmedRoutes.findIndex(route => route.key === key);
+    if (index === -1) {
+      return;
+    }
+    return onIndexChange(index);
+  });
+  const handleTabDoublePress = React.useCallback(event => {
+    const {
+      key
+    } = event.nativeEvent;
+    const index = trimmedRoutes.findIndex(route => route.key === key);
+    if (index !== -1) {
+      onTabDoublePress?.(index);
+    }
+  }, [trimmedRoutes, onTabDoublePress]);
+  const handlePageSelected = React.useCallback(event => {
+    const {
+      key
+    } = event.nativeEvent;
+    const accepted = jumpTo(key);
+    if (accepted === false) {
+      nativeBottomTabsRef.current?.setNativeProps({
+        selectedPage: focusedKey
+      });
+    }
+  }, [focusedKey, jumpTo]);
+  const handleTabBarMeasured = React.useCallback(event => {
+    setTabBarHeight(event.nativeEvent.height);
+  }, [setTabBarHeight]);
+  const handleNativeLayout = React.useCallback(event => {
+    const {
+      width,
+      height
+    } = event.nativeEvent;
+    setMeasuredDimensions({
+      width,
+      height
+    });
+  }, [setMeasuredDimensions]);
+  useLayoutEffect(() => {
+    if (renderCustomTabBar && customTabBarWrapperRef.current) {
+      customTabBarWrapperRef.current.measure((_x, _y, _width, height) => {
+        setTabBarHeight(height);
+      });
+    }
+  }, [renderCustomTabBar]);
+  return /*#__PURE__*/_jsxs(BottomTabBarHeightContext.Provider, {
+    value: tabBarHeight,
+    children: [/*#__PURE__*/_jsxs(NativeBottomTabs, {
+      ref: nativeBottomTabsRef,
+      ...props,
+      ...tabLabelStyle,
+      style: styles.fullWidth,
+      items: items,
+      icons: renderCustomTabBar ? undefined : resolvedIconAssets,
+      selectedIcons: isIOS && !renderCustomTabBar ? resolvedSelectedIconAssets : undefined,
+      selectedPage: focusedKey,
+      tabBarHidden: props.tabBarHidden ?? !!renderCustomTabBar,
+      onTabDoublePress: handleTabDoublePress,
+      onPageSelected: handlePageSelected,
+      onTabBarMeasured: handleTabBarMeasured,
+      onNativeLayout: handleNativeLayout,
+      hapticFeedbackEnabled: hapticFeedbackEnabled,
+      activeTintColor: activeTintColor,
+      inactiveTintColor: inactiveTintColor,
+      barTintColor: tabBarStyle?.backgroundColor,
+      rippleColor: rippleColor,
+      activeIndicatorColor: activeIndicatorColor,
+      labeled: labeled,
+      children: [trimmedRoutes.map(route => {
+        if (getLazy({
+          route
+        }) !== false && !loaded.includes(route.key)) {
+          return /*#__PURE__*/_jsx(View, {
+            collapsable: false,
+            style: styles.fullWidth,
+            children: renderLazyPlaceholder?.({
+              route
+            })
+          }, route.key);
+        }
+        const focused = route.key === focusedKey;
+        const freeze = !focused ? getFreezeOnBlur({
+          route
+        }) : false;
+        const customStyle = getSceneStyle({
+          route
+        });
+        return /*#__PURE__*/_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: /*#__PURE__*/_jsx(DelayedFreeze, {
+            freeze: !!freeze,
+            delayedFreeze: delayedFreeze,
+            children: renderScene({
+              route,
+              jumpTo
+            })
+          })
+        }, route.key);
+      }), Platform.OS === 'ios' && parseFloat(Platform.Version) >= 26 && renderBottomAccessoryView && !renderCustomTabBar ? /*#__PURE__*/_jsx(BottomAccessoryView, {
+        renderBottomAccessoryView: renderBottomAccessoryView
+      }) : null]
+    }), renderCustomTabBar ? /*#__PURE__*/_jsx(View, {
+      ref: customTabBarWrapperRef,
+      children: renderCustomTabBar()
+    }) : null]
+  });
+};
+const styles = StyleSheet.create({
+  fullWidth: {
+    width: '100%',
+    height: '100%',
+    flex: 1
+  },
+  screen: {
+    position: 'absolute'
+  }
+});
+export default BottomTabs;
+//# sourceMappingURL=BottomTabs.js.map

package/lib/module/BottomTabsNativeComponent.ts

@@ -0,0 +1,69 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ColorValue, ProcessedColorValue, ViewProps } from 'react-native';
+import type {
+  DirectEventHandler,
+  Double,
+  Int32,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+//@ts-ignore
+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 BottomTabsItems = ReadonlyArray<{
+  key: string;
+  title: string;
+  sfSymbol?: string;
+  badge?: string;
+  badgeBackgroundColor?: ProcessedColorValue | null;
+  badgeTextColor?: ProcessedColorValue | null;
+  activeTintColor?: ProcessedColorValue | null;
+  hidden?: boolean;
+  testID?: string;
+  role?: string;
+  preventsDefault?: boolean;
+}>;
+
+export interface BottomTabsNativeProps extends ViewProps {
+  items: BottomTabsItems;
+  selectedPage: string;
+  onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;
+  onTabDoublePress?: DirectEventHandler<OnPageSelectedEventData>;
+  onTabBarMeasured?: DirectEventHandler<OnTabBarMeasured>;
+  onNativeLayout?: DirectEventHandler<OnNativeLayout>;
+  icons?: ReadonlyArray<ImageSource>;
+  selectedIcons?: ReadonlyArray<ImageSource>;
+  tabBarHidden?: boolean;
+  labeled?: boolean;
+  sidebarAdaptable?: boolean;
+  scrollEdgeAppearance?: string;
+  barTintColor?: ColorValue;
+  translucent?: WithDefault<boolean, true>;
+  rippleColor?: ColorValue;
+  activeTintColor?: ColorValue;
+  inactiveTintColor?: ColorValue;
+  disablePageAnimations?: boolean;
+  activeIndicatorColor?: ColorValue;
+  hapticFeedbackEnabled?: boolean;
+  minimizeBehavior?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  fontSize?: Int32;
+  ignoreBottomInsets?: boolean;
+  androidTabBarStyle?: WithDefault<'default' | 'floating', 'default'>;
+  ignoreKeyboardInsets?: WithDefault<boolean, true>;
+}
+
+export default codegenNativeComponent<BottomTabsNativeProps>('RNBottomTabsView');

package/lib/module/DelayedFreeze.js

@@ -0,0 +1,31 @@
+"use strict";
+
+import React from 'react';
+import { Freeze } from 'react-freeze';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ANIMATION_DELAY = 200;
+function DelayedFreeze({
+  freeze,
+  delayedFreeze,
+  children
+}) {
+  const [freezeState, setFreezeState] = React.useState(false);
+  React.useEffect(() => {
+    if (!delayedFreeze) {
+      return;
+    }
+    const id = setTimeout(() => {
+      setFreezeState(freeze);
+    }, ANIMATION_DELAY);
+    return () => {
+      clearTimeout(id);
+    };
+  }, [freeze, delayedFreeze]);
+  const shouldFreeze = delayedFreeze ? freeze ? freezeState : false : freeze;
+  return /*#__PURE__*/_jsx(Freeze, {
+    freeze: shouldFreeze,
+    children: children
+  });
+}
+export default DelayedFreeze;
+//# sourceMappingURL=DelayedFreeze.js.map

package/lib/module/NativeSVGDecoder.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import { TurboModuleRegistry } from 'react-native';
+export default TurboModuleRegistry.getEnforcing('SvgDecoder');
+//# sourceMappingURL=NativeSVGDecoder.js.map

package/lib/module/SceneMap.js

@@ -0,0 +1,28 @@
+"use strict";
+
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SceneComponent = /*#__PURE__*/React.memo(({
+  component,
+  ...rest
+}) => {
+  return /*#__PURE__*/React.createElement(component, rest);
+});
+SceneComponent.displayName = 'SceneComponent';
+export function SceneMap(scenes) {
+  return ({
+    route,
+    jumpTo
+  }) => {
+    const component = scenes[route.key];
+    if (!component) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(SceneComponent, {
+      jumpTo: jumpTo,
+      component: component,
+      route: route
+    }, route.key);
+  };
+}
+//# sourceMappingURL=SceneMap.js.map

package/lib/module/codegen-types.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=codegen-types.d.js.map

package/lib/module/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+import BottomTabs from "./BottomTabs.js";
+
+/**
+ * Views
+ */
+export default BottomTabs;
+
+/**
+ * Utilities
+ */
+export { SceneMap } from "./SceneMap.js";
+export { useBottomTabBarHeight } from "./utils/useBottomTabBarHeight.js";
+export { BottomTabBarHeightContext } from "./utils/BottomTabBarHeightContext.js";
+
+/**
+ * Types
+ */
+//# sourceMappingURL=index.js.map

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/module/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/utils/BottomTabBarHeightContext.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import * as React from 'react';
+export const BottomTabBarHeightContext = /*#__PURE__*/React.createContext(undefined);
+//# sourceMappingURL=BottomTabBarHeightContext.js.map

package/lib/module/utils/useBottomTabBarHeight.js

@@ -0,0 +1,12 @@
+"use strict";
+
+import * as React from 'react';
+import { BottomTabBarHeightContext } from "./BottomTabBarHeightContext.js";
+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;
+}
+//# sourceMappingURL=useBottomTabBarHeight.js.map

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface RNBottomTabsAccessoryViewProps {
+    renderBottomAccessoryView: (props: {
+        placement: 'inline' | 'expanded' | 'none';
+    }) => React.ReactNode;
+}
+export declare const BottomAccessoryView: (props: RNBottomTabsAccessoryViewProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BottomAccessoryView.d.ts.map

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

@@ -0,0 +1,16 @@
+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>;
+}
+declare const _default: import("react-native/types_generated/Libraries/Utilities/codegenNativeComponent").NativeComponentType<BottomAccessoryViewNativeProps>;
+export default _default;
+//# sourceMappingURL=BottomAccessoryViewNativeComponent.d.ts.map