@storybook/react-native-ui-lite 10.0.1 → 10.0.2-alpha.1

package/dist/index.d.ts

@@ -7,8 +7,8 @@ import { Item, ExpandAction, CombinedDataset, Selection, SBUI } from '@storybook
 import { State, StoriesHash } from 'storybook/manager-api';
 import { API_LoadedRefData, API_IndexHash } from 'storybook/internal/types';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { StoryContext, Args } from 'storybook/internal/csf';
 import { ReactRenderer } from '@storybook/react';
+import { StoryContext, Args } from 'storybook/internal/csf';
 
 interface NodeProps$1 {
     children: React.ReactNode | React.ReactNode[];

package/dist/index.js

@@ -391,7 +391,7 @@ var GroupNode = import_react2.default.memo(function GroupNode2({
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Wrapper, { children: [
       isExpandable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CollapseIcon, { isExpanded }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GroupIcon, { width: 14, height: 14, color })
-    ] }),
+    ] }, `group-${props.id}-${color}`),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BranchNodeText, { children })
   ] });
 });
@@ -405,7 +405,7 @@ var ComponentNode = import_react2.default.memo(
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Wrapper, { children: [
         isExpandable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CollapseIcon, { isExpanded }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComponentIcon, { width: 12, height: 12, color })
-      ] }),
+      ] }, `component-${props.id}-${color}`),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BranchNodeText, { children })
     ] });
   }
@@ -417,7 +417,7 @@ var StoryNode = import_react2.default.memo(
       return props.selected ? theme.color.lightest : theme.color.seafoam;
     }, [props.selected, theme.color.lightest, theme.color.seafoam]);
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(LeafNode, { ...props, ref, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StoryIcon, { width: 14, height: 14, color }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StoryIcon, { width: 14, height: 14, color }) }, `story-${props.id}-${color}`),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LeafNodeText, { selected: props.selected, children })
     ] });
   })
@@ -919,9 +919,20 @@ var SearchField = import_react_native_theming5.styled.View({
   flexDirection: "column",
   position: "relative"
 });
