@storybook/react-native-ui 8.3.10 → 8.4.0-alpha.1

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _storybook_react_native_theming from '@storybook/react-native-theming';
 import * as react_native from 'react-native';
-import { PressableProps, View, TouchableOpacityProps, TouchableOpacity } from 'react-native';
+import { PressableProps, View, TouchableOpacityProps } from 'react-native';
 import * as React$1 from 'react';
 import React__default, { FC, ComponentProps, ReactElement, PropsWithChildren, ReactNode } from 'react';
 import { State, StoriesHash, API } from '@storybook/core/manager-api';
@@ -15,7 +15,7 @@ interface NodeProps$1 {
     isExpandable?: boolean;
     isExpanded?: boolean;
 }
-declare const BranchNode: _storybook_react_native_theming.StyledComponent<react_native.TouchableOpacityProps & {
+declare const BranchNode: _storybook_react_native_theming.StyledComponent<react_native.TouchableOpacityProps & React__default.RefAttributes<react_native.View> & {
     theme?: _storybook_react_native_theming.Theme;
     as?: React__default.ElementType;
 } & {
@@ -25,16 +25,16 @@ declare const BranchNode: _storybook_react_native_theming.StyledComponent<react_
     isComponent?: boolean;
     isSelected?: boolean;
 }, {}, {
-    ref?: React__default.Ref<react_native.TouchableOpacity>;
+    ref?: React__default.Ref<any>;
 }>;
-declare const LeafNode: _storybook_react_native_theming.StyledComponent<react_native.TouchableOpacityProps & {
+declare const LeafNode: _storybook_react_native_theming.StyledComponent<react_native.TouchableOpacityProps & React__default.RefAttributes<react_native.View> & {
     theme?: _storybook_react_native_theming.Theme;
     as?: React__default.ElementType;
 } & {
     depth?: number;
     selected?: boolean;
 }, {}, {
-    ref?: React__default.Ref<react_native.TouchableOpacity>;
+    ref?: React__default.Ref<any>;
 }>;
 declare const GroupNode: FC<ComponentProps<typeof BranchNode> & {
     isExpanded?: boolean;
@@ -156,7 +156,7 @@ interface ButtonProps extends TouchableOpacityProps {
     text?: string;
     Icon?: (props: SvgProps) => ReactElement;
 }
-declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<TouchableOpacity>>;
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<any>>;
 declare const ButtonText: _storybook_react_native_theming.StyledComponent<react_native.TextProps & {
     theme?: _storybook_react_native_theming.Theme;
     as?: React.ElementType;
@@ -172,7 +172,7 @@ declare const ButtonIcon: ({ Icon, active, variant, }: {
     active: ButtonProps["active"];
 }) => react_jsx_runtime.JSX.Element;
 
-declare const IconButton: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<TouchableOpacity>>;
+declare const IconButton: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<unknown>>;
 
 type LayoutContextType = {
     isDesktop: boolean;

package/dist/index.js

@@ -4506,70 +4506,66 @@ var import_react_native_reanimated = __toESM(require("react-native-reanimated"))
 var import_react_native_safe_area_context = require("react-native-safe-area-context");
 var import_react_native_theming13 = require("@storybook/react-native-theming");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var MobileAddonsPanel = (0, import_react15.forwardRef)(({ storyId, onStateChange }, ref) => {
-  const theme = (0, import_react_native_theming13.useTheme)();
-  const reducedMotion = (0, import_react_native_reanimated.useReducedMotion)();
-  const addonsPanelBottomSheetRef = (0, import_react15.useRef)(null);
-  const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
-  const animatedPosition = (0, import_react_native_reanimated.useSharedValue)(0);
-  (0, import_react_native_reanimated.useAnimatedKeyboard)();
-  (0, import_react15.useImperativeHandle)(ref, () => ({
-    setAddonsPanelOpen: (open) => {
-      if (open) {
-        onStateChange(true);
-        addonsPanelBottomSheetRef.current?.present();
-      } else {
-        onStateChange(false);
-        addonsPanelBottomSheetRef.current?.dismiss();
-      }
-    }
-  }));
-  const { height } = (0, import_react_native6.useWindowDimensions)();
-  const adjustedBottomSheetSize = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
-    return {
-      maxHeight: height - animatedPosition.value - insets.bottom
-    };
-  }, [animatedPosition.value, height, insets.bottom]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-    import_bottom_sheet2.BottomSheetModal,
-    {
-      ref: addonsPanelBottomSheetRef,
-      index: 1,
-      animateOnMount: !reducedMotion,
-      onDismiss: () => {
-        onStateChange(false);
-      },
-      snapPoints: ["25%", "50%", "75%"],
-      style: {
-        paddingTop: 8
-      },
-      animatedPosition,
-      containerStyle: {},
-      backgroundStyle: {
-        borderRadius: 0,
-        borderTopColor: theme.appBorderColor,
-        borderTopWidth: 1,
-        backgroundColor: theme.background.content
-      },
-      handleIndicatorStyle: { backgroundColor: theme.textMutedColor },
-      keyboardBehavior: "extend",
-      enableDismissOnClose: true,
-      enableHandlePanningGesture: true,
-      stackBehavior: "replace",
-      enableDynamicSizing: false,
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native_reanimated.default.View, { style: [{ flex: 1 }, adjustedBottomSheetSize], children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        AddonsTabs,
-        {
-          onClose: () => {
-            onStateChange(false);
-            addonsPanelBottomSheetRef.current?.dismiss();
-          },
-          storyId
+var MobileAddonsPanel = (0, import_react15.forwardRef)(
+  ({ storyId }, ref) => {
+    const theme = (0, import_react_native_theming13.useTheme)();
+    const reducedMotion = (0, import_react_native_reanimated.useReducedMotion)();
+    const addonsPanelBottomSheetRef = (0, import_react15.useRef)(null);
+    const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+    const animatedPosition = (0, import_react_native_reanimated.useSharedValue)(0);
+    (0, import_react_native_reanimated.useAnimatedKeyboard)();
+    (0, import_react15.useImperativeHandle)(ref, () => ({
+      setAddonsPanelOpen: (open) => {
+        if (open) {
+          addonsPanelBottomSheetRef.current?.present();
+        } else {
+          addonsPanelBottomSheetRef.current?.dismiss();
         }
-      ) })
-    }
-  );
-});
+      }
+    }));
+    const { height } = (0, import_react_native6.useWindowDimensions)();
+    const adjustedBottomSheetSize = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
+      return {
+        maxHeight: height - animatedPosition.value - insets.bottom
+      };
+    }, [animatedPosition.value, height, insets.bottom]);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      import_bottom_sheet2.BottomSheetModal,
+      {
+        ref: addonsPanelBottomSheetRef,
+        index: 1,
+        animateOnMount: !reducedMotion,
+        snapPoints: ["25%", "50%", "75%"],
+        style: {
+          paddingTop: 8
+        },
+        animatedPosition,
+        containerStyle: {},
+        backgroundStyle: {
+          borderRadius: 0,
+          borderTopColor: theme.appBorderColor,
+          borderTopWidth: 1,
+          backgroundColor: theme.background.content
+        },
+        handleIndicatorStyle: { backgroundColor: theme.textMutedColor },
+        keyboardBehavior: "extend",
+        enableDismissOnClose: true,
+        enableHandlePanningGesture: true,
+        stackBehavior: "replace",
+        enableDynamicSizing: false,
+        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native_reanimated.default.View, { style: [{ flex: 1 }, adjustedBottomSheetSize], children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          AddonsTabs,
+          {
+            onClose: () => {
+              addonsPanelBottomSheetRef.current?.dismiss();
+            },
+            storyId
+          }
+        ) })
+      }
+    );
+  }
+);
 var AddonsTabs = ({ onClose, storyId }) => {
   const panels = import_manager_api.addons.getElements(import_types3.Addon_TypesEnum.PANEL);
   const [addonSelected, setAddonSelected] = (0, import_react15.useState)(Object.keys(panels)[0]);
@@ -4671,7 +4667,7 @@ var BottomSheetBackdropComponent = (backdropComponentProps) => /* @__PURE__ */ (
   }
 );
 var MobileMenuDrawer = (0, import_react16.forwardRef)(
-  ({ children, onStateChange }, ref) => {
+  ({ children }, ref) => {
     const reducedMotion = (0, import_react_native_reanimated2.useReducedMotion)();
     const insets = (0, import_react_native_safe_area_context2.useSafeAreaInsets)();
     const theme = (0, import_react_native_theming14.useTheme)();
@@ -4679,11 +4675,9 @@ var MobileMenuDrawer = (0, import_react16.forwardRef)(
     (0, import_react16.useImperativeHandle)(ref, () => ({
       setMobileMenuOpen: (open) => {
         if (open) {
-          onStateChange(true);
           menuBottomSheetRef.current?.present();
         } else {
           import_react_native7.Keyboard.dismiss();
-          onStateChange(false);
           menuBottomSheetRef.current?.dismiss();
         }
       }
@@ -4694,9 +4688,6 @@ var MobileMenuDrawer = (0, import_react16.forwardRef)(
         ref: menuBottomSheetRef,
         index: 1,
         animateOnMount: !reducedMotion,
-        onDismiss: () => {
-          onStateChange(false);
-        },
         snapPoints: ["50%", "75%"],
         enableDismissOnClose: true,
         enableHandlePanningGesture: true,
@@ -4911,8 +4902,6 @@ var Layout = ({
 }) => {
   const theme = (0, import_react_native_theming15.useTheme)();
   const mobileMenuDrawerRef = (0, import_react17.useRef)(null);
-  const [menuOpen, setMenuOpen] = (0, import_react17.useState)(false);
-  const [drawerOpen, setDrawerOpen] = (0, import_react17.useState)(false);
   const addonPanelRef = (0, import_react17.useRef)(null);
   const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
   const { isDesktop } = useLayout();
@@ -4987,7 +4976,7 @@ var Layout = ({
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native8.View, { style: { flex: 1 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native8.View, { style: { flex: 1 }, children }),
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native8.View, { style: { flex: 1, overflow: "hidden" }, children }),
             /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               import_react_native8.View,
               {
@@ -5014,29 +5003,8 @@ var Layout = ({
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native8.View, { style: { flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native8.View, { style: { flex: 1 }, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, onStateChange: setDrawerOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native8.View, { style: { paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }, children: theme.base === "light" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Logo, { height: 25, width: 125 }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DarkLogo, { height: 25, width: 125 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        Sidebar,
-        {
-          extra: [],
-          previewInitialized: true,
-          indexError: void 0,
-          refs: {},
-          setSelection: ({ storyId: newStoryId }) => {
-            const channel = import_manager_api2.addons.getChannel();
-            channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
-          },
-          status: {},
-          index: storyHash,
-          storyId: story?.id,
-          refId: DEFAULT_REF_ID
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id, onStateChange: setMenuOpen }),
-    (import_react_native8.Platform.OS !== "android" || !menuOpen && !drawerOpen) && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Container3, { style: { marginBottom: insets.bottom }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Nav, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native8.View, { style: { flex: 1, overflow: "hidden" }, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Container3, { style: { marginBottom: insets.bottom }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Nav, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
         Button2,
         {
@@ -5062,7 +5030,28 @@ var Layout = ({
           Icon: BottomBarToggleIcon
         }
       )
-    ] }) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native8.View, { style: { paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }, children: theme.base === "light" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Logo, { height: 25, width: 125 }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DarkLogo, { height: 25, width: 125 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        Sidebar,
+        {
+          extra: [],
+          previewInitialized: true,
+          indexError: void 0,
+          refs: {},
+          setSelection: ({ storyId: newStoryId }) => {
+            const channel = import_manager_api2.addons.getChannel();
+            channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
+          },
+          status: {},
+          index: storyHash,
+          storyId: story?.id,
+          refId: DEFAULT_REF_ID
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
   ] });
 };
 var Nav = import_react_native_theming15.styled.View({
@@ -5077,7 +5066,6 @@ var Nav = import_react_native_theming15.styled.View({
 var Container3 = import_react_native_theming15.styled.View(({ theme }) => ({
   alignSelf: "flex-end",
   width: "100%",
-  zIndex: 10,
   backgroundColor: theme.barBg,
   borderTopColor: theme.appBorderColor,
   borderTopWidth: 1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "8.3.10",
+  "version": "8.4.0-alpha.1",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -49,17 +49,18 @@
   },
   "devDependencies": {
     "@types/jest": "^29.4.3",
-    "@types/react": "~18.2.79",
-    "babel-jest": "^29.4.3",
-    "jest": "29.7.0",
-    "react-test-renderer": "18.2.0",
+    "@types/react": "~18.3.12",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "react-test-renderer": "^18.3.1",
+    "ts-dedent": "^2.2.0",
     "tsup": "^7.2.0",
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@storybook/core": "^8.3.5",
-    "@storybook/react": "^8.3.5",
-    "@storybook/react-native-theming": "^8.3.10",
+    "@storybook/core": "^8.4.0",
+    "@storybook/react": "^8.4.0",
+    "@storybook/react-native-theming": "^8.4.0-alpha.1",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",
@@ -80,5 +81,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "df58f982babc3080187a88c9959d56d18eff82e4"
+  "gitHead": "cda075d67d926d964def6d6eb9bb0fca09bb0d24"
 }

package/src/Button.tsx

@@ -1,6 +1,6 @@
 import { styled, useTheme } from '@storybook/react-native-theming';
 import { ReactElement, forwardRef, useEffect, useMemo, useState } from 'react';
-import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+import type { TouchableOpacityProps } from 'react-native';
 import { SvgProps } from 'react-native-svg';
 
 export interface ButtonProps extends TouchableOpacityProps {
@@ -15,7 +15,8 @@ export interface ButtonProps extends TouchableOpacityProps {
   Icon?: (props: SvgProps) => ReactElement;
 }
 
-export const Button = forwardRef<TouchableOpacity, ButtonProps>(
+// TODO fix this type
+export const Button = forwardRef<any, ButtonProps>(
   (
     {
       Icon,
@@ -29,7 +30,7 @@ export const Button = forwardRef<TouchableOpacity, ButtonProps>(
       children,
       text,
       ...props
-    },
+    }: ButtonProps,
     ref
   ) => {
     // let Comp: 'button' | 'a' | typeof Slot = 'button';

package/src/IconButton.tsx

@@ -1,9 +1,8 @@
-import { TouchableOpacity } from 'react-native';
 import { Button, ButtonProps } from './Button';
 import { forwardRef } from 'react';
 
-export const IconButton = forwardRef<TouchableOpacity, ButtonProps>(
-  ({ padding = 'small', variant = 'ghost', ...props }, ref) => {
+export const IconButton = forwardRef(
+  ({ padding = 'small', variant = 'ghost', ...props }: ButtonProps, ref) => {
     return <Button padding={padding} variant={variant} ref={ref} {...props} />;
   }
 );

package/src/Layout.stories.tsx

@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Layout } from './Layout';
 import { mockDataset } from './mockdata';
-import { Text } from 'react-native';
+import { Text, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { LayoutProvider } from './LayoutProvider';
 
 const meta = {
   title: 'components/Layout',
@@ -12,7 +13,9 @@ const meta = {
     (Story) => (
       <GestureHandlerRootView style={{ flex: 1 }}>
         <BottomSheetModalProvider>
-          <Story />
+          <LayoutProvider>
+            <Story />
+          </LayoutProvider>
         </BottomSheetModalProvider>
       </GestureHandlerRootView>
     ),
@@ -31,3 +34,44 @@ export const Basic: Story = {
     storyId: 'emails-buildnotification--with-changes',
   },
 };
+
+export const OverflowSidebarExample: Story = {
+  args: {
+    children: (
+      <View
+        style={{
+          width: '100%',
+          backgroundColor: 'lightgreen',
+          alignItems: 'flex-end',
+          left: '-50%',
+        }}
+      >
+        <Text style={{ width: '50%', textAlign: 'right' }}>
+          This box should not overflow the side navigation in desktop mode
+        </Text>
+      </View>
+    ),
+    //@ts-ignore
+    storyHash: mockDataset.withRoot,
+    storyId: 'emails-buildnotification--with-changes',
+  },
+};
+
+export const OverflowAddonsExample: Story = {
+  args: {
+    children: (
+      <View
+        style={{
+          height: '100%',
+          backgroundColor: 'lightgreen',
+          bottom: '-50%',
+        }}
+      >
+        <Text style={{ height: '50%' }}>This box should not overflow the addons panel</Text>
+      </View>
+    ),
+    //@ts-ignore
+    storyHash: mockDataset.withRoot,
+    storyId: 'emails-buildnotification--with-changes',
+  },
+};

package/src/Layout.tsx

@@ -4,7 +4,7 @@ import { type API_IndexHash, type Args, type StoryContext } from '@storybook/cor
 import type { ReactRenderer } from '@storybook/react';
 import { styled, useTheme } from '@storybook/react-native-theming';
 import { ReactNode, useRef, useState } from 'react';
-import { Platform, ScrollView, Text, View } from 'react-native';
+import { ScrollView, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { IconButton } from './IconButton';
 import { useLayout } from './LayoutProvider';
@@ -28,8 +28,6 @@ export const Layout = ({
 }) => {
   const theme = useTheme();
   const mobileMenuDrawerRef = useRef<MobileMenuDrawerRef>(null);
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [drawerOpen, setDrawerOpen] = useState(false);
   const addonPanelRef = useRef<MobileAddonsPanelRef>(null);
   const insets = useSafeAreaInsets();
   const { isDesktop } = useLayout();
@@ -105,7 +103,7 @@ export const Layout = ({
         </View>
 
         <View style={{ flex: 1 }}>
-          <View style={{ flex: 1 }}>{children}</View>
+          <View style={{ flex: 1, overflow: 'hidden' }}>{children}</View>
 
           <View
             style={{
@@ -133,9 +131,31 @@ export const Layout = ({
 
   return (
     <View style={{ flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }}>
-      <View style={{ flex: 1 }}>{children}</View>
-
-      <MobileMenuDrawer ref={mobileMenuDrawerRef} onStateChange={setDrawerOpen}>
+      <View style={{ flex: 1, overflow: 'hidden' }}>{children}</View>
+
+      <Container style={{ marginBottom: insets.bottom }}>
+        <Nav>
+          <Button
+            style={{ flexShrink: 1 }}
+            hitSlop={{ bottom: 10, left: 10, right: 10, top: 10 }}
+            onPress={() => {
+              mobileMenuDrawerRef.current.setMobileMenuOpen(true);
+            }}
+          >
+            <MenuIcon color={theme.color.mediumdark} />
+            <Text style={{ flexShrink: 1, color: theme.color.defaultText }} numberOfLines={1}>
+              {story?.title}/{story?.name}
+            </Text>
+          </Button>
+
+          <IconButton
+            onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
+            Icon={BottomBarToggleIcon}
+          />
+        </Nav>
+      </Container>
+
+      <MobileMenuDrawer ref={mobileMenuDrawerRef}>
         <View style={{ paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }}>
           {theme.base === 'light' ? (
             <Logo height={25} width={125} />
@@ -160,30 +180,7 @@ export const Layout = ({
         />
       </MobileMenuDrawer>
 
-      <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} onStateChange={setMenuOpen} />
-      {(Platform.OS !== 'android' || (!menuOpen && !drawerOpen)) && (
-        <Container style={{ marginBottom: insets.bottom }}>
-          <Nav>
-            <Button
-              style={{ flexShrink: 1 }}
-              hitSlop={{ bottom: 10, left: 10, right: 10, top: 10 }}
-              onPress={() => {
-                mobileMenuDrawerRef.current.setMobileMenuOpen(true);
-              }}
-            >
-              <MenuIcon color={theme.color.mediumdark} />
-              <Text style={{ flexShrink: 1, color: theme.color.defaultText }} numberOfLines={1}>
-                {story?.title}/{story?.name}
-              </Text>
-            </Button>
-
-            <IconButton
-              onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
-              Icon={BottomBarToggleIcon}
-            />
-          </Nav>
-        </Container>
-      )}
+      <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} />
     </View>
   );
 };
@@ -201,7 +198,6 @@ const Nav = styled.View({
 const Container = styled.View(({ theme }) => ({
   alignSelf: 'flex-end',
   width: '100%',
-  zIndex: 10,
   backgroundColor: theme.barBg,
   borderTopColor: theme.appBorderColor,
   borderTopWidth: 1,

package/src/MobileAddonsPanel.tsx

@@ -20,83 +20,76 @@ export interface MobileAddonsPanelRef {
   setAddonsPanelOpen: (isOpen: boolean) => void;
 }
 
-export const MobileAddonsPanel = forwardRef<
-  MobileAddonsPanelRef,
-  { storyId?: string; onStateChange: (open: boolean) => void }
->(({ storyId, onStateChange }, ref) => {
-  const theme = useTheme();
-  const reducedMotion = useReducedMotion();
-
-  const addonsPanelBottomSheetRef = useRef<BottomSheetModal>(null);
-  const insets = useSafeAreaInsets();
-
-  const animatedPosition = useSharedValue(0);
-
-  // bringing in animated keyboard disables android resizing
-  // TODO replicate functionality without this
-  useAnimatedKeyboard();
-
-  useImperativeHandle(ref, () => ({
-    setAddonsPanelOpen: (open: boolean) => {
-      if (open) {
-        onStateChange(true);
-        addonsPanelBottomSheetRef.current?.present();
-      } else {
-        onStateChange(false);
-        addonsPanelBottomSheetRef.current?.dismiss();
-      }
-    },
-  }));
-
-  const { height } = useWindowDimensions();
-
-  const adjustedBottomSheetSize = useAnimatedStyle(() => {
-    return {
-      maxHeight: height - animatedPosition.value - insets.bottom,
-    };
-  }, [animatedPosition.value, height, insets.bottom]);
-
-  return (
-    <BottomSheetModal
-      ref={addonsPanelBottomSheetRef}
-      index={1}
-      animateOnMount={!reducedMotion}
-      onDismiss={() => {
-        onStateChange(false);
-      }}
-      snapPoints={['25%', '50%', '75%']}
-      style={{
-        paddingTop: 8,
-      }}
-      animatedPosition={animatedPosition}
-      containerStyle={{}}
-      backgroundStyle={{
-        borderRadius: 0,
-        borderTopColor: theme.appBorderColor,
-        borderTopWidth: 1,
-        backgroundColor: theme.background.content,
-      }}
-      handleIndicatorStyle={{ backgroundColor: theme.textMutedColor }}
-      keyboardBehavior="extend"
-      // keyboardBlurBehavior="restore"
-      enableDismissOnClose
-      enableHandlePanningGesture={true}
-      // enableContentPanningGesture={true}
-      stackBehavior="replace"
-      enableDynamicSizing={false}
-    >
-      <Animated.View style={[{ flex: 1 }, adjustedBottomSheetSize]}>
-        <AddonsTabs
-          onClose={() => {
-            onStateChange(false);
-            addonsPanelBottomSheetRef.current?.dismiss();
-          }}
-          storyId={storyId}
-        />
-      </Animated.View>
-    </BottomSheetModal>
-  );
-});
+export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: string }>(
+  ({ storyId }, ref) => {
+    const theme = useTheme();
+    const reducedMotion = useReducedMotion();
+
+    const addonsPanelBottomSheetRef = useRef<BottomSheetModal>(null);
+    const insets = useSafeAreaInsets();
+
+    const animatedPosition = useSharedValue(0);
+
+    // bringing in animated keyboard disables android resizing
+    // TODO replicate functionality without this
+    useAnimatedKeyboard();
+
+    useImperativeHandle(ref, () => ({
+      setAddonsPanelOpen: (open: boolean) => {
+        if (open) {
+          addonsPanelBottomSheetRef.current?.present();
+        } else {
+          addonsPanelBottomSheetRef.current?.dismiss();
+        }
+      },
+    }));
+
+    const { height } = useWindowDimensions();
+
+    const adjustedBottomSheetSize = useAnimatedStyle(() => {
+      return {
+        maxHeight: height - animatedPosition.value - insets.bottom,
+      };
+    }, [animatedPosition.value, height, insets.bottom]);
+
+    return (
+      <BottomSheetModal
+        ref={addonsPanelBottomSheetRef}
+        index={1}
+        animateOnMount={!reducedMotion}
+        snapPoints={['25%', '50%', '75%']}
+        style={{
+          paddingTop: 8,
+        }}
+        animatedPosition={animatedPosition}
+        containerStyle={{}}
+        backgroundStyle={{
+          borderRadius: 0,
+          borderTopColor: theme.appBorderColor,
+          borderTopWidth: 1,
+          backgroundColor: theme.background.content,
+        }}
+        handleIndicatorStyle={{ backgroundColor: theme.textMutedColor }}
+        keyboardBehavior="extend"
+        // keyboardBlurBehavior="restore"
+        enableDismissOnClose
+        enableHandlePanningGesture={true}
+        // enableContentPanningGesture={true}
+        stackBehavior="replace"
+        enableDynamicSizing={false}
+      >
+        <Animated.View style={[{ flex: 1 }, adjustedBottomSheetSize]}>
+          <AddonsTabs
+            onClose={() => {
+              addonsPanelBottomSheetRef.current?.dismiss();
+            }}
+            storyId={storyId}
+          />
+        </Animated.View>
+      </BottomSheetModal>
+    );
+  }
+);
 
 export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId?: string }) => {
   const panels = addons.getElements(Addon_TypesEnum.PANEL);

package/src/MobileMenuDrawer.tsx

@@ -12,7 +12,6 @@ import { useTheme } from '@storybook/react-native-theming';
 
 interface MobileMenuDrawerProps {
   children: ReactNode | ReactNode[];
-  onStateChange: (isOpen: boolean) => void;
 }
 
 export interface MobileMenuDrawerRef {
@@ -30,7 +29,7 @@ export const BottomSheetBackdropComponent = (backdropComponentProps: BottomSheet
 );
 
 export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawerProps>(
-  ({ children, onStateChange }, ref) => {
+  ({ children }, ref) => {
     const reducedMotion = useReducedMotion();
     const insets = useSafeAreaInsets();
     const theme = useTheme();
@@ -40,12 +39,10 @@ export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawer
     useImperativeHandle(ref, () => ({
       setMobileMenuOpen: (open: boolean) => {
         if (open) {
-          onStateChange(true);
-
           menuBottomSheetRef.current?.present();
         } else {
           Keyboard.dismiss();
-          onStateChange(false);
+
           menuBottomSheetRef.current?.dismiss();
         }
       },
@@ -56,9 +53,6 @@ export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawer
         ref={menuBottomSheetRef}
         index={1}
         animateOnMount={!reducedMotion}
-        onDismiss={() => {
-          onStateChange(false);
-        }}
         snapPoints={['50%', '75%']}
         enableDismissOnClose
         enableHandlePanningGesture