@onekeyfe/react-native-bottom-tabs 6.7.0-18 → 6.7.0-20

package/lib/module/BottomTabsDrawerNativeComponent.ts

@@ -0,0 +1,19 @@
+import { codegenNativeComponent, type ViewProps } from "react-native";
+import type {
+  DirectEventHandler,
+  Double,
+  WithDefault,
+} from "react-native/Libraries/Types/CodegenTypes";
+
+export interface BottomTabsDrawerNativeProps extends ViewProps {
+  enabled?: WithDefault<boolean, false>;
+  open?: WithDefault<boolean, false>;
+  swipeEnabled?: WithDefault<boolean, false>;
+  hapticFeedbackEnabled?: WithDefault<boolean, false>;
+  bottomBarHeight?: Double;
+  onDrawerOpenChange?: DirectEventHandler<Readonly<{ open: boolean }>>;
+}
+
+export default codegenNativeComponent<BottomTabsDrawerNativeProps>(
+  "RNBottomTabsDrawer"
+);

package/lib/module/BottomTabsDrawerNativeComponent.web.js

@@ -0,0 +1,13 @@
+"use strict";
+
+import React from "react";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+// The fixed first slot is the menu; Web only renders the foreground slot.
+export default function BottomTabsDrawerWeb({
+  children
+}) {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: React.Children.toArray(children)[1]
+  });
+}
+//# sourceMappingURL=BottomTabsDrawerNativeComponent.web.js.map

package/lib/module/BottomTabsNativeComponent.ts

@@ -22,6 +22,14 @@ export type OnNativeLayout = Readonly<{
   height: Double;
 }>;
 