+var inputPlatformSpecificStyles = import_react_native3.Platform.select({
+  macos: {
+    paddingVertical: 6
+  },
+  android: {
+    minHeight: 32
+  },
+  default: {
+    minHeight: 32,
+    height: 32
+  }
+});
 var Input = (0, import_react_native_theming5.styled)(import_react_native3.TextInput)(({ theme }) => ({
-  height: import_react_native3.Platform.OS === "android" ? "auto" : 32,
-  minHeight: 32,
+  ...inputPlatformSpecificStyles,
   paddingLeft: 28,
   paddingRight: 28,
   borderWidth: 1,
@@ -1354,10 +1365,12 @@ var Sidebar = import_react11.default.memo(function Sidebar2({
 });
 
 // src/Layout.tsx
+var import_portal = require("@gorhom/portal");
 var import_react_native_theming10 = require("@storybook/react-native-theming");
 var import_react_native_ui_common7 = require("@storybook/react-native-ui-common");
 var import_react16 = require("react");
 var import_react_native10 = require("react-native");
+var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_core_events = require("storybook/internal/core-events");
 var import_manager_api2 = require("storybook/manager-api");
 
@@ -1386,44 +1399,86 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 var MobileAddonsPanel = (0, import_react13.forwardRef)(
   ({ storyId }, ref) => {
     const theme = (0, import_react_native_theming8.useTheme)();
-    const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react13.useState)(false);
     const { height } = (0, import_react_native7.useWindowDimensions)();
-    const panelHeight = useAnimatedValue(height / 2);
-    const positionBottomAnimation = useAnimatedValue(0);
+    const panelHeight = useAnimatedValue(0);
+    const positionBottomAnimation = useAnimatedValue(height / 2);
+    const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
+    const setMobileMenuOpen = (0, import_react13.useCallback)(
+      (open) => {
+        setIsOpen(open);
+        if (open) {
+          import_react_native7.Animated.parallel([
+            import_react_native7.Animated.timing(positionBottomAnimation, {
+              toValue: 0,
+              // Negative to move up
+              duration: 350,
+              useNativeDriver: false,
+              easing: import_react_native7.Easing.inOut(import_react_native7.Easing.cubic)
+            }),
+            import_react_native7.Animated.timing(panelHeight, {
+              toValue: height / 2,
+              duration: 350,
+              useNativeDriver: false,
+              easing: import_react_native7.Easing.inOut(import_react_native7.Easing.cubic)
+            })
+          ]).start();
+        } else {
+          import_react_native7.Animated.parallel([
+            import_react_native7.Animated.timing(positionBottomAnimation, {
+              toValue: height / 2,
+              duration: 350,
+              useNativeDriver: false,
+              easing: import_react_native7.Easing.inOut(import_react_native7.Easing.cubic)
+            }),
+            import_react_native7.Animated.timing(panelHeight, {
+              toValue: 0,
+              duration: 350,
+              useNativeDriver: false,
+              easing: import_react_native7.Easing.inOut(import_react_native7.Easing.cubic)
+            })
+          ]).start();
+        }
+      },
+      [height, positionBottomAnimation, panelHeight]
+    );
     (0, import_react13.useEffect)(() => {
       const handleKeyboardShow = ({ endCoordinates, duration, easing }) => {
-        import_react_native7.Animated.parallel([
-          import_react_native7.Animated.timing(positionBottomAnimation, {
-            toValue: -endCoordinates.height,
-            // Negative to move up
-            duration,
-            useNativeDriver: false,
-            easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
-          }),
-          import_react_native7.Animated.timing(panelHeight, {
-            toValue: (height - endCoordinates.height) / 2,
-            duration: duration + 250,
-            useNativeDriver: false,
-            easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
-          })
-        ]).start();
+        if (isOpen) {
+          import_react_native7.Animated.parallel([
+            import_react_native7.Animated.timing(panelHeight, {
+              toValue: (height - endCoordinates.height) / 2,
+              duration,
+              useNativeDriver: false,
+              easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
+            }),
+            import_react_native7.Animated.timing(positionBottomAnimation, {
+              toValue: -endCoordinates.height,
+              // Negative to move up
+              duration,
+              useNativeDriver: false,
+              easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
+            })
+          ]).start();
+        }
       };
       const handleKeyboardHide = ({ duration, easing }) => {
-        import_react_native7.Animated.parallel([
-          import_react_native7.Animated.timing(positionBottomAnimation, {
-            toValue: 0,
-            // Back to original position
-            duration,
-            useNativeDriver: false,
-            easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
-          }),
-          import_react_native7.Animated.timing(panelHeight, {
-            toValue: height / 2,
-            duration,
-            useNativeDriver: false,
-            easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
-          })
-        ]).start();
+        if (isOpen) {
+          import_react_native7.Animated.parallel([
+            import_react_native7.Animated.timing(positionBottomAnimation, {
+              toValue: 0,
+              // Back to original position
+              duration,
+              useNativeDriver: false,
+              easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
+            }),
+            import_react_native7.Animated.timing(panelHeight, {
+              toValue: height / 2,
+              duration,
+              useNativeDriver: false,
+              easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
+            })
+          ]).start();
+        }
       };
       const showSubscription = import_react_native7.Keyboard.addListener("keyboardDidShow", handleKeyboardShow);
       const willShowSubscription = import_react_native7.Keyboard.addListener("keyboardWillShow", handleKeyboardShow);
@@ -1435,7 +1490,7 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
         hideSubscription.remove();
         didHideSubscription.remove();
       };
-    }, [height, panelHeight, positionBottomAnimation]);
+    }, [height, panelHeight, positionBottomAnimation, isOpen]);
     (0, import_react13.useImperativeHandle)(ref, () => ({
       setAddonsPanelOpen: (open) => {
         if (open) {
@@ -1445,9 +1500,6 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
         }
       }
     }));
-    if (!mobileMenuOpen) {
-      return null;
-    }
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       import_react_native7.Animated.View,
       {
@@ -1576,7 +1628,8 @@ var AddonsTabs = ({ onClose, storyId }) => {
         style: addonsScrollStyle,
         contentContainerStyle: scrollContentContainerStyle,
         children: panel
-      }
+      },
+      `addons-scroll-${storyId}`
     )
   ] });
 };
@@ -1604,11 +1657,60 @@ var import_react_native_theming9 = require("@storybook/react-native-theming");
 var import_react14 = require("react");
 var import_react_native8 = require("react-native");
 var import_jsx_runtime11 = require("react/jsx-runtime");
+var useAnimatedModalHeight = () => {
+  const { height } = (0, import_react_native8.useWindowDimensions)();
+  const animatedHeight = useAnimatedValue(0.65 * height);
+  (0, import_react14.useEffect)(() => {
+    const modalHeight = 0.65 * height;
+    const maxModalHeight = 0.85 * height;
+    const expand = (duration = 250) => import_react_native8.Animated.timing(animatedHeight, {
+      toValue: maxModalHeight,
+      duration,
+      useNativeDriver: false
+    }).start();
+    const collapse = (duration = 250) => import_react_native8.Animated.timing(animatedHeight, {
+      toValue: modalHeight,
+      duration,
+      useNativeDriver: false
+    }).start();
+    const handleKeyboardWillShow = (e) => {
+      if (import_react_native8.Platform.OS === "ios") {
+        expand(e.duration);
+      }
+    };
+    const handleKeyboardDidShow = (e) => {
+      if (import_react_native8.Platform.OS === "android") {
+        expand();
+      }
+    };
+    const handleKeyboardWillHide = (e) => {
+      if (import_react_native8.Platform.OS === "ios") {
+        collapse(e.duration);
+      }
+    };
+    const handleKeyboardDidHide = (e) => {
+      if (import_react_native8.Platform.OS === "android") {
+        collapse();
+      }
+    };
+    const subscriptions = [
+      import_react_native8.Keyboard.addListener("keyboardWillShow", handleKeyboardWillShow),
+      import_react_native8.Keyboard.addListener("keyboardDidShow", handleKeyboardDidShow),
+      import_react_native8.Keyboard.addListener("keyboardWillHide", handleKeyboardWillHide),
+      import_react_native8.Keyboard.addListener("keyboardDidHide", handleKeyboardDidHide)
+    ];
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+    };
+  }, [animatedHeight, height]);
+  return animatedHeight;
+};
 var MobileMenuDrawer = (0, import_react14.memo)(
   (0, import_react14.forwardRef)(({ children }, ref) => {
     const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react14.useState)(false);
     const { scrollToSelectedNode, scrollRef } = useSelectedNode();
     const theme = (0, import_react_native_theming9.useTheme)();
+    const animatedHeight = useAnimatedModalHeight();
     const dragY = useAnimatedValue(0);
     const panResponder = (0, import_react14.useRef)(
       import_react_native8.PanResponder.create({
@@ -1666,14 +1768,14 @@ var MobileMenuDrawer = (0, import_react14.memo)(
         transparent: true,
         statusBarTranslucent: true,
         onRequestClose: () => setMobileMenuOpen(false),
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native8.KeyboardAvoidingView, { behavior: "height", style: { flex: 1 }, children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native8.Animated.View, { style: { flex: 1 }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.View, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.Pressable, { style: { flex: 1 }, onPress: () => setMobileMenuOpen(false) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.Animated.View, { style: { height: animatedHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
             import_react_native8.Animated.View,
             {
               style: [
                 {
-                  height: "65%",
+                  flex: 1,
                   borderTopColor: theme.appBorderColor,
                   borderTopWidth: 1,
                   borderStyle: "solid",
@@ -1712,7 +1814,7 @@ var MobileMenuDrawer = (0, import_react14.memo)(
                 )
               ]
             }
-          )
+          ) })
         ] })
       }
     );
@@ -1803,7 +1905,6 @@ var StorybookLogo = ({ theme }) => {
 };
 
 // src/Layout.tsx
-var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var desktopLogoContainer = {
   flexDirection: "row",
@@ -1825,7 +1926,10 @@ var mobileMenuDrawerContentStyle = {
   paddingTop: 4,
   paddingBottom: 4
 };
-var LiteUI = ({ storage, theme, storyHash, story, children }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_safe_area_context2.SafeAreaProvider, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_theming10.ThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.StorageProvider, { storage, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.LayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Layout, { storyHash, story, children }) }) }) }) });
+var LiteUI = ({ storage, theme, storyHash, story, children }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_safe_area_context2.SafeAreaProvider, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_theming10.ThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.StorageProvider, { storage, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.LayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_portal.PortalProvider, { shouldAddRootHost: false, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Layout, { storyHash, story, children }),
+  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_portal.PortalHost, { name: "storybook-lite-ui-root" })
+] }) }) }) }) });
 var Layout = ({
   storyHash,
   story,
@@ -1885,7 +1989,7 @@ var Layout = ({
   const fullScreenButtonStyle = (0, import_react_native_ui_common7.useStyle)(
     () => ({
       position: "absolute",
-      bottom: uiHidden ? 56 : 16,
+      bottom: uiHidden ? insets.bottom + 56 : 16,
       right: 16,
       backgroundColor: theme.background.content,
       padding: 4,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui-lite",
-  "version": "10.0.1",
+  "version": "10.0.2-alpha.1",
   "description": "lightweight ui components for react native storybook",
   "keywords": [
     "react",
@@ -58,9 +58,10 @@
     "typescript": "~5.9.3"
   },
   "dependencies": {
+    "@gorhom/portal": "^1.0.14",
     "@storybook/react": "^10.0.1",
-    "@storybook/react-native-theming": "^10.0.1",
-    "@storybook/react-native-ui-common": "^10.0.1",
+    "@storybook/react-native-theming": "^10.0.2-alpha.1",
+    "@storybook/react-native-ui-common": "^10.0.2-alpha.1",
     "fuse.js": "^7.1.0",
     "polished": "^4.3.1",
     "react-native-safe-area-context": "^5"
@@ -76,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7604d1c21f15767940d30d9c5dcf9da73d0a9fe7"
+  "gitHead": "14fb007dc99d435fd405054b84bedb38b96ab8c5"
 }

package/src/Layout.tsx

@@ -1,4 +1,4 @@
-import type { Args, StoryContext } from 'storybook/internal/csf';
+import { PortalHost, PortalProvider } from '@gorhom/portal';
 import type { ReactRenderer } from '@storybook/react';
 import { styled, ThemeProvider, useTheme } from '@storybook/react-native-theming';
 import {
@@ -11,10 +11,12 @@ import {
   useStyle,
 } from '@storybook/react-native-ui-common';
 import { ReactElement, ReactNode, useCallback, useRef, useState } from 'react';
-import { Platform, ScrollView, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
+import { ScrollView, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { SET_CURRENT_STORY } from 'storybook/internal/core-events';
-import { addons } from 'storybook/manager-api';
+import type { Args, StoryContext } from 'storybook/internal/csf';
 import { type API_IndexHash } from 'storybook/internal/types';
+import { addons } from 'storybook/manager-api';
 import { AddonsTabs, MobileAddonsPanel, MobileAddonsPanelRef } from './MobileAddonsPanel';
 import { MobileMenuDrawer, MobileMenuDrawerRef } from './MobileMenuDrawer';
 import { SelectedNodeProvider } from './SelectedNodeProvider';
@@ -27,7 +29,6 @@ import {
   FullscreenIcon,
   MenuIcon,
 } from './icon/iconDataUris';
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const desktopLogoContainer = {
   flexDirection: 'row',
@@ -62,9 +63,12 @@ export const LiteUI: SBUI = ({ storage, theme, storyHash, story, children }): Re
     <ThemeProvider theme={theme}>
       <StorageProvider storage={storage}>
         <LayoutProvider>
-          <Layout storyHash={storyHash} story={story}>
-            {children}
-          </Layout>
+          <PortalProvider shouldAddRootHost={false}>
+            <Layout storyHash={storyHash} story={story}>
+              {children}
+            </Layout>
+            <PortalHost name="storybook-lite-ui-root" />
+          </PortalProvider>
         </LayoutProvider>
       </StorageProvider>
     </ThemeProvider>
@@ -145,7 +149,7 @@ export const Layout = ({
   const fullScreenButtonStyle = useStyle(
     () => ({
       position: 'absolute',
-      bottom: uiHidden ? 56 : 16,
+      bottom: uiHidden ? insets.bottom + 56 : 16,
       right: 16,
       backgroundColor: theme.background.content,
       padding: 4,

package/src/MobileAddonsPanel.tsx

@@ -1,6 +1,6 @@
 import { styled, useTheme } from '@storybook/react-native-theming';
 import { IconButton, useStyle } from '@storybook/react-native-ui-common';
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import {
   Animated,
   Easing,
@@ -26,48 +26,91 @@ export interface MobileAddonsPanelRef {
 export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: string }>(
   ({ storyId }, ref) => {
     const theme = useTheme();
-    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const { height } = useWindowDimensions();
-    const panelHeight = useAnimatedValue(height / 2);
-    const positionBottomAnimation = useAnimatedValue(0);
+    const panelHeight = useAnimatedValue(0);
+    const positionBottomAnimation = useAnimatedValue(height / 2);
+    const [isOpen, setIsOpen] = useState(false);
+
+    const setMobileMenuOpen = useCallback(
+      (open: boolean) => {
+        setIsOpen(open);
+
+        if (open) {
+          Animated.parallel([
+            Animated.timing(positionBottomAnimation, {
+              toValue: 0, // Negative to move up
+              duration: 350,
+              useNativeDriver: false,
+              easing: Easing.inOut(Easing.cubic),
+            }),
+
+            Animated.timing(panelHeight, {
+              toValue: height / 2,
+              duration: 350,
+              useNativeDriver: false,
+              easing: Easing.inOut(Easing.cubic),
+            }),
+          ]).start();
+        } else {
+          Animated.parallel([
+            Animated.timing(positionBottomAnimation, {
+              toValue: height / 2,
+              duration: 350,
+              useNativeDriver: false,
+              easing: Easing.inOut(Easing.cubic),
+            }),
+            Animated.timing(panelHeight, {
+              toValue: 0,
+              duration: 350,
+              useNativeDriver: false,
+              easing: Easing.inOut(Easing.cubic),
+            }),
+          ]).start();
+        }
+      },
+      [height, positionBottomAnimation, panelHeight]
+    );
 
     useEffect(() => {
       // Define keyboard show handler
       const handleKeyboardShow = ({ endCoordinates, duration, easing }) => {
-        Animated.parallel([
-          Animated.timing(positionBottomAnimation, {
-            toValue: -endCoordinates.height, // Negative to move up
-            duration,
-            useNativeDriver: false,
-            easing: Easing[easing] || Easing.out(Easing.ease),
-          }),
-
-          Animated.timing(panelHeight, {
-            toValue: (height - endCoordinates.height) / 2,
-            duration: duration + 250,
-            useNativeDriver: false,
-            easing: Easing[easing] || Easing.out(Easing.ease),
-          }),
-        ]).start();
+        if (isOpen) {
+          Animated.parallel([
+            Animated.timing(panelHeight, {
+              toValue: (height - endCoordinates.height) / 2,
+              duration,
+              useNativeDriver: false,
+              easing: Easing[easing] || Easing.out(Easing.ease),
+            }),
+            Animated.timing(positionBottomAnimation, {
+              toValue: -endCoordinates.height, // Negative to move up
+              duration,
+              useNativeDriver: false,
+              easing: Easing[easing] || Easing.out(Easing.ease),
+            }),
+          ]).start();
+        }
       };
 
       // Define keyboard hide handler
       const handleKeyboardHide = ({ duration, easing }) => {
-        Animated.parallel([
-          Animated.timing(positionBottomAnimation, {
-            toValue: 0, // Back to original position
-            duration,
-            useNativeDriver: false,
-            easing: Easing[easing] || Easing.out(Easing.ease),
-          }),
+        if (isOpen) {
+          Animated.parallel([
+            Animated.timing(positionBottomAnimation, {
+              toValue: 0, // Back to original position
+              duration,
+              useNativeDriver: false,
+              easing: Easing[easing] || Easing.out(Easing.ease),
+            }),
 
-          Animated.timing(panelHeight, {
-            toValue: height / 2,
-            duration,
-            useNativeDriver: false,
-            easing: Easing[easing] || Easing.out(Easing.ease),
-          }),
-        ]).start();
+            Animated.timing(panelHeight, {
+              toValue: height / 2,
+              duration,
+              useNativeDriver: false,
+              easing: Easing[easing] || Easing.out(Easing.ease),
+            }),
+          ]).start();
+        }
       };
 
       // Add keyboard event listeners
@@ -83,7 +126,7 @@ export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: st
         hideSubscription.remove();
         didHideSubscription.remove();
       };
-    }, [height, panelHeight, positionBottomAnimation]);
+    }, [height, panelHeight, positionBottomAnimation, isOpen]);
 
     useImperativeHandle(ref, () => ({
       setAddonsPanelOpen: (open: boolean) => {
@@ -95,10 +138,6 @@ export const MobileAddonsPanel = forwardRef<MobileAddonsPanelRef, { storyId?: st
       },
     }));
 
-    if (!mobileMenuOpen) {
-      return null;
-    }
-
     return (
       <Animated.View
         style={{
@@ -234,6 +273,7 @@ export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId
         />
       </View>
       <ScrollView
+        key={`addons-scroll-${storyId}`}
         style={addonsScrollStyle}
         // keyboardShouldPersistTaps="handled"
         contentContainerStyle={scrollContentContainerStyle}

package/src/MobileMenuDrawer.tsx

@@ -1,15 +1,26 @@
 import { useTheme } from '@storybook/react-native-theming';
-import { forwardRef, memo, ReactNode, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import {
+  forwardRef,
+  memo,
+  ReactNode,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   Animated,
   Keyboard,
-  KeyboardAvoidingView,
+  useWindowDimensions,
   Modal,
   PanResponder,
   PanResponderInstance,
   Pressable,
   ScrollView,
   View,
+  KeyboardEventListener,
+  Platform,
 } from 'react-native';
 import { useSelectedNode } from './SelectedNodeProvider';
 import useAnimatedValue from './useAnimatedValue';
@@ -22,11 +33,73 @@ export interface MobileMenuDrawerRef {
   setMobileMenuOpen: (isOpen: boolean) => void;
 }
 
+export const useAnimatedModalHeight = () => {
+  const { height } = useWindowDimensions();
+  const animatedHeight = useAnimatedValue(0.65 * height);
+
+  useEffect(() => {
+    const modalHeight = 0.65 * height;
+    const maxModalHeight = 0.85 * height;
+
+    const expand = (duration: number = 250) =>
+      Animated.timing(animatedHeight, {
+        toValue: maxModalHeight,
+        duration,
+        useNativeDriver: false,
+      }).start();
+
+    const collapse = (duration: number = 250) =>
+      Animated.timing(animatedHeight, {
+        toValue: modalHeight,
+        duration,
+        useNativeDriver: false,
+      }).start();
+
+    const handleKeyboardWillShow: KeyboardEventListener = (e) => {
+      if (Platform.OS === 'ios') {
+        expand(e.duration);
+      }
+    };
+
+    const handleKeyboardDidShow: KeyboardEventListener = (e) => {
+      if (Platform.OS === 'android') {
+        expand();
+      }
+    };
+
+    const handleKeyboardWillHide: KeyboardEventListener = (e) => {
+      if (Platform.OS === 'ios') {
+        collapse(e.duration);
+      }
+    };
+
+    const handleKeyboardDidHide: KeyboardEventListener = (e) => {
+      if (Platform.OS === 'android') {
+        collapse();
+      }
+    };
+
+    const subscriptions = [
+      Keyboard.addListener('keyboardWillShow', handleKeyboardWillShow),
+      Keyboard.addListener('keyboardDidShow', handleKeyboardDidShow),
+      Keyboard.addListener('keyboardWillHide', handleKeyboardWillHide),
+      Keyboard.addListener('keyboardDidHide', handleKeyboardDidHide),
+    ];
+
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+    };
+  }, [animatedHeight, height]);
+
+  return animatedHeight;
+};
+
 export const MobileMenuDrawer = memo(
   forwardRef<MobileMenuDrawerRef, MobileMenuDrawerProps>(({ children }, ref) => {
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const { scrollToSelectedNode, scrollRef } = useSelectedNode();
     const theme = useTheme();
+    const animatedHeight = useAnimatedModalHeight();
 
     // Create a reference for the drag handle animation
     const dragY = useAnimatedValue(0);
@@ -95,51 +168,53 @@ export const MobileMenuDrawer = memo(
         statusBarTranslucent
         onRequestClose={() => setMobileMenuOpen(false)}
       >
-        <KeyboardAvoidingView behavior="height" style={{ flex: 1 }}>
+        <Animated.View style={{ flex: 1 }}>
           <View style={{ flex: 1 }}>
             <Pressable style={{ flex: 1 }} onPress={() => setMobileMenuOpen(false)}></Pressable>
           </View>
 
-          <Animated.View
-            style={[
-              {
-                height: '65%',
-                borderTopColor: theme.appBorderColor,
-                borderTopWidth: 1,
-                borderStyle: 'solid',
-                backgroundColor: theme.background.content,
-                elevation: 8,
-              },
-              { transform: [{ translateY: dragY }] },
-            ]}
-          >
-            {/* Drag handle */}
-            <View
-              {...panResponder.panHandlers}
-              style={{
-                alignItems: 'center',
-                justifyContent: 'center',
-                backgroundColor: theme.background.content,
-              }}
-            >
-              <View style={handleStyle} />
-            </View>
-
-            <ScrollView
-              ref={scrollRef}
-              keyboardShouldPersistTaps="handled"
-              style={{
-                flex: 1,
-                paddingBottom: 150,
-                alignSelf: 'flex-end',
-                width: '100%',
-                backgroundColor: theme.background.content,
-              }}
+          <Animated.View style={{ height: animatedHeight }}>
+            <Animated.View
+              style={[
+                {
+                  flex: 1,
+                  borderTopColor: theme.appBorderColor,
+                  borderTopWidth: 1,
+                  borderStyle: 'solid',
+                  backgroundColor: theme.background.content,
+                  elevation: 8,
+                },
+                { transform: [{ translateY: dragY }] },
+              ]}
             >
-              {children}
-            </ScrollView>
+              {/* Drag handle */}
+              <View
+                {...panResponder.panHandlers}
+                style={{
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  backgroundColor: theme.background.content,
+                }}
+              >
+                <View style={handleStyle} />
+              </View>
+
+              <ScrollView
+                ref={scrollRef}
+                keyboardShouldPersistTaps="handled"
+                style={{
+                  flex: 1,
+                  paddingBottom: 150,
+                  alignSelf: 'flex-end',
+                  width: '100%',
+                  backgroundColor: theme.background.content,
+                }}
+              >
+                {children}
+              </ScrollView>
+            </Animated.View>
           </Animated.View>
-        </KeyboardAvoidingView>
+        </Animated.View>
       </Modal>
     );
   })

package/src/Search.tsx

@@ -53,9 +53,21 @@ const SearchField = styled.View({
   position: 'relative',
 });
 
+const inputPlatformSpecificStyles = Platform.select({
+  macos: {
+    paddingVertical: 6,
+  },
+  android: {
+    minHeight: 32,
+  },
+  default: {
+    minHeight: 32,
+    height: 32,
+  },
+});
+
 const Input = styled(TextInput)(({ theme }) => ({
-  height: Platform.OS === 'android' ? 'auto' : 32,
-  minHeight: 32,
+  ...inputPlatformSpecificStyles,
   paddingLeft: 28,
   paddingRight: 28,
   borderWidth: 1,

package/src/TreeNode.tsx

@@ -100,7 +100,7 @@ export const GroupNode: FC<
 
   return (
     <BranchNode isExpandable={isExpandable} {...props}>
-      <Wrapper>
+      <Wrapper key={`group-${props.id}-${color}`}>
         {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
         <GroupIcon width={14} height={14} color={color} />
       </Wrapper>
@@ -119,7 +119,8 @@ export const ComponentNode: FC<ComponentProps<typeof BranchNode>> = React.memo(
 
     return (
       <BranchNode isExpandable={isExpandable} {...props}>
-        <Wrapper>
+        {/* workaround for macos icon color bug */}
+        <Wrapper key={`component-${props.id}-${color}`}>
           {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
           <ComponentIcon width={12} height={12} color={color} />
         </Wrapper>
@@ -142,7 +143,7 @@ export const StoryNode = React.memo(
 
     return (
       <LeafNode {...props} ref={ref}>
-        <Wrapper>
+        <Wrapper key={`story-${props.id}-${color}`}>
           <StoryIcon width={14} height={14} color={color} />
         </Wrapper>
         <LeafNodeText selected={props.selected}>{children}</LeafNodeText>

package/src/useKeyboard.ts

@@ -0,0 +1,63 @@
+// taken from https://github.com/react-native-community/hooks/blob/main/src/useKeyboard.ts
+import { useEffect, useState } from 'react';
+import { Keyboard, KeyboardEventListener, KeyboardMetrics } from 'react-native';
+
+const emptyCoordinates = Object.freeze({
+  screenX: 0,
+  screenY: 0,
+  width: 0,
+  height: 0,
+});
+const initialValue = {
+  start: emptyCoordinates,
+  end: emptyCoordinates,
+};
+
+export function useKeyboard() {
+  const [shown, setShown] = useState(false);
+  const [coordinates, setCoordinates] = useState<{
+    start: undefined | KeyboardMetrics;
+    end: KeyboardMetrics;
+  }>(initialValue);
+  const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
+
+  const handleKeyboardWillShow: KeyboardEventListener = (e) => {
+    setCoordinates({ start: e.startCoordinates, end: e.endCoordinates });
+  };
+  const handleKeyboardDidShow: KeyboardEventListener = (e) => {
+    setShown(true);
+    setCoordinates({ start: e.startCoordinates, end: e.endCoordinates });
+    setKeyboardHeight(e.endCoordinates.height);
+  };
+  const handleKeyboardWillHide: KeyboardEventListener = (e) => {
+    setCoordinates({ start: e.startCoordinates, end: e.endCoordinates });
+  };
+  const handleKeyboardDidHide: KeyboardEventListener = (e) => {
+    setShown(false);
+    if (e) {
+      setCoordinates({ start: e.startCoordinates, end: e.endCoordinates });
+    } else {
+      setCoordinates(initialValue);
+      setKeyboardHeight(0);
+    }
+  };
+
+  useEffect(() => {
+    const subscriptions = [
+      Keyboard.addListener('keyboardWillShow', handleKeyboardWillShow),
+      Keyboard.addListener('keyboardDidShow', handleKeyboardDidShow),
+      Keyboard.addListener('keyboardWillHide', handleKeyboardWillHide),
+      Keyboard.addListener('keyboardDidHide', handleKeyboardDidHide),
+    ];
+
+    return () => {
+      subscriptions.forEach((subscription) => subscription.remove());
+    };
+  }, []);
+
+  return {
+    keyboardShown: shown,
+    coordinates,
+    keyboardHeight,
+  };
+}