@onekeyfe/react-native-bottom-tabs 6.7.0-19 → 6.7.0-21

package/lib/module/BottomTabs.js

@@ -1,14 +1,15 @@
 "use strict";
 
-import React, { useLayoutEffect, useRef } from 'react';
-import { Image, Platform, StyleSheet, View, processColor } from 'react-native';
+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 NativeBottomTabs from "./BottomTabsNativeComponent";
+import useLatestCallback from "use-latest-callback";
 import DelayedFreeze from "./DelayedFreeze.js";
+import NativeBottomTabsDrawer from "./BottomTabsDrawerNativeComponent";
 import { BottomAccessoryView } from "./BottomAccessoryView.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const isAppleSymbol = icon => icon?.sfSymbol;
@@ -19,6 +20,10 @@ const BottomTabs = ({
   renderLazyPlaceholder,
   onIndexChange,
   onTabDoublePress,
+  renderDrawerContent,
+  drawerOpen = false,
+  drawerSwipeEnabled = false,
+  onDrawerOpenChange,
   rippleColor,
   tabBarActiveTintColor: activeTintColor,
   tabBarInactiveTintColor: inactiveTintColor,
@@ -60,7 +65,7 @@ const BottomTabs = ({
     route
   }) => route.preventsDefault,
   hapticFeedbackEnabled = false,
-  labeled = Platform.OS !== 'android' ? true : undefined,
+  labeled = Platform.OS !== "android" ? true : undefined,
   getFreezeOnBlur = ({
     route
   }) => route.freezeOnBlur,
@@ -69,21 +74,27 @@ const BottomTabs = ({
   tabLabelStyle,
   renderBottomAccessoryView,
   activeIndicatorColor,
-  androidBottomBlurEnabled = Platform.OS === 'android' && Number(Platform.Version) >= 36,
+  androidBottomBlurEnabled = Platform.OS === "android" && Number(Platform.Version) >= 36,
   delayedFreeze = false,
+  onTabBarPlacementChange,
+  sideAccessoryIcon,
+  sideAccessoryLabel,
+  onSideAccessoryPress,
   ...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 [nativeTabBarHeight, setNativeTabBarHeight] = React.useState(0);
+  const [customTabBarHeight, setCustomTabBarHeight] = React.useState(0);
+  const tabBarHeight = renderCustomTabBar ? customTabBarHeight : props.tabBarHidden ? 0 : nativeTabBarHeight;
   const [measuredDimensions, setMeasuredDimensions] = React.useState({
-    width: '100%',
-    height: '100%'
+    width: "100%",
+    height: "100%"
   });
   const trimmedRoutes = React.useMemo(() => {
-    if (Platform.OS === 'android' && navigationState.routes.length > ANDROID_MAX_TABS) {
+    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);
     }
@@ -93,7 +104,7 @@ const BottomTabs = ({
   if (!loaded.includes(focusedKey)) {
     setLoaded(loaded => [...loaded, focusedKey]);
   }
-  const isIOS = Platform.OS === 'ios';
+  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.
@@ -120,8 +131,8 @@ const BottomTabs = ({
   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.');
+    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
@@ -141,9 +152,9 @@ const BottomTabs = ({
       badge: getBadge?.({
         route
       }),
-      badgeBackgroundColor: typeof badgeBgColor === 'number' ? badgeBgColor : undefined,
-      badgeTextColor: typeof badgeTxtColor === 'number' ? badgeTxtColor : undefined,
-      activeTintColor: typeof color === 'number' ? color : undefined,
+      badgeBackgroundColor: typeof badgeBgColor === "number" ? badgeBgColor : undefined,
+      badgeTextColor: typeof badgeTxtColor === "number" ? badgeTxtColor : undefined,
+      activeTintColor: typeof color === "number" ? color : undefined,
       hidden: getHidden?.({
         route
       }),
@@ -163,14 +174,14 @@ const BottomTabs = ({
       // @ts-ignore - resolveAssetSource accepts ImageSourcePropType
       const resolved = Image.resolveAssetSource(icon);
       return {
-        uri: resolved?.uri ?? '',
+        uri: resolved?.uri ?? "",
         width: resolved?.width ?? 0,
         height: resolved?.height ?? 0,
         scale: resolved?.scale ?? 1
       };
     }
     return {
-      uri: '',
+      uri: "",
       width: 0,
       height: 0,
       scale: 1
@@ -184,14 +195,14 @@ const BottomTabs = ({
       // @ts-ignore - resolveAssetSource accepts ImageSourcePropType
       const resolved = Image.resolveAssetSource(icon);
       return {
-        uri: resolved?.uri ?? '',
+        uri: resolved?.uri ?? "",
         width: resolved?.width ?? 0,
         height: resolved?.height ?? 0,
         scale: resolved?.scale ?? 1
       };
     }
     return {
-      uri: '',
+      uri: "",
       width: 0,
       height: 0,
       scale: 1
@@ -225,8 +236,8 @@ const BottomTabs = ({
     }
   }, [focusedKey, jumpTo]);
   const handleTabBarMeasured = React.useCallback(event => {
-    setTabBarHeight(event.nativeEvent.height);
-  }, [setTabBarHeight]);
+    setNativeTabBarHeight(event.nativeEvent.height);
+  }, [setNativeTabBarHeight]);
   const handleNativeLayout = React.useCallback(event => {
     const {
       width,
@@ -237,88 +248,134 @@ const BottomTabs = ({
       height
     });
   }, [setMeasuredDimensions]);
+  const handleTabBarPlacementChange = React.useCallback(event => {
+    onTabBarPlacementChange?.(event.nativeEvent.placement);
+  }, [onTabBarPlacementChange]);
+  const handleSideAccessoryPress = React.useCallback(() => {
+    onSideAccessoryPress?.();
+  }, [onSideAccessoryPress]);
+  const resolvedSideAccessoryIcon = React.useMemo(() => {
+    if (!isIOS || !sideAccessoryIcon) {
+      return undefined;
+    }
+    // @ts-ignore - resolveAssetSource accepts ImageSourcePropType
+    const resolved = Image.resolveAssetSource(sideAccessoryIcon);
+    return resolved?.uri ? {
+      uri: resolved.uri,
+      width: resolved.width ?? 0,
+      height: resolved.height ?? 0,
+      scale: resolved.scale ?? 1
+    } : undefined;
+  }, [sideAccessoryIcon]);
   useLayoutEffect(() => {
     if (renderCustomTabBar && customTabBarWrapperRef.current) {
       customTabBarWrapperRef.current.measure((_x, _y, _width, height) => {
-        setTabBarHeight(height);
+        setCustomTabBarHeight(height);
       });
     }
   }, [renderCustomTabBar]);
-  return /*#__PURE__*/_jsxs(BottomTabBarHeightContext.Provider, {
+  return /*#__PURE__*/_jsx(BottomTabBarHeightContext.Provider, {
     value: tabBarHeight,
-    children: [/*#__PURE__*/_jsxs(NativeBottomTabs, {
-      ref: nativeBottomTabsRef,
-      ...props,
-      ...tabLabelStyle,
+    children: /*#__PURE__*/_jsxs(NativeBottomTabsDrawer, {
       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,
+      enabled: !!renderDrawerContent,
+      open: drawerOpen,
+      swipeEnabled: drawerSwipeEnabled,
       hapticFeedbackEnabled: hapticFeedbackEnabled,
-      activeTintColor: activeTintColor,
-      inactiveTintColor: inactiveTintColor,
-      barTintColor: tabBarStyle?.backgroundColor,
-      rippleColor: rippleColor,
-      activeIndicatorColor: activeIndicatorColor,
-      androidBottomBlurEnabled: Platform.OS === 'android' && !renderCustomTabBar && androidBottomBlurEnabled,
-      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?.({
+      bottomBarHeight: tabBarHeight ?? 0,
+      onDrawerOpenChange: event => onDrawerOpenChange?.(event.nativeEvent.open),
+      children: [/*#__PURE__*/_jsx(View, {
+        collapsable: false,
+        style: styles.drawerMenu,
+        children: Platform.OS !== "web" ? renderDrawerContent?.() : null
+      }), /*#__PURE__*/_jsxs(View, {
+        collapsable: false,
+        style: styles.fullWidth,
+        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,
+          onTabBarPlacementChange: handleTabBarPlacementChange,
+          sideAccessoryIcon: renderCustomTabBar ? undefined : resolvedSideAccessoryIcon,
+          sideAccessoryLabel: sideAccessoryLabel,
+          onSideAccessoryPress: handleSideAccessoryPress,
+          hapticFeedbackEnabled: hapticFeedbackEnabled,
+          activeTintColor: activeTintColor,
+          inactiveTintColor: inactiveTintColor,
+          barTintColor: tabBarStyle?.backgroundColor,
+          rippleColor: rippleColor,
+          activeIndicatorColor: activeIndicatorColor,
+          androidBottomBlurEnabled: Platform.OS === "android" && !renderCustomTabBar && androidBottomBlurEnabled,
+          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
-            })
-          }, 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]
+            }) : 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,
+          onLayout: event => setCustomTabBarHeight(event.nativeEvent.layout.height),
+          children: renderCustomTabBar()
+        }) : null]
+      })]
+    })
   });
 };
 const styles = StyleSheet.create({
   fullWidth: {
-    width: '100%',
-    height: '100%',
+    width: "100%",
+    height: "100%",
     flex: 1
   },
+  drawerMenu: {
+    position: "absolute",
+    width: "78%",
+    height: "100%"
+  },
   screen: {
-    position: 'absolute'
+    position: "absolute"
   }
 });
 export default BottomTabs;

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-19",
+  "version": "6.7.0-21",
   "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;',