@storybook/react-native-ui-lite 9.1.2 → 9.1.4

package/dist/index.js

@@ -1347,65 +1347,78 @@ var Sidebar = import_react11.default.memo(function Sidebar2({
 // src/Layout.tsx
 var import_react_native_theming10 = require("@storybook/react-native-theming");
 var import_react_native_ui_common7 = require("@storybook/react-native-ui-common");
-var import_react15 = require("react");
-var import_react_native9 = require("react-native");
+var import_react16 = require("react");
+var import_react_native10 = require("react-native");
 var import_core_events = require("storybook/internal/core-events");
 var import_manager_api2 = require("storybook/internal/manager-api");
 
 // src/MobileAddonsPanel.tsx
 var import_react_native_theming8 = require("@storybook/react-native-theming");
-var import_react12 = require("react");
-var import_react_native6 = require("react-native");
+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_manager_api = require("storybook/internal/manager-api");
 var import_types = require("storybook/internal/types");
-var import_react_native_ui_common6 = require("@storybook/react-native-ui-common");
+
+// src/useAnimatedValue.ts
+var import_react12 = require("react");
+var import_react_native6 = 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);
+  }
+  return ref.current;
+}
+
+// src/MobileAddonsPanel.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var MobileAddonsPanel = (0, import_react12.forwardRef)(
+var MobileAddonsPanel = (0, import_react13.forwardRef)(
   ({ storyId }, ref) => {
     const theme = (0, import_react_native_theming8.useTheme)();
-    const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react12.useState)(false);
-    const { height } = (0, import_react_native6.useWindowDimensions)();
-    const panelHeight = (0, import_react_native6.useAnimatedValue)(height / 2);
-    const positionBottomAnimation = (0, import_react_native6.useAnimatedValue)(0);
-    (0, import_react12.useEffect)(() => {
+    const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react13.useState)(false);
+    const { height } = (0, import_react_native7.useWindowDimensions)();
+    const panelHeight = useAnimatedValue(height / 2);
+    const positionBottomAnimation = useAnimatedValue(0);
+    (0, import_react13.useEffect)(() => {
       const handleKeyboardShow = ({ endCoordinates, duration, easing }) => {
-        import_react_native6.Animated.parallel([
-          import_react_native6.Animated.timing(positionBottomAnimation, {
+        import_react_native7.Animated.parallel([
+          import_react_native7.Animated.timing(positionBottomAnimation, {
             toValue: -endCoordinates.height,
             // Negative to move up
             duration,
             useNativeDriver: false,
-            easing: import_react_native6.Easing[easing] || import_react_native6.Easing.out(import_react_native6.Easing.ease)
+            easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
           }),
-          import_react_native6.Animated.timing(panelHeight, {
+          import_react_native7.Animated.timing(panelHeight, {
             toValue: (height - endCoordinates.height) / 2,
             duration: duration + 250,
             useNativeDriver: false,
-            easing: import_react_native6.Easing[easing] || import_react_native6.Easing.out(import_react_native6.Easing.ease)
+            easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
           })
         ]).start();
       };
       const handleKeyboardHide = ({ duration, easing }) => {
-        import_react_native6.Animated.parallel([
-          import_react_native6.Animated.timing(positionBottomAnimation, {
+        import_react_native7.Animated.parallel([
+          import_react_native7.Animated.timing(positionBottomAnimation, {
             toValue: 0,
             // Back to original position
             duration,
             useNativeDriver: false,
-            easing: import_react_native6.Easing[easing] || import_react_native6.Easing.out(import_react_native6.Easing.ease)
+            easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
           }),
-          import_react_native6.Animated.timing(panelHeight, {
+          import_react_native7.Animated.timing(panelHeight, {
             toValue: height / 2,
             duration,
             useNativeDriver: false,
-            easing: import_react_native6.Easing[easing] || import_react_native6.Easing.out(import_react_native6.Easing.ease)
+            easing: import_react_native7.Easing[easing] || import_react_native7.Easing.out(import_react_native7.Easing.ease)
           })
         ]).start();
       };
-      const showSubscription = import_react_native6.Keyboard.addListener("keyboardDidShow", handleKeyboardShow);
-      const willShowSubscription = import_react_native6.Keyboard.addListener("keyboardWillShow", handleKeyboardShow);
-      const hideSubscription = import_react_native6.Keyboard.addListener("keyboardWillHide", handleKeyboardHide);
-      const didHideSubscription = import_react_native6.Keyboard.addListener("keyboardDidHide", handleKeyboardHide);
+      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);
       return () => {
         showSubscription.remove();
         willShowSubscription.remove();
@@ -1413,7 +1426,7 @@ var MobileAddonsPanel = (0, import_react12.forwardRef)(
         didHideSubscription.remove();
       };
     }, [height, panelHeight, positionBottomAnimation]);
-    (0, import_react12.useImperativeHandle)(ref, () => ({
+    (0, import_react13.useImperativeHandle)(ref, () => ({
       setAddonsPanelOpen: (open) => {
         if (open) {
           setMobileMenuOpen(true);
@@ -1426,7 +1439,7 @@ var MobileAddonsPanel = (0, import_react12.forwardRef)(
       return null;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react_native6.Animated.View,
+      import_react_native7.Animated.View,
       {
         style: {
           position: "absolute",
@@ -1437,13 +1450,13 @@ var MobileAddonsPanel = (0, import_react12.forwardRef)(
           transform: [{ translateY: positionBottomAnimation }]
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          import_react_native6.SafeAreaView,
+          import_react_native7.SafeAreaView,
           {
             style: {
               justifyContent: "flex-end"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              import_react_native6.View,
+              import_react_native7.View,
               {
                 style: {
                   height: "100%",
@@ -1451,7 +1464,7 @@ var MobileAddonsPanel = (0, import_react12.forwardRef)(
                   paddingTop: 10,
                   borderTopColor: theme.appBorderColor,
                   borderTopWidth: 1,
-                  paddingBottom: import_react_native6.Platform.OS === "android" ? 16 : 0
+                  paddingBottom: import_react_native7.Platform.OS === "android" ? 16 : 0
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   AddonsTabs,
@@ -1501,20 +1514,20 @@ var scrollContentContainerStyle = {
 var hitSlop = { top: 10, right: 10, bottom: 10, left: 10 };
 var AddonsTabs = ({ onClose, storyId }) => {
   const panels = import_manager_api.addons.getElements(import_types.Addon_TypesEnum.PANEL);
-  const [addonSelected, setAddonSelected] = (0, import_react12.useState)(Object.keys(panels)[0]);
-  const panel = (0, import_react12.useMemo)(() => {
+  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_native6.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native6.Text, { children: "No Story Selected" }) });
+      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" }) });
     }
     if (Object.keys(panels).length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native6.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native6.Text, { children: "No addons loaded." }) });
+      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 panels[addonSelected].render({ active: true });
   }, [addonSelected, panels, storyId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native6.View, { style: addonsTabsContainerStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native6.View, { style: addonsTabsStyle, children: [
+  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: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_react_native6.ScrollView,
+        import_react_native7.ScrollView,
         {
           horizontal: true,
           showsHorizontalScrollIndicator: false,
@@ -1544,7 +1557,7 @@ var AddonsTabs = ({ onClose, storyId }) => {
       )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      import_react_native6.ScrollView,
+      import_react_native7.ScrollView,
       {
         style: addonsScrollStyle,
         contentContainerStyle: scrollContentContainerStyle,
@@ -1574,17 +1587,17 @@ 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_react13 = require("react");
-var import_react_native7 = require("react-native");
+var import_react14 = require("react");
+var import_react_native8 = require("react-native");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var MobileMenuDrawer = (0, import_react13.memo)(
-  (0, import_react13.forwardRef)(({ children }, ref) => {
-    const [mobileMenuOpen, setMobileMenuOpen] = (0, import_react13.useState)(false);
+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 dragY = (0, import_react_native7.useAnimatedValue)(0);
-    const panResponder = (0, import_react13.useRef)(
-      import_react_native7.PanResponder.create({
+    const dragY = useAnimatedValue(0);
+    const panResponder = (0, import_react14.useRef)(
+      import_react_native8.PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: (_, gestureState) => {
           return gestureState.dy > 0;
@@ -1596,10 +1609,10 @@ var MobileMenuDrawer = (0, import_react13.memo)(
         },
         onPanResponderRelease: (_, gestureState) => {
           if (gestureState.dy > 50) {
-            import_react_native7.Keyboard.dismiss();
+            import_react_native8.Keyboard.dismiss();
             setMobileMenuOpen(false);
           }
-          import_react_native7.Animated.timing(dragY, {
+          import_react_native8.Animated.timing(dragY, {
             toValue: 0,
             duration: 300,
             useNativeDriver: true
@@ -1607,19 +1620,19 @@ var MobileMenuDrawer = (0, import_react13.memo)(
         }
       })
     ).current;
-    (0, import_react13.useImperativeHandle)(ref, () => ({
+    (0, import_react14.useImperativeHandle)(ref, () => ({
       setMobileMenuOpen: (open) => {
         if (open) {
           dragY.setValue(0);
           scrollToSelectedNode();
           setMobileMenuOpen(true);
         } else {
-          import_react_native7.Keyboard.dismiss();
+          import_react_native8.Keyboard.dismiss();
           setMobileMenuOpen(false);
         }
       }
     }));
-    const handleStyle = (0, import_react13.useMemo)(
+    const handleStyle = (0, import_react14.useMemo)(
       () => ({
         width: 40,
         height: 5,
@@ -1632,17 +1645,17 @@ var MobileMenuDrawer = (0, import_react13.memo)(
       [theme.color.mediumdark]
     );
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_react_native7.Modal,
+      import_react_native8.Modal,
       {
         visible: mobileMenuOpen,
         animationType: "slide",
         transparent: true,
         statusBarTranslucent: true,
         onRequestClose: () => setMobileMenuOpen(false),
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native7.KeyboardAvoidingView, { behavior: "height", style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native7.SafeAreaView, { style: { justifyContent: "flex-end", flex: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native7.View, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native7.Pressable, { style: { flex: 1 }, onPress: () => setMobileMenuOpen(false) }) }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.KeyboardAvoidingView, { behavior: "height", style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native8.SafeAreaView, { style: { justifyContent: "flex-end", 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_native7.Animated.View,
+            import_react_native8.Animated.View,
             {
               style: [
                 {
@@ -1657,7 +1670,7 @@ var MobileMenuDrawer = (0, import_react13.memo)(
               ],
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  import_react_native7.View,
+                  import_react_native8.View,
                   {
                     ...panResponder.panHandlers,
                     style: {
@@ -1665,11 +1678,11 @@ var MobileMenuDrawer = (0, import_react13.memo)(
                       justifyContent: "center",
                       backgroundColor: theme.background.content
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native7.View, { style: handleStyle })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native8.View, { style: handleStyle })
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                  import_react_native7.ScrollView,
+                  import_react_native8.ScrollView,
                   {
                     ref: scrollRef,
                     keyboardShouldPersistTaps: "handled",
@@ -1693,18 +1706,18 @@ var MobileMenuDrawer = (0, import_react13.memo)(
 );
 
 // src/StorybookLogo.tsx
-var import_react14 = require("react");
-var import_react_native8 = require("react-native");
+var import_react15 = require("react");
+var import_react_native9 = require("react-native");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var WIDTH = 125;
 var HEIGHT = 25;
 var NoBrandLogo = ({ theme }) => theme.base === "light" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Logo, { height: HEIGHT, width: WIDTH }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DarkLogo, { height: HEIGHT, width: WIDTH });
 function isElement(value) {
-  return (0, import_react14.isValidElement)(value);
+  return (0, import_react15.isValidElement)(value);
 }
 var BrandLogo = ({ theme }) => {
   const imageHasNoWidthOrHeight = typeof theme.brand.image === "object" && typeof theme.brand.image === "object" && "uri" in theme.brand.image && (!("height" in theme.brand.image) || !("width" in theme.brand.image));
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (imageHasNoWidthOrHeight) {
       console.warn(
         "STORYBOOK: When using a remote image as the brand logo, you must also set the width and height.\nFor example:  brand: { image: { uri: 'https://sb.com/img.png', height: 25, width: 25}}"
@@ -1718,7 +1731,7 @@ var BrandLogo = ({ theme }) => {
     return theme.brand.image;
   }
   const image = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    import_react_native8.Image,
+    import_react_native9.Image,
     {
       source: theme.brand.image,
       resizeMode: theme.brand.resizeMode ?? "contain",
@@ -1727,10 +1740,10 @@ var BrandLogo = ({ theme }) => {
   );
   if (theme.brand.url) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react_native8.TouchableOpacity,
+      import_react_native9.TouchableOpacity,
       {
         onPress: () => {
-          if (theme.brand.url) import_react_native8.Linking.openURL(theme.brand.url);
+          if (theme.brand.url) import_react_native9.Linking.openURL(theme.brand.url);
         },
         children: image
       }
@@ -1740,7 +1753,7 @@ var BrandLogo = ({ theme }) => {
   }
 };
 var BrandTitle = ({ theme }) => {
-  const brandTitleStyle = (0, import_react14.useMemo)(() => {
+  const brandTitleStyle = (0, import_react15.useMemo)(() => {
     return {
       width: WIDTH,
       height: HEIGHT,
@@ -1748,13 +1761,13 @@ var BrandTitle = ({ theme }) => {
       fontSize: theme.typography.size.m1
     };
   }, [theme]);
-  const title = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native8.Text, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand.title });
+  const title = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native9.Text, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand.title });
   if (theme.brand.url) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      import_react_native8.TouchableOpacity,
+      import_react_native9.TouchableOpacity,
       {
         onPress: () => {
-          if (theme.brand.url) import_react_native8.Linking.openURL(theme.brand.url);
+          if (theme.brand.url) import_react_native9.Linking.openURL(theme.brand.url);
         },
         children: title
       }
@@ -1764,8 +1777,8 @@ var BrandTitle = ({ theme }) => {
   }
 };
 var StorybookLogo = ({ theme }) => {
-  const image = (0, import_react14.useMemo)(() => theme.brand?.image, [theme.brand?.image]);
-  const title = (0, import_react14.useMemo)(() => theme.brand?.title, [theme.brand?.title]);
+  const image = (0, import_react15.useMemo)(() => theme.brand?.image, [theme.brand?.image]);
+  const title = (0, import_react15.useMemo)(() => theme.brand?.title, [theme.brand?.title]);
   if (image) {
     return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(BrandLogo, { theme });
   } else if (title) {
@@ -1813,7 +1826,7 @@ var Layout = ({
     "desktopPanelState",
     true
   );
-  const [uiHidden, setUiHidden] = (0, import_react15.useState)(false);
+  const [uiHidden, setUiHidden] = (0, import_react16.useState)(false);
   const desktopSidebarStyle = (0, import_react_native_ui_common7.useStyle)(
     () => ({
       width: desktopSidebarOpen ? 240 : void 0,
@@ -1844,7 +1857,7 @@ var Layout = ({
     return {
       flex: 1,
       backgroundColor: theme.background.content,
-      paddingVertical: import_react_native9.Platform.OS === "android" ? 32 : 0
+      paddingVertical: import_react_native10.Platform.OS === "android" ? 32 : 0
     };
   }, [theme.background.content, story?.parameters?.noSafeArea, isDesktop]);
   const fullScreenButtonStyle = (0, import_react_native_ui_common7.useStyle)(
@@ -1867,15 +1880,15 @@ var Layout = ({
     }),
     [theme.barTextColor]
   );
-  const mobileMenuDrawerRef = (0, import_react15.useRef)(null);
-  const addonPanelRef = (0, import_react15.useRef)(null);
-  const setSelection = (0, import_react15.useCallback)(({ storyId: newStoryId }) => {
+  const mobileMenuDrawerRef = (0, import_react16.useRef)(null);
+  const addonPanelRef = (0, import_react16.useRef)(null);
+  const setSelection = (0, import_react16.useCallback)(({ storyId: newStoryId }) => {
     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_native9.SafeAreaView, { style: containerStyle, children: [
-    isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native9.View, { style: desktopSidebarStyle, children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native9.ScrollView, { keyboardShouldPersistTaps: "handled", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native9.View, { style: desktopLogoContainer, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.SafeAreaView, { 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: [
         /* @__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 })
       ] }),
@@ -1893,17 +1906,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_native9.View, { style: mobileContentStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native9.View, { style: contentContainerStyle, children }),
+    /* @__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 }),
       story?.parameters?.hideFullScreenButton || isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        import_react_native9.TouchableOpacity,
+        import_react_native10.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_native9.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_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)(
         import_react_native_ui_common7.IconButton,
         {
           style: iconFloatRightStyle,
@@ -1922,7 +1935,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_native9.Text, { style: navButtonTextStyle, numberOfLines: 1, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_native10.Text, { style: navButtonTextStyle, numberOfLines: 1, children: [
               story?.title,
               "/",
               story?.name
@@ -1940,7 +1953,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_native9.View, { style: mobileMenuDrawerContentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StorybookLogo, { theme }) }),
+      /* @__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)(
         Sidebar,
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui-lite",
-  "version": "9.1.2",
+  "version": "9.1.4",
   "description": "lightweight ui components for react native storybook",
   "keywords": [
     "react",
@@ -58,9 +58,9 @@
     "typescript": "~5.9.2"
   },
   "dependencies": {
-    "@storybook/react": "^9.1.5",
-    "@storybook/react-native-theming": "^9.1.2",
-    "@storybook/react-native-ui-common": "^9.1.2",
+    "@storybook/react": "^9.1.8",
+    "@storybook/react-native-theming": "^9.1.4",
+    "@storybook/react-native-ui-common": "^9.1.4",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",
@@ -77,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "64b649172957ced2bf579305eddac3fbeddd5851"
+  "gitHead": "cc20e5ee9d9e7584eaefe71cc76e25dec5110a94"
 }

package/src/MobileAddonsPanel.tsx

@@ -1,4 +1,5 @@
 import { styled, useTheme } from '@storybook/react-native-theming';
+import { IconButton } from '@storybook/react-native-ui-common';
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import {
   Animated,
@@ -9,15 +10,14 @@ import {
   ScrollView,
   StyleProp,
   Text,
-  useAnimatedValue,
   useWindowDimensions,
   View,
   ViewStyle,
 } from 'react-native';
 import { addons } from 'storybook/internal/manager-api';
 import { Addon_TypesEnum } from 'storybook/internal/types';
-import { IconButton } from '@storybook/react-native-ui-common';
 import { CloseIcon } from './icon/iconDataUris';
+import useAnimatedValue from './useAnimatedValue';
 
 export interface MobileAddonsPanelRef {
   setAddonsPanelOpen: (isOpen: boolean) => void;

package/src/MobileMenuDrawer.tsx

@@ -10,11 +10,11 @@ import {
   Pressable,
   SafeAreaView,
   ScrollView,
-  useAnimatedValue,
   View,
 } from 'react-native';
 
 import { useSelectedNode } from './SelectedNodeProvider';
+import useAnimatedValue from './useAnimatedValue';
 
 interface MobileMenuDrawerProps {
   children: ReactNode | ReactNode[];

package/src/useAnimatedValue.ts

@@ -0,0 +1,13 @@
+import { useRef } from 'react';
+import { Animated } from 'react-native';
+
+export default function useAnimatedValue(
+  initialValue: number,
+  config?: Animated.AnimatedConfig
+): Animated.Value {
+  const ref = useRef<null | Animated.Value>(null);
+  if (ref.current == null) {
+    ref.current = new Animated.Value(initialValue, config);
+  }
+  return ref.current;
+}