@onekeyfe/react-native-bottom-tabs 6.7.0-alpha.383 → 6.7.0-alpha.384

package/lib/module/BottomTabs.js

@@ -9,6 +9,7 @@ import { BottomTabBarHeightContext } from "./utils/BottomTabBarHeightContext.js"
 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,
@@ -77,7 +82,9 @@ const BottomTabs = ({
   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%'
@@ -225,8 +232,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,
@@ -240,75 +247,93 @@ const BottomTabs = ({
   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,
+          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
-            })
-          }, 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 && !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,
+          onLayout: event => setCustomTabBarHeight(event.nativeEvent.layout.height),
+          children: renderCustomTabBar()
+        }) : null]
+      })]
+    })
   });
 };
 const styles = StyleSheet.create({
@@ -317,6 +342,11 @@ const styles = StyleSheet.create({
     height: '100%',
     flex: 1
   },
+  drawerMenu: {
+    position: 'absolute',
+    width: '78%',
+    height: '100%'
+  },
   screen: {
     position: 'absolute'
   }

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/typescript/src/BottomTabs.d.ts

@@ -5,6 +5,14 @@ import type { AppleIcon, BaseRoute, NavigationState, 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.
      *
@@ -204,6 +212,6 @@ interface Props<Route extends BaseRoute> {
      */
     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, 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, ...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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-bottom-tabs",
-  "version": "6.7.0-alpha.383",
+  "version": "6.7.0-alpha.384",
   "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;',

package/src/BottomTabs.tsx

@@ -21,6 +21,7 @@ import NativeBottomTabs, {
 import useLatestCallback from 'use-latest-callback';
 import type { AppleIcon, BaseRoute, NavigationState, TabRole } from './types';
 import DelayedFreeze from './DelayedFreeze';
+import NativeBottomTabsDrawer from './BottomTabsDrawerNativeComponent';
 import {
   BottomAccessoryView,
   type RNBottomTabsAccessoryViewProps,
@@ -34,6 +35,14 @@ interface Props<Route extends BaseRoute> {
    * Whether to show labels in tabs. When false, only icons will be displayed.
    */
   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.
    *
@@ -225,6 +234,10 @@ const BottomTabs = <Route extends BaseRoute>({
   renderLazyPlaceholder,
   onIndexChange,
   onTabDoublePress,
+  renderDrawerContent,
+  drawerOpen = false,
+  drawerSwipeEnabled = false,
+  onDrawerOpenChange,
   rippleColor,
   tabBarActiveTintColor: activeTintColor,
   tabBarInactiveTintColor: inactiveTintColor,
@@ -263,7 +276,11 @@ const BottomTabs = <Route extends BaseRoute>({
   const focusedKey = navigationState.routes[navigationState.index].key;
   const customTabBarWrapperRef = useRef<View>(null) as React.RefObject<any>;
   const nativeBottomTabsRef = useRef<React.ElementRef<typeof NativeBottomTabs>>(null);
-  const [tabBarHeight, setTabBarHeight] = React.useState<number | undefined>(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: DimensionValue; height: DimensionValue } | undefined
   >({ width: '100%', height: '100%' });
@@ -435,9 +452,9 @@ const BottomTabs = <Route extends BaseRoute>({
 
   const handleTabBarMeasured = React.useCallback(
     (event: NativeSyntheticEvent<{ height: number }>) => {
-      setTabBarHeight(event.nativeEvent.height);
+      setNativeTabBarHeight(event.nativeEvent.height);
     },
-    [setTabBarHeight]
+    [setNativeTabBarHeight]
   );
 
   const handleNativeLayout = React.useCallback(
@@ -451,96 +468,118 @@ const BottomTabs = <Route extends BaseRoute>({
   useLayoutEffect(() => {
     if (renderCustomTabBar && customTabBarWrapperRef.current) {
       customTabBarWrapperRef.current.measure((_x: number, _y: number, _width: number, height: number) => {
-        setTabBarHeight(height);
+        setCustomTabBarHeight(height);
       });
     }
   }, [renderCustomTabBar]);
 
   return (
     <BottomTabBarHeightContext.Provider value={tabBarHeight}>
-      <NativeBottomTabs
-        ref={nativeBottomTabsRef}
-        {...props}
-        {...tabLabelStyle}
+      <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
+        bottomBarHeight={tabBarHeight ?? 0}
+        onDrawerOpenChange={(event) =>
+          onDrawerOpenChange?.(event.nativeEvent.open)
         }
-        labeled={labeled}
       >
-        {trimmedRoutes.map((route) => {
-          if (getLazy({ route }) !== false && !loaded.includes(route.key)) {
-            return (
-              <View
-                key={route.key}
-                collapsable={false}
-                style={styles.fullWidth}
-              >
-                {renderLazyPlaceholder?.({ route })}
-              </View>
-            );
-          }
-
-          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'
+        <View collapsable={false} style={styles.drawerMenu}>
+          {Platform.OS !== 'web' ? renderDrawerContent?.() : null}
+        </View>
+        <View collapsable={false} style={styles.fullWidth}>
+          <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}
+            androidBottomBlurEnabled={
+              Platform.OS === 'android' &&
+              !renderCustomTabBar &&
+              androidBottomBlurEnabled
+            }
+            labeled={labeled}
+          >
+            {trimmedRoutes.map((route) => {
+              if (getLazy({ route }) !== false && !loaded.includes(route.key)) {
+                return (
+                  <View
+                    key={route.key}
+                    collapsable={false}
+                    style={styles.fullWidth}
+                  >
+                    {renderLazyPlaceholder?.({ route })}
+                  </View>
+                );
               }
+
+              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} delayedFreeze={delayedFreeze}>
+                    {renderScene({
+                      route,
+                      jumpTo,
+                    })}
+                  </DelayedFreeze>
+                </View>
+              );
+            })}
+            {Platform.OS === 'ios' &&
+            parseFloat(Platform.Version) >= 26 &&
+            renderBottomAccessoryView &&
+            !renderCustomTabBar ? (
+              <BottomAccessoryView
+                renderBottomAccessoryView={renderBottomAccessoryView}
+              />
+            ) : null}
+          </NativeBottomTabs>
+          {renderCustomTabBar ? (
+            <View
+              ref={customTabBarWrapperRef}
+              onLayout={(event) => setCustomTabBarHeight(event.nativeEvent.layout.height)}
             >
-              <DelayedFreeze freeze={!!freeze} delayedFreeze={delayedFreeze}>
-                {renderScene({
-                  route,
-                  jumpTo,
-                })}
-              </DelayedFreeze>
+              {renderCustomTabBar()}
             </View>
-          );
-        })}
-        {Platform.OS === 'ios' &&
-        parseFloat(Platform.Version) >= 26 &&
-        renderBottomAccessoryView &&
-        !renderCustomTabBar ? (
-          <BottomAccessoryView
-            renderBottomAccessoryView={renderBottomAccessoryView}
-          />
-        ) : null}
-      </NativeBottomTabs>
-      {renderCustomTabBar ? (
-        <View ref={customTabBarWrapperRef}>{renderCustomTabBar()}</View>
-      ) : null}
+          ) : null}
+        </View>
+      </NativeBottomTabsDrawer>
     </BottomTabBarHeightContext.Provider>
   );
 };
@@ -551,6 +590,11 @@ const styles = StyleSheet.create({
     height: '100%',
     flex: 1,
   },
+  drawerMenu: {
+    position: 'absolute',
+    width: '78%',
+    height: '100%',
+  },
   screen: {
     position: 'absolute',
   },

package/src/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/src/BottomTabsDrawerNativeComponent.web.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import type { BottomTabsDrawerNativeProps } from "./BottomTabsDrawerNativeComponent";
+
+// The fixed first slot is the menu; Web only renders the foreground slot.
+export default function BottomTabsDrawerWeb({
+  children,
+}: React.PropsWithChildren<BottomTabsDrawerNativeProps>) {
+  return <>{React.Children.toArray(children)[1]}</>;
+}