+// Where the system draws the tab bar: 'bottom', or 'leading' / 'trailing' for
+// a vertical bar (the iPhone Duo side strip, iOS 27.1+).
+export type OnTabBarPlacementChange = Readonly<{
+  placement: string;
+}>;
+
+export type OnSideAccessoryPress = Readonly<{}>;
+
 export type BottomTabsItems = ReadonlyArray<{
   key: string;
   title: string;
@@ -65,6 +73,11 @@ export interface BottomTabsNativeProps extends ViewProps {
   ignoreBottomInsets?: boolean;
   androidTabBarStyle?: WithDefault<'default' | 'floating', 'default'>;
   ignoreKeyboardInsets?: WithDefault<boolean, true>;
+  onTabBarPlacementChange?: DirectEventHandler<OnTabBarPlacementChange>;
+  // A round button drawn above a vertical tab bar; iOS only.
+  sideAccessoryIcon?: ImageSource;
+  sideAccessoryLabel?: string;
+  onSideAccessoryPress?: DirectEventHandler<OnSideAccessoryPress>;
 }
 
 export default codegenNativeComponent<BottomTabsNativeProps>('RNBottomTabsView');

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

@@ -1,10 +1,18 @@
-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';
+import React from "react";
+import { type ColorValue, type ImageSourcePropType, type StyleProp, type ViewStyle } from "react-native";
+import type { ImageSource } from "react-native/Libraries/Image/ImageSource";
+import type { AppleIcon, BaseRoute, NavigationState, TabBarPlacement, TabRole } from "./types";
+import { type RNBottomTabsAccessoryViewProps } from "./BottomAccessoryView";
 interface Props<Route extends BaseRoute> {
     labeled?: boolean;
+    /** Optional physical-left menu; all motion and input are owned by native. */
+    renderDrawerContent?: () => React.ReactNode;
+    /** External drawer target. Mirror onDrawerOpenChange for user transitions. */
+    drawerOpen?: boolean;
+    /** Enables root-screen content swipes after inner horizontal views reach their boundary. */
+    drawerSwipeEnabled?: boolean;
+    /** Reports a completed user target so the external open state can follow it. */
+    onDrawerOpenChange?: (open: boolean) => void;
     /**
      * A tab bar style that adapts to each platform.
      *
@@ -27,11 +35,11 @@ interface Props<Route extends BaseRoute> {
     /**
      * 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';
+    scrollEdgeAppearance?: "default" | "opaque" | "transparent";
     /**
      * Behavior for minimizing the tab bar. (iOS 26+)
      */
-    minimizeBehavior?: 'automatic' | 'onScrollDown' | 'onScrollUp' | 'never';
+    minimizeBehavior?: "automatic" | "onScrollDown" | "onScrollUp" | "never";
     /**
      * Active tab color.
      */
@@ -178,7 +186,7 @@ interface Props<Route extends BaseRoute> {
      * A function that returns a React element to display as bottom accessory view.
      * iOS 26+ only.
      */
-    renderBottomAccessoryView?: RNBottomTabsAccessoryViewProps['renderBottomAccessoryView'];
+    renderBottomAccessoryView?: RNBottomTabsAccessoryViewProps["renderBottomAccessoryView"];
     /**
      * Whether the tab bar is hidden.
      */
@@ -190,7 +198,7 @@ interface Props<Route extends BaseRoute> {
     /**
      * Visual style of the Android tab bar. Android only.
      */
-    androidTabBarStyle?: 'default' | 'floating';
+    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
@@ -203,7 +211,25 @@ interface Props<Route extends BaseRoute> {
      * original delayed behavior.
      */
     delayedFreeze?: boolean;
+    /**
+     * Called when the system moves the tab bar between the bottom edge and a
+     * vertical bar on the leading or trailing edge (iPhone Duo). iOS only.
+     */
+    onTabBarPlacementChange?: (placement: TabBarPlacement) => void;
+    /**
+     * Icon of a round button shown above a vertical tab bar. The button only
+     * appears while the tab bar is vertical and visible. iOS only.
+     */
+    sideAccessoryIcon?: ImageSourcePropType;
+    /**
+     * Accessibility label of the side accessory button.
+     */
+    sideAccessoryLabel?: string;
+    /**
+     * Called when the side accessory button is pressed.
+     */
+    onSideAccessoryPress?: () => void;
 }
-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, androidBottomBlurEnabled, delayedFreeze, ...props }: Props<Route>) => import("react/jsx-runtime").JSX.Element;
+declare const BottomTabs: <Route extends BaseRoute>({ navigationState, renderScene, renderLazyPlaceholder, onIndexChange, onTabDoublePress, renderDrawerContent, drawerOpen, drawerSwipeEnabled, onDrawerOpenChange, 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, androidBottomBlurEnabled, delayedFreeze, onTabBarPlacementChange, sideAccessoryIcon, sideAccessoryLabel, onSideAccessoryPress, ...props }: Props<Route>) => import("react/jsx-runtime").JSX.Element;
 export default BottomTabs;
 //# sourceMappingURL=BottomTabs.d.ts.map

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

@@ -0,0 +1,15 @@
+import { type ViewProps } from "react-native";
+import type { DirectEventHandler, Double, WithDefault } from "react-native/Libraries/Types/CodegenTypes";
+export interface BottomTabsDrawerNativeProps extends ViewProps {
+    enabled?: WithDefault<boolean, false>;
+    open?: WithDefault<boolean, false>;
+    swipeEnabled?: WithDefault<boolean, false>;
+    hapticFeedbackEnabled?: WithDefault<boolean, false>;
+    bottomBarHeight?: Double;
+    onDrawerOpenChange?: DirectEventHandler<Readonly<{
+        open: boolean;
+    }>>;
+}
+declare const _default: import("react-native/types_generated/Libraries/Utilities/codegenNativeComponent").NativeComponentType<BottomTabsDrawerNativeProps>;
+export default _default;
+//# sourceMappingURL=BottomTabsDrawerNativeComponent.d.ts.map

package/lib/typescript/src/BottomTabsDrawerNativeComponent.web.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { BottomTabsDrawerNativeProps } from "./BottomTabsDrawerNativeComponent";
+export default function BottomTabsDrawerWeb({ children, }: React.PropsWithChildren<BottomTabsDrawerNativeProps>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BottomTabsDrawerNativeComponent.web.d.ts.map

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

@@ -11,6 +11,10 @@ export type OnNativeLayout = Readonly<{
     width: Double;
     height: Double;
 }>;
+export type OnTabBarPlacementChange = Readonly<{
+    placement: string;
+}>;
+export type OnSideAccessoryPress = Readonly<{}>;
 export type BottomTabsItems = ReadonlyArray<{
     key: string;
     title: string;
@@ -53,6 +57,10 @@ export interface BottomTabsNativeProps extends ViewProps {
     ignoreBottomInsets?: boolean;
     androidTabBarStyle?: WithDefault<'default' | 'floating', 'default'>;
     ignoreKeyboardInsets?: WithDefault<boolean, true>;
+    onTabBarPlacementChange?: DirectEventHandler<OnTabBarPlacementChange>;
+    sideAccessoryIcon?: ImageSource;
+    sideAccessoryLabel?: string;
+    onSideAccessoryPress?: DirectEventHandler<OnSideAccessoryPress>;
 }
 declare const _default: import("react-native").HostComponent<BottomTabsNativeProps>;
 export default _default;

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

@@ -12,5 +12,5 @@ export { BottomTabBarHeightContext } from './utils/BottomTabBarHeightContext';
 /**
  * Types
  */
-export type { AppleIcon, TabRole } from './types';
+export type { AppleIcon, TabBarPlacement, TabRole } from './types';
 //# sourceMappingURL=index.d.ts.map

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

@@ -5,6 +5,7 @@ export type AppleIcon = {
     sfSymbol: SFSymbol;
 };
 export type TabRole = 'search';
+export type TabBarPlacement = 'bottom' | 'leading' | 'trailing';
 export type BaseRoute = {
     key: string;
     title?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-bottom-tabs",
-  "version": "6.7.0-18",
+  "version": "6.7.0-20",
   "description": "Native bottom tabs (tab bar + scene container) for React Native on iOS and Android",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",
@@ -107,7 +107,8 @@
     "ios": {
       "componentProvider": {
         "RNBottomTabsView": "RCTBottomTabsComponentView",
-        "RNBottomTabsAccessoryView": "RCTBottomAccessoryComponentView"
+        "RNBottomTabsAccessoryView": "RCTBottomAccessoryComponentView",
+        "RNBottomTabsDrawer": "RCTBottomTabsDrawerComponentView"
       },
       "modulesConformingToProtocol": {
         "RCTImageDataDecoder": [

package/react-native.config.js

@@ -2,7 +2,10 @@ module.exports = {
   dependency: {
     platforms: {
       android: {
-        componentDescriptors: ['RNBottomTabsViewComponentDescriptor'],
+        componentDescriptors: [
+          'RNBottomTabsViewComponentDescriptor',
+          'RNBottomTabsDrawerComponentDescriptor',
+        ],
         cmakeListsPath: undefined,
         packageImportPath:
           'import com.onekey.bottomtabs.BottomTabsPackage;',