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

package/dist/index.js

@@ -49,6 +49,7 @@ module.exports = __toCommonJS(index_exports);
 var import_react_native_theming2 = require("@storybook/react-native-theming");
 var import_react2 = __toESM(require("react"));
 var import_polished = require("polished");
+var import_react_native2 = require("react-native");
 
 // src/icon/iconDataUris.tsx
 var import_react = require("react");
@@ -387,8 +388,9 @@ var GroupNode = import_react2.default.memo(function GroupNode2({
   const color = (0, import_react2.useMemo)(() => {
     return theme.base === "dark" ? theme.color.primary : theme.color.ultraviolet;
   }, [theme.base, theme.color.primary, theme.color.ultraviolet]);
+  const wrapperProps = import_react_native2.Platform.OS === "macos" ? { key: `${props.id}-${color}` } : {};
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(BranchNode, { isExpandable, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Wrapper, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Wrapper, { ...wrapperProps, children: [
       isExpandable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CollapseIcon, { isExpanded }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(GroupIcon, { width: 14, height: 14, color })
     ] }),
@@ -401,8 +403,9 @@ var ComponentNode = import_react2.default.memo(
     const color = (0, import_react2.useMemo)(() => {
       return theme.color.secondary;
     }, [theme.color.secondary]);
+    const wrapperProps = import_react_native2.Platform.OS === "macos" ? { key: `${props.id}-${color}` } : {};
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(BranchNode, { isExpandable, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Wrapper, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Wrapper, { ...wrapperProps, children: [
         isExpandable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CollapseIcon, { isExpanded }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComponentIcon, { width: 12, height: 12, color })
       ] }),
@@ -416,8 +419,9 @@ var StoryNode = import_react2.default.memo(
     const color = (0, import_react2.useMemo)(() => {
       return props.selected ? theme.color.lightest : theme.color.seafoam;
     }, [props.selected, theme.color.lightest, theme.color.seafoam]);
+    const wrapperProps = import_react_native2.Platform.OS === "macos" ? { key: `${props.id}-${color}` } : {};
     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, { ...wrapperProps, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StoryIcon, { width: 14, height: 14, color }) }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LeafNodeText, { selected: props.selected, children })
     ] });
   })
@@ -844,7 +848,7 @@ var Ref = import_react5.default.memo(
 );
 
 // src/Explorer.tsx
