@onekeyfe/react-native-bottom-tabs 0.0.0-stage → 6.7.0-alpha.339

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

@@ -0,0 +1,202 @@
+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, NavigationState, TabRole } from './types';
+import { type RNBottomTabsAccessoryViewProps } from './BottomAccessoryView';
+interface Props<Route extends BaseRoute> {
+    labeled?: boolean;
+    /**
+     * A tab bar style that adapts to each platform.
+     *
+     * Tab views using the sidebar adaptable style have an appearance
+     * that varies depending on the platform:
+     * - 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.
+     */
+    tabBarInactiveTintColor?: ColorValue;
+    /**
+     * State for the tab view.
+     */
+    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;
+    /**
+     * Function which takes a route and returns a placeholder for an unloaded lazy scene.
+     */
+    renderLazyPlaceholder?: (props: {
+        route: Route;
+    }) => React.ReactNode | null;
+    /**
+     * Callback which is called on tab change, receives the index of the new tab as argument.
+     */
+    onIndexChange: (index: number) => boolean | void;
+    /**
+     * Callback which is called when the same tab is pressed twice within the
+     * platform double-tap timeout, receives the index of the tab as argument.
+     * Each press still goes through `onIndexChange` / reselection first.
+     */
+    onTabDoublePress?: (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. (Android only)
+     */
+    getBadgeBackgroundColor?: (props: {
+        route: Route;
+    }) => ColorValue | undefined;
+    /**
+     * Get badge text color for the tab. (Android only)
+     */
+    getBadgeTextColor?: (props: {
+        route: Route;
+    }) => ColorValue | undefined;
+    /**
+     * Get active tint color for the tab.
+     */
+    getActiveTintColor?: (props: {
+        route: Route;
+    }) => ColorValue | undefined;
+    /**
+     * Determines whether the tab prevents default action on press.
+     */
+    getPreventsDefault?: (props: {
+        route: Route;
+    }) => boolean | undefined;
+    /**
+     * Get icon for the tab.
+     */
+    getIcon?: (props: {
+        route: Route;
+        focused: boolean;
+    }) => ImageSource | AppleIcon | undefined | null;
+    /**
+     * Get hidden for the tab.
+     */
+    getHidden?: (props: {
+        route: Route;
+    }) => boolean | undefined;
+    /**
+     * Get testID for the tab.
+     */
+    getTestID?: (props: {
+        route: Route;
+    }) => string | undefined;
+    /**
+     * Get role for the tab. (iOS only)
+     */
+    getRole?: (props: {
+        route: Route;
+    }) => TabRole | undefined;
+    /**
+     * Custom tab bar to render.
+     */
+    tabBar?: () => React.ReactNode;
+    /**
+     * Get freezeOnBlur for the current screen.
+     */
+    getFreezeOnBlur?: (props: {
+        route: Route;
+    }) => boolean | undefined;
+    /**
+     * Get style for the scene.
+     */
+    getSceneStyle?: (props: {
+        route: Route;
+    }) => StyleProp<ViewStyle>;
+    tabBarStyle?: {
+        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?: {
+        fontFamily?: string;
+        fontWeight?: string;
+        fontSize?: number;
+    };
+    /**
+     * A function that returns a React element to display as bottom accessory view.
+     * iOS 26+ only.
+     */
+    renderBottomAccessoryView?: RNBottomTabsAccessoryViewProps['renderBottomAccessoryView'];
+    /**
+     * Whether the tab bar is hidden.
+     */
+    tabBarHidden?: boolean;
+    /**
+     * Whether to ignore bottom system insets (navigation bar). Android only.
+     */
+    ignoreBottomInsets?: boolean;
+    /**
+     * Visual style of the Android tab bar. Android only.
+     */
+    androidTabBarStyle?: 'default' | 'floating';
+    /**
+     * Whether the tab bar ignores the soft keyboard. Defaults to true, so the
+     * keyboard covers the tab bar as on iOS. Set to false to pad the tab bar by
+     * the keyboard height so it rises above the keyboard. Android only.
+     */
+    ignoreKeyboardInsets?: boolean;
+    /**
+     * Whether to delay freeze/unfreeze by 200ms on tab switch.
+     * Defaults to false (immediate freeze). Set to true to restore the
+     * original delayed behavior.
+     */
+    delayedFreeze?: boolean;
+}
+declare const BottomTabs: <Route extends BaseRoute>({ navigationState, renderScene, renderLazyPlaceholder, onIndexChange, onTabDoublePress, rippleColor, tabBarActiveTintColor: activeTintColor, tabBarInactiveTintColor: inactiveTintColor, getBadge, getBadgeBackgroundColor, getBadgeTextColor, getLazy, getLabelText, getIcon, getHidden, getActiveTintColor, getTestID, getRole, getSceneStyle, getPreventsDefault, hapticFeedbackEnabled, labeled, getFreezeOnBlur, tabBar: renderCustomTabBar, tabBarStyle, tabLabelStyle, renderBottomAccessoryView, activeIndicatorColor, delayedFreeze, ...props }: Props<Route>) => import("react/jsx-runtime").JSX.Element;
+export default BottomTabs;
+//# sourceMappingURL=BottomTabs.d.ts.map

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

@@ -0,0 +1,58 @@
+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 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>;
+}
+declare const _default: import("react-native").HostComponent<BottomTabsNativeProps>;
+export default _default;
+//# sourceMappingURL=BottomTabsNativeComponent.d.ts.map

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface FreezeWrapperProps {
+    freeze: boolean;
+    delayedFreeze?: boolean;
+    children: React.ReactNode;
+}
+declare function DelayedFreeze({ freeze, delayedFreeze, children }: FreezeWrapperProps): import("react/jsx-runtime").JSX.Element;
+export default DelayedFreeze;
+//# sourceMappingURL=DelayedFreeze.d.ts.map

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

@@ -0,0 +1,6 @@
+import { type TurboModule } from 'react-native';
+export interface Spec extends TurboModule {
+}
+declare const _default: Spec;
+export default _default;
+//# sourceMappingURL=NativeSVGDecoder.d.ts.map

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+type SceneProps = {
+    route: any;
+    jumpTo: (key: string) => void;
+};
+export declare function SceneMap<T>(scenes: {
+    [key: string]: React.ComponentType<T>;
+}): ({ route, jumpTo }: SceneProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=SceneMap.d.ts.map

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

@@ -0,0 +1,16 @@
+import BottomTabs from './BottomTabs';
+/**
+ * Views
+ */
+export default BottomTabs;
+/**
+ * Utilities
+ */
+export { SceneMap } from './SceneMap';
+export { useBottomTabBarHeight } from './utils/useBottomTabBarHeight';
+export { BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
+/**
+ * Types
+ */
+export type { AppleIcon, TabRole } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,29 @@
+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 BaseRoute = {
+    key: string;
+    title?: string;
+    badge?: string;
+    badgeBackgroundColor?: string;
+    badgeTextColor?: string;
+    lazy?: boolean;
+    focusedIcon?: ImageSourcePropType | AppleIcon;
+    unfocusedIcon?: ImageSourcePropType | AppleIcon;
+    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[];
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const BottomTabBarHeightContext: React.Context<number | undefined>;
+//# sourceMappingURL=BottomTabBarHeightContext.d.ts.map

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

@@ -0,0 +1,2 @@
+export declare function useBottomTabBarHeight(): number;
+//# sourceMappingURL=useBottomTabBarHeight.d.ts.map

package/package.json

@@ -1,6 +1,119 @@
 {
   "name": "@onekeyfe/react-native-bottom-tabs",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "6.7.0-alpha.339",
+  "description": "Native bottom tabs (tab bar + scene container) for React Native on iOS and Android",
+  "source": "./src/index.tsx",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "docs",
+    "common",
+    "react-native.config.js",
+    "*.podspec",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*",
+    "!**/*.map"
+  ],
+  "scripts": {
+    "clean": "del-cli lib",
+    "prepare": "rm -rf lib && bob build",
+    "typecheck": "tsc -b",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "yarn prepare && npm whoami && npm publish --access public"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/OneKeyHQ/app-modules.git",
+    "directory": "native-views/react-native-bottom-tabs"
+  },
+  "author": "OneKey",
+  "bugs": {
+    "url": "https://github.com/OneKeyHQ/app-modules/issues"
+  },
+  "homepage": "https://github.com/OneKeyHQ/app-modules/tree/main/native-views/react-native-bottom-tabs#readme",
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "react": "19.2.3",
+    "react-native": "patch:react-native@npm%3A0.86.2#~/.yarn/patches/react-native-npm-0.86.2-c9d546616f.patch",
+    "react-native-builder-bob": "^0.40.13",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "react-freeze": "^1.0.0",
+    "sf-symbols-typescript": "^2.0.0",
+    "use-latest-callback": "^0.2.1"
+  },
+  "codegenConfig": {
+    "name": "RNBottomTabs",
+    "type": "all",
+    "jsSrcsDir": "./src",
+    "android": {
+      "javaPackageName": "com.onekey.bottomtabs"
+    },
+    "ios": {
+      "componentProvider": {
+        "RNBottomTabsView": "RCTBottomTabsComponentView",
+        "RNBottomTabsAccessoryView": "RCTBottomAccessoryComponentView"
+      },
+      "modulesConformingToProtocol": {
+        "RCTImageDataDecoder": [
+          "SvgDecoder"
+        ]
+      }
+    }
+  }
+}

package/react-native-bottom-tabs.podspec

@@ -0,0 +1,36 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-bottom-tabs"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.ios.deployment_target = "15.1"
+  s.module_name  = "BottomTabsModule"
+
+  s.source       = { :git => "https://github.com/nicholasxuu/app-modules.git", :tag => "#{s.version}" }
+
+  s.source_files = [
+    "ios/**/*.{swift}",
+    "ios/**/*.{h,m,mm,cpp}",
+  ]
+
+  s.static_framework = true
+
+  s.subspec "common" do |ss|
+    ss.source_files         = "common/cpp/**/*.{cpp,h}"
+    ss.pod_target_xcconfig  = { "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/common/cpp\"" }
+  end
+
+  s.pod_target_xcconfig = {
+    'PRODUCT_MODULE_NAME' => 'BottomTabsModule',
+    'DEFINES_MODULE' => 'YES'
+  }
+
+  install_modules_dependencies(s)
+end

package/react-native.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        componentDescriptors: ['RNBottomTabsViewComponentDescriptor'],
+        cmakeListsPath: undefined,
+        packageImportPath:
+          'import com.onekey.bottomtabs.BottomTabsPackage;',
+        packageInstance: 'new BottomTabsPackage()',
+      },
+    },
+  },
+};

package/src/BottomAccessoryView.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import type { DimensionValue, NativeSyntheticEvent, ViewStyle } from 'react-native';
+import BottomAccessoryViewNativeComponent from './BottomAccessoryViewNativeComponent';
+
+const defaultStyle: ViewStyle = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+};
+
+export interface RNBottomTabsAccessoryViewProps {
+  renderBottomAccessoryView: (props: {
+    placement: 'inline' | 'expanded' | 'none';
+  }) => React.ReactNode;
+}
+
+export const BottomAccessoryView = (props: RNBottomTabsAccessoryViewProps) => {
+  const { renderBottomAccessoryView } = props;
+  const [bottomAccessoryDimensions, setBottomAccessoryDimensions] =
+    React.useState<
+      { width: DimensionValue; height: DimensionValue } | undefined
+    >({ width: '100%', height: '100%' });
+  const [placement, setPlacement] = React.useState<
+    'inline' | 'expanded' | 'none'
+  >('none');
+
+  const handleNativeLayout = React.useCallback(
+    (event: NativeSyntheticEvent<{ width: number; height: number }>) => {
+      const { width, height } = event.nativeEvent;
+      setBottomAccessoryDimensions({ width, height });
+    },
+    [setBottomAccessoryDimensions]
+  );
+
+  const handlePlacementChanged = React.useCallback(
+    (event: NativeSyntheticEvent<{ placement: string }>) => {
+      const newPlacement = event.nativeEvent.placement;
+      if (
+        newPlacement === 'inline' ||
+        newPlacement === 'expanded' ||
+        newPlacement === 'none'
+      ) {
+        setPlacement(newPlacement);
+      }
+    },
+    [setPlacement]
+  );
+
+  return (
+    <BottomAccessoryViewNativeComponent
+      style={[defaultStyle, bottomAccessoryDimensions]}
+      onNativeLayout={handleNativeLayout}
+      onPlacementChanged={handlePlacementChanged}
+    >
+      {renderBottomAccessoryView({ placement })}
+    </BottomAccessoryViewNativeComponent>
+  );
+};

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>(
+  'RNBottomTabsAccessoryView',
+  {
+    excludedPlatforms: ['android'],
+  }
+);