-var import_react_native2 = require("react-native");
+var import_react_native3 = require("react-native");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var import_react7 = require("react");
 var Explorer = import_react6.default.memo(function Explorer2({
@@ -855,7 +859,7 @@ var Explorer = import_react6.default.memo(function Explorer2({
   setSelection
 }) {
   const containerRef = (0, import_react6.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.View, { ref: containerRef, id: "storybook-explorer-tree", children: dataset.entries.map(([refId, ref]) => /* @__PURE__ */ (0, import_react7.createElement)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native3.View, { ref: containerRef, id: "storybook-explorer-tree", children: dataset.entries.map(([refId, ref]) => /* @__PURE__ */ (0, import_react7.createElement)(
     Ref,
     {
       ...ref,
@@ -872,7 +876,7 @@ var Explorer = import_react6.default.memo(function Explorer2({
 var import_react_native_theming7 = require("@storybook/react-native-theming");
 var import_react_native_ui_common5 = require("@storybook/react-native-ui-common");
 var import_react11 = __toESM(require("react"));
-var import_react_native5 = require("react-native");
+var import_react_native6 = require("react-native");
 
 // src/constants.ts
 var BREAKPOINT = 1e3;
@@ -883,7 +887,7 @@ var DEFAULT_REF_ID = "storybook_internal";
 var import_react_native_theming5 = require("@storybook/react-native-theming");
 var import_fuse = __toESM(require("fuse.js"));
 var import_react8 = __toESM(require("react"));
-var import_react_native3 = require("react-native");
+var import_react_native4 = require("react-native");
 var import_react_native_ui_common3 = require("@storybook/react-native-ui-common");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_MAX_SEARCH_RESULTS = 50;
@@ -919,9 +923,20 @@ var SearchField = import_react_native_theming5.styled.View({
   flexDirection: "column",
   position: "relative"
 });
-var Input = (0, import_react_native_theming5.styled)(import_react_native3.TextInput)(({ theme }) => ({
-  height: import_react_native3.Platform.OS === "android" ? "auto" : 32,
-  minHeight: 32,
+var inputPlatformSpecificStyles = import_react_native4.Platform.select({
+  macos: {
+    paddingVertical: 6
+  },
+  android: {
+    minHeight: 32
+  },
+  default: {
+    minHeight: 32,
+    height: 32
+  }
+});
+var Input = (0, import_react_native_theming5.styled)(import_react_native4.TextInput)(({ theme }) => ({
+  ...inputPlatformSpecificStyles,
   paddingLeft: 28,
   paddingRight: 28,
   borderWidth: 1,
@@ -1041,7 +1056,7 @@ var Search = import_react8.default.memo(function Search2({ children, dataset, se
   const deferredQuery = (0, import_react8.useDeferredValue)(inputValue);
   const input = deferredQuery ? deferredQuery.trim() : "";
   const results = input ? getResults(input) : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native3.View, { style: { flex: 1 }, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native4.View, { style: { flex: 1 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(SearchField, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchIconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SearchIcon, {}) }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1081,7 +1096,7 @@ var import_react_native_theming6 = require("@storybook/react-native-theming");
 var import_react_native_ui_common4 = require("@storybook/react-native-ui-common");
 var import_polished2 = require("polished");
 var import_react9 = __toESM(require("react"));
-var import_react_native4 = require("react-native");
+var import_react_native5 = require("react-native");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var import_react10 = require("react");
 var ResultsList = import_react_native_theming6.styled.View({
@@ -1208,7 +1223,7 @@ var Result = import_react9.default.memo(function Result2({
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Title, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Highlight, { match: nameMatch, children: item.name }, "search-result-item--label-highlight") }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Path, { children: item.path.map((group, index) => {
         const pathSeparator = index === item.path.length - 1 ? "" : "/";
-        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native4.View, { style: { flexShrink: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PathText, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native5.View, { style: { flexShrink: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PathText, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           Highlight,
           {
             match: pathMatches.find((match) => match.refIndex === index),
@@ -1239,7 +1254,7 @@ var SearchResults = import_react9.default.memo(function SearchResults2({
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: "Recently opened" }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_ui_common4.IconButton, { onPress: handleClearLastViewed })
     ] }) : null,
-    results.length === 0 && query ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native4.View, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(NoResults, { children: [
+    results.length === 0 && query ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native5.View, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(NoResults, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { style: { marginBottom: 8 }, children: "No components found" }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text, { children: "Find components by name or path." })
     ] }) }) : null,
@@ -1292,8 +1307,8 @@ var Swap = import_react11.default.memo(function Swap2({
 }) {
   const [a, b] = import_react11.default.Children.toArray(children);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native5.View, { style: { display: condition ? "flex" : "none" }, children: a }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native5.View, { style: { display: condition ? "none" : "flex" }, children: b })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native6.View, { style: { display: condition ? "flex" : "none" }, children: a }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native6.View, { style: { display: condition ? "none" : "flex" }, children: b })
   ] });
 });
 var useCombination = (index, indexError, previewInitialized, status, refs) => {
@@ -1357,7 +1372,7 @@ var Sidebar = import_react11.default.memo(function Sidebar2({
 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_native11 = require("react-native");
 var import_core_events = require("storybook/internal/core-events");
 var import_manager_api2 = require("storybook/manager-api");
 
@@ -1365,17 +1380,17 @@ var import_manager_api2 = require("storybook/manager-api");
 var import_react_native_theming8 = require("@storybook/react-native-theming");
 var import_react_native_ui_common6 = require("@storybook/react-native-ui-common");
 var import_react13 = require("react");
-var import_react_native7 = require("react-native");
+var import_react_native8 = require("react-native");
 var import_manager_api = require("storybook/manager-api");
 var import_types = require("storybook/internal/types");
 
 // src/useAnimatedValue.ts
 var import_react12 = require("react");
-var import_react_native6 = require("react-native");
+var import_react_native7 = require("react-native");
 function useAnimatedValue(initialValue, config) {
   const ref = (0, import_react12.useRef)(null);
   if (ref.current == null) {
-    ref.current = new import_react_native6.Animated.Value(initialValue, config);
+    ref.current = new import_react_native7.Animated.Value(initialValue, config);
   }
   return ref.current;
 }
@@ -1386,56 +1401,98 @@ 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 { height } = (0, import_react_native8.useWindowDimensions)();
+    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_native8.Animated.parallel([
+            import_react_native8.Animated.timing(positionBottomAnimation, {
+              toValue: 0,
+              // Negative to move up
+              duration: 350,
+              useNativeDriver: false,
+              easing: import_react_native8.Easing.inOut(import_react_native8.Easing.cubic)
+            }),
+            import_react_native8.Animated.timing(panelHeight, {
+              toValue: height / 2,
+              duration: 350,
+              useNativeDriver: false,
+              easing: import_react_native8.Easing.inOut(import_react_native8.Easing.cubic)
+            })
+          ]).start();
+        } else {
+          import_react_native8.Animated.parallel([
+            import_react_native8.Animated.timing(positionBottomAnimation, {
+              toValue: height / 2,
+              duration: 350,
+              useNativeDriver: false,
+              easing: import_react_native8.Easing.inOut(import_react_native8.Easing.cubic)
+            }),
+            import_react_native8.Animated.timing(panelHeight, {
+              toValue: 0,
+              duration: 350,
+              useNativeDriver: false,
+              easing: import_react_native8.Easing.inOut(import_react_native8.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_native8.Animated.parallel([
+            import_react_native8.Animated.timing(panelHeight, {
+              toValue: (height - endCoordinates.height) / 2,
+              duration,
+              useNativeDriver: false,
+              easing: import_react_native8.Easing[easing] || import_react_native8.Easing.out(import_react_native8.Easing.ease)
+            }),
+            import_react_native8.Animated.timing(positionBottomAnimation, {
+              toValue: -endCoordinates.height,
+              // Negative to move up
+              duration,
+              useNativeDriver: false,
+              easing: import_react_native8.Easing[easing] || import_react_native8.Easing.out(import_react_native8.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_native8.Animated.parallel([
+            import_react_native8.Animated.timing(positionBottomAnimation, {
+              toValue: 0,
+              // Back to original position
+              duration,
+              useNativeDriver: false,
+              easing: import_react_native8.Easing[easing] || import_react_native8.Easing.out(import_react_native8.Easing.ease)
+            }),
+            import_react_native8.Animated.timing(panelHeight, {
+              toValue: height / 2,
+              duration,
+              useNativeDriver: false,
+              easing: import_react_native8.Easing[easing] || import_react_native8.Easing.out(import_react_native8.Easing.ease)
+            })
+          ]).start();
+        }
       };
-      const showSubscription = import_react_native7.Keyboard.addListener("keyboardDidShow", handleKeyboardShow);
-      const willShowSubscription = import_react_native7.Keyboard.addListener("keyboardWillShow", handleKeyboardShow);
-      const hideSubscription = import_react_native7.Keyboard.addListener("keyboardWillHide", handleKeyboardHide);
-      const didHideSubscription = import_react_native7.Keyboard.addListener("keyboardDidHide", handleKeyboardHide);
+      const showSubscription = import_react_native8.Keyboard.addListener("keyboardDidShow", handleKeyboardShow);
+      const willShowSubscription = import_react_native8.Keyboard.addListener("keyboardWillShow", handleKeyboardShow);
+      const hideSubscription = import_react_native8.Keyboard.addListener("keyboardWillHide", handleKeyboardHide);
+      const didHideSubscription = import_react_native8.Keyboard.addListener("keyboardDidHide", handleKeyboardHide);
       return () => {
         showSubscription.remove();
         willShowSubscription.remove();
         hideSubscription.remove();
         didHideSubscription.remove();
       };
-    }, [height, panelHeight, positionBottomAnimation]);
+    }, [height, panelHeight, positionBottomAnimation, isOpen]);
     (0, import_react13.useImperativeHandle)(ref, () => ({
       setAddonsPanelOpen: (open) => {
         if (open) {
@@ -1445,11 +1502,8 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
         }
       }
     }));
-    if (!mobileMenuOpen) {
-      return null;
-    }
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react_native7.Animated.View,
+      import_react_native8.Animated.View,
       {
         style: {
           position: "absolute",
@@ -1460,13 +1514,13 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
           transform: [{ translateY: positionBottomAnimation }]
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react_native7.View,
+          import_react_native8.View,
           {
             style: {
               justifyContent: "flex-end"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              import_react_native7.View,
+              import_react_native8.View,
               {
                 style: {
                   height: "100%",
@@ -1474,7 +1528,7 @@ var MobileAddonsPanel = (0, import_react13.forwardRef)(
                   paddingTop: 10,
                   borderTopColor: theme.appBorderColor,
                   borderTopWidth: 1,
-                  paddingBottom: import_react_native7.Platform.OS === "android" ? 16 : 0
+                  paddingBottom: import_react_native8.Platform.OS === "android" ? 16 : 0
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   AddonsTabs,
@@ -1525,10 +1579,10 @@ var AddonsTabs = ({ onClose, storyId }) => {
   const [addonSelected, setAddonSelected] = (0, import_react13.useState)(Object.keys(panels)[0]);
   const panel = (0, import_react13.useMemo)(() => {
     if (!storyId) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native7.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native7.Text, { children: "No Story Selected" }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.Text, { children: "No Story Selected" }) });
     }
     if (Object.keys(panels).length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native7.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native7.Text, { children: "No addons loaded." }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native8.Text, { children: "No addons loaded." }) });
     }
     return panels[addonSelected].render({ active: true });
   }, [addonSelected, panels, storyId]);
@@ -1538,10 +1592,10 @@ var AddonsTabs = ({ onClose, storyId }) => {
     }),
     [insets]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native7.View, { style: addonsTabsContainerStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native7.View, { style: addonsTabsStyle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native8.View, { style: addonsTabsContainerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native8.View, { style: addonsTabsStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_react_native7.ScrollView,
+        import_react_native8.ScrollView,
         {
           horizontal: true,
           showsHorizontalScrollIndicator: false,
@@ -1571,12 +1625,13 @@ var AddonsTabs = ({ onClose, storyId }) => {
       )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react_native7.ScrollView,
+      import_react_native8.ScrollView,
       {
         style: addonsScrollStyle,
         contentContainerStyle: scrollContentContainerStyle,
         children: panel
-      }
+      },
+      `addons-scroll-${storyId}`
     )
   ] });
 };
@@ -1602,16 +1657,65 @@ var TabText = import_react_native_theming8.styled.Text(({ theme, active }) => ({
 // src/MobileMenuDrawer.tsx
 var import_react_native_theming9 = require("@storybook/react-native-theming");
 var import_react14 = require("react");
-var import_react_native8 = require("react-native");
+var import_react_native9 = require("react-native");
 var import_jsx_runtime11 = require("react/jsx-runtime");
+var useAnimatedModalHeight = () => {
+  const { height } = (0, import_react_native9.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_native9.Animated.timing(animatedHeight, {
+      toValue: maxModalHeight,
+      duration,
+      useNativeDriver: false
+    }).start();
+    const collapse = (duration = 250) => import_react_native9.Animated.timing(animatedHeight, {
+      toValue: modalHeight,
+      duration,
+      useNativeDriver: false
+    }).start();
+    const handleKeyboardWillShow = (e) => {
+      if (import_react_native9.Platform.OS === "ios") {
+        expand(e.duration);
+      }
+    };
+    const handleKeyboardDidShow = (e) => {
+      if (import_react_native9.Platform.OS === "android") {
+        expand();
+      }
+    };
+    const handleKeyboardWillHide = (e) => {
+      if (import_react_native9.Platform.OS === "ios") {
+        collapse(e.duration);
+      }
+    };
+    const handleKeyboardDidHide = (e) => {
+      if (import_react_native9.Platform.OS === "android") {
+        collapse();
+      }
+    };
+    const subscriptions = [
+      import_react_native9.Keyboard.addListener("keyboardWillShow", handleKeyboardWillShow),
+      import_react_native9.Keyboard.addListener("keyboardDidShow", handleKeyboardDidShow),
+      import_react_native9.Keyboard.addListener("keyboardWillHide", handleKeyboardWillHide),
+      import_react_native9.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({
+      import_react_native9.PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: (_, gestureState) => {
           return gestureState.dy > 0;
@@ -1623,10 +1727,10 @@ var MobileMenuDrawer = (0, import_react14.memo)(
         },
         onPanResponderRelease: (_, gestureState) => {
           if (gestureState.dy > 50) {
-            import_react_native8.Keyboard.dismiss();
+            import_react_native9.Keyboard.dismiss();
             setMobileMenuOpen(false);
           }
-          import_react_native8.Animated.timing(dragY, {
+          import_react_native9.Animated.timing(dragY, {
             toValue: 0,
             duration: 300,
             useNativeDriver: true
@@ -1641,7 +1745,7 @@ var MobileMenuDrawer = (0, import_react14.memo)(
           scrollToSelectedNode();
           setMobileMenuOpen(true);
         } else {
-          import_react_native8.Keyboard.dismiss();
+          import_react_native9.Keyboard.dismiss();
           setMobileMenuOpen(false);
         }
       }
@@ -1659,58 +1763,64 @@ var MobileMenuDrawer = (0, import_react14.memo)(
       [theme.color.mediumdark]
     );
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_react_native8.Modal,
+      import_react_native9.Modal,
       {
         visible: mobileMenuOpen,
         animationType: "slide",
         transparent: true,
         statusBarTranslucent: true,
         onRequestClose: () => setMobileMenuOpen(false),
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native8.KeyboardAvoidingView, { behavior: "height", 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)(
-            import_react_native8.Animated.View,
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native9.Animated.View, { style: { flex: 1 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.Pressable, { style: { flex: 1 }, onPress: () => setMobileMenuOpen(false) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_react_native9.Animated.View,
             {
-              style: [
+              style: { backgroundColor: theme.background.content, height: animatedHeight },
+              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                import_react_native9.Animated.View,
                 {
-                  height: "65%",
-                  borderTopColor: theme.appBorderColor,
-                  borderTopWidth: 1,
-                  borderStyle: "solid",
-                  backgroundColor: theme.background.content,
-                  elevation: 8
-                },
-                { transform: [{ translateY: dragY }] }
-              ],
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  import_react_native8.View,
-                  {
-                    ...panResponder.panHandlers,
-                    style: {
-                      alignItems: "center",
-                      justifyContent: "center",
-                      backgroundColor: theme.background.content
-                    },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.View, { style: handleStyle })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  import_react_native8.ScrollView,
-                  {
-                    ref: scrollRef,
-                    keyboardShouldPersistTaps: "handled",
-                    style: {
+                  style: [
+                    {
                       flex: 1,
-                      paddingBottom: 150,
-                      alignSelf: "flex-end",
-                      width: "100%",
-                      backgroundColor: theme.background.content
+                      borderTopColor: theme.appBorderColor,
+                      borderTopWidth: 1,
+                      borderStyle: "solid",
+                      backgroundColor: theme.background.content,
+                      elevation: 8
                     },
-                    children
-                  }
-                )
-              ]
+                    { transform: [{ translateY: dragY }] }
+                  ],
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      import_react_native9.View,
+                      {
+                        ...panResponder.panHandlers,
+                        style: {
+                          alignItems: "center",
+                          justifyContent: "center",
+                          backgroundColor: theme.background.content
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native9.View, { style: handleStyle })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      import_react_native9.ScrollView,
+                      {
+                        ref: scrollRef,
+                        keyboardShouldPersistTaps: "handled",
+                        style: {
+                          flex: 1,
+                          paddingBottom: 150,
+                          alignSelf: "flex-end",
+                          width: "100%",
+                          backgroundColor: theme.background.content
+                        },
+                        children
+                      }
+                    )
+                  ]
+                }
+              )
             }
           )
         ] })
@@ -1721,7 +1831,7 @@ var MobileMenuDrawer = (0, import_react14.memo)(
 
 // src/StorybookLogo.tsx
 var import_react15 = require("react");
-var import_react_native9 = require("react-native");
+var import_react_native10 = require("react-native");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var WIDTH = 125;
 var HEIGHT = 25;
@@ -1745,7 +1855,7 @@ var BrandLogo = ({ theme }) => {
     return theme.brand.image;
   }
   const image = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react_native9.Image,
+    import_react_native10.Image,
     {
       source: theme.brand.image,
       resizeMode: theme.brand.resizeMode ?? "contain",
@@ -1754,10 +1864,10 @@ var BrandLogo = ({ theme }) => {
   );
   if (theme.brand.url) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react_native9.TouchableOpacity,
+      import_react_native10.TouchableOpacity,
       {
         onPress: () => {
-          if (theme.brand.url) import_react_native9.Linking.openURL(theme.brand.url);
+          if (theme.brand.url) import_react_native10.Linking.openURL(theme.brand.url);
         },
         children: image
       }
@@ -1775,13 +1885,13 @@ var BrandTitle = ({ theme }) => {
       fontSize: theme.typography.size.m1
     };
   }, [theme]);
-  const title = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native9.Text, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand.title });
+  const title = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native10.Text, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand.title });
   if (theme.brand.url) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react_native9.TouchableOpacity,
+      import_react_native10.TouchableOpacity,
       {
         onPress: () => {
-          if (theme.brand.url) import_react_native9.Linking.openURL(theme.brand.url);
+          if (theme.brand.url) import_react_native10.Linking.openURL(theme.brand.url);
         },
         children: title
       }
@@ -1804,6 +1914,7 @@ var StorybookLogo = ({ theme }) => {
 
 // src/Layout.tsx
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
+var import_portal = require("@gorhom/portal");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var desktopLogoContainer = {
   flexDirection: "row",
@@ -1825,7 +1936,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 +1999,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,
@@ -1908,9 +2022,9 @@ var Layout = ({
     const channel = import_manager_api2.addons.getChannel();
     channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.View, { style: containerStyle, children: [
-    isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native10.View, { style: desktopSidebarStyle, children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.ScrollView, { keyboardShouldPersistTaps: "handled", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.View, { style: desktopLogoContainer, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.View, { style: containerStyle, children: [
+    isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.View, { style: desktopSidebarStyle, children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.ScrollView, { keyboardShouldPersistTaps: "handled", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.View, { style: desktopLogoContainer, children: [
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StorybookLogo, { theme }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
       ] }),
@@ -1928,17 +2042,17 @@ var Layout = ({
         }
       )
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_ui_common7.IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon }) }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.View, { style: mobileContentStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native10.View, { style: contentContainerStyle, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.View, { style: mobileContentStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.View, { style: contentContainerStyle, children }),
       story?.parameters?.hideFullScreenButton || isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        import_react_native10.TouchableOpacity,
+        import_react_native11.TouchableOpacity,
         {
           style: fullScreenButtonStyle,
           onPress: () => setUiHidden((prev) => !prev),
           children: uiHidden ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseFullscreenIcon, { color: theme.color.mediumdark }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FullscreenIcon, { color: theme.color.mediumdark })
         }
       ),
-      isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native10.View, { style: desktopAddonsPanelStyle, children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.View, { style: desktopAddonsPanelStyle, children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         import_react_native_ui_common7.IconButton,
         {
           style: iconFloatRightStyle,
@@ -1957,7 +2071,7 @@ var Layout = ({
           onPress: () => mobileMenuDrawerRef.current?.setMobileMenuOpen(true),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MenuIcon, { color: theme.color.mediumdark }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.Text, { style: navButtonTextStyle, numberOfLines: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native11.Text, { style: navButtonTextStyle, numberOfLines: 1, children: [
               story?.title,
               "/",
               story?.name
@@ -1975,7 +2089,7 @@ var Layout = ({
       )
     ] }) }) : null,
     isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SelectedNodeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native10.View, { style: mobileMenuDrawerContentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StorybookLogo, { theme }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native11.View, { style: mobileMenuDrawerContentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StorybookLogo, { theme }) }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         Sidebar,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui-lite",
-  "version": "10.0.1",
+  "version": "10.0.2-alpha.0",
   "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.0",
+    "@storybook/react-native-ui-common": "^10.0.2-alpha.0",
     "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": "f88cc47d0ddc9958f4a8b029f8366de9184bfc8e"
 }

package/src/Layout.tsx

@@ -11,7 +11,7 @@ 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 { SET_CURRENT_STORY } from 'storybook/internal/core-events';
 import { addons } from 'storybook/manager-api';
 import { type API_IndexHash } from 'storybook/internal/types';
@@ -28,6 +28,7 @@ import {
   MenuIcon,
 } from './icon/iconDataUris';
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Portal, PortalHost, PortalProvider } from '@gorhom/portal';
 
 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,55 @@ 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 }] },
-            ]}
+            style={{ backgroundColor: theme.background.content, height: animatedHeight }}
           >
-            {/* 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={[
+                {
+                  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

@@ -2,7 +2,7 @@ import { styled, useTheme } from '@storybook/react-native-theming';
 
 import React, { ComponentProps, FC, forwardRef, useMemo } from 'react';
 import { transparentize } from 'polished';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 import { CollapseIcon, ComponentIcon, GroupIcon, StoryIcon } from './icon/iconDataUris';
 
 export interface NodeProps {
@@ -98,9 +98,12 @@ export const GroupNode: FC<
     return theme.base === 'dark' ? theme.color.primary : theme.color.ultraviolet;
   }, [theme.base, theme.color.primary, theme.color.ultraviolet]);
 
+  const wrapperProps = Platform.OS === 'macos' ? { key: `${props.id}-${color}` } : {};
+
   return (
     <BranchNode isExpandable={isExpandable} {...props}>
-      <Wrapper>
+      {/* workaround for macos icon color bug */}
+      <Wrapper {...wrapperProps}>
         {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
         <GroupIcon width={14} height={14} color={color} />
       </Wrapper>
@@ -117,9 +120,12 @@ export const ComponentNode: FC<ComponentProps<typeof BranchNode>> = React.memo(
       return theme.color.secondary;
     }, [theme.color.secondary]);
 
+    const wrapperProps = Platform.OS === 'macos' ? { key: `${props.id}-${color}` } : {};
+
     return (
       <BranchNode isExpandable={isExpandable} {...props}>
-        <Wrapper>
+        {/* workaround for macos icon color bug */}
+        <Wrapper {...wrapperProps}>
           {isExpandable && <CollapseIcon isExpanded={isExpanded} />}
           <ComponentIcon width={12} height={12} color={color} />
         </Wrapper>
@@ -140,9 +146,12 @@ export const StoryNode = React.memo(
       return props.selected ? theme.color.lightest : theme.color.seafoam;
     }, [props.selected, theme.color.lightest, theme.color.seafoam]);
 
+    const wrapperProps = Platform.OS === 'macos' ? { key: `${props.id}-${color}` } : {};
+
     return (
       <LeafNode {...props} ref={ref}>
-        <Wrapper>
+        {/* workaround for macos icon color bug */}
+        <Wrapper {...wrapperProps}>
           <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,
+  };
+}