@storybook/react-native-ui 10.3.0-next.2 → 10.3.0-next.4

package/dist/index.js

@@ -1451,6 +1451,9 @@ var centeredStyle = {
   alignItems: "center",
   justifyContent: "center"
 };
+var hiddenStyle = {
+  display: "none"
+};
 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);
@@ -1461,15 +1464,7 @@ var AddonsTabs = ({ onClose, storyId }) => {
       paddingBottom: insets.bottom + 16
     };
   });
-  const panel = (0, import_react16.useMemo)(() => {
-    if (!storyId) {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native5.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native5.Text, { children: "No Story Selected" }) });
-    }
-    if (Object.keys(panels).length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native5.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native5.Text, { children: "No addons loaded." }) });
-    }
-    return panels[addonSelected].render({ active: true });
-  }, [addonSelected, panels, storyId]);
+  const panelEntries = (0, import_react16.useMemo)(() => Object.entries(panels), [panels]);
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native5.View, { style: addonsTabsContainerStyle, children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native5.View, { style: addonsTabsStyle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -1485,7 +1480,7 @@ var AddonsTabs = ({ onClose, storyId }) => {
               {
                 active: id === addonSelected,
                 onPress: () => setAddonSelected(id),
-                text: resolvedTitle
+                text: String(resolvedTitle)
               },
               id
             );
@@ -1507,11 +1502,14 @@ var AddonsTabs = ({ onClose, storyId }) => {
       {
         style: addonsScrollStyle,
         contentContainerStyle: scrollContentContainerStyle,
-        children: panel
+        children: !storyId ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native5.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native5.Text, { children: "No Story Selected" }) }) : panelEntries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native5.View, { style: centeredStyle, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native5.Text, { children: "No addons loaded." }) }) : panelEntries.map(([id, p]) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native5.View, { style: id === addonSelected ? void 0 : hiddenStyle, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PanelRenderer, { panel: p }) }, id))
       }
     )
   ] });
 };
+var PanelRenderer = ({ panel }) => {
+  return panel.render({ active: true });
+};
 var Tab = ({ active, onPress, text }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TabButton, { active, onPress, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TabText, { active, children: text }) });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "10.3.0-next.2",
+  "version": "10.3.0-next.4",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -28,16 +28,17 @@
     "src/**/*"
   ],
   "devDependencies": {
-    "@types/react": "~19.1.10",
+    "@types/react": "~19.2.14",
+    "storybook": "10.3.0-alpha.12",
     "tsup": "^8.5.0",
     "typescript": "~5.9.3"
   },
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
     "@nozbe/microfuzz": "^1.0.0",
-    "@storybook/react": "10.3.0-alpha.9",
-    "@storybook/react-native-theming": "^10.3.0-next.2",
-    "@storybook/react-native-ui-common": "^10.3.0-next.2",
+    "@storybook/react": "10.3.0-alpha.12",
+    "@storybook/react-native-theming": "^10.3.0-next.4",
+    "@storybook/react-native-ui-common": "^10.3.0-next.4",
     "polished": "^4.3.1"
   },
   "peerDependencies": {

package/src/MobileAddonsPanel.tsx

@@ -1,7 +1,11 @@
 import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import { addons } from 'storybook/manager-api';
 import { styled, useTheme } from '@storybook/react-native-theming';
-import { Addon_TypesEnum } from 'storybook/internal/types';
+import {
+  Addon_TypesEnum,
+  type Addon_BaseType,
+  type Addon_Collection,
+} from 'storybook/internal/types';
 import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Platform, StyleProp, Text, View, ViewStyle, useWindowDimensions } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
@@ -138,10 +142,14 @@ const centeredStyle = {
   justifyContent: 'center',
 } satisfies StyleProp<ViewStyle>;
 
+const hiddenStyle = {
+  display: 'none',
+} satisfies StyleProp<ViewStyle>;
+
 const hitSlop = { top: 10, right: 10, bottom: 10, left: 10 };
 
 export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId?: string }) => {
-  const panels = addons.getElements(Addon_TypesEnum.PANEL);
+  const panels: Addon_Collection<Addon_BaseType> = addons.getElements(Addon_TypesEnum.PANEL);
 
   const [addonSelected, setAddonSelected] = useState(Object.keys(panels)[0]);
 
@@ -153,25 +161,7 @@ export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId
     };
   });
 
-  const panel = useMemo(() => {
-    if (!storyId) {
-      return (
-        <View style={centeredStyle}>
-          <Text>No Story Selected</Text>
-        </View>
-      );
-    }
-
-    if (Object.keys(panels).length === 0) {
-      return (
-        <View style={centeredStyle}>
-          <Text>No addons loaded.</Text>
-        </View>
-      );
-    }
-
-    return panels[addonSelected].render({ active: true });
-  }, [addonSelected, panels, storyId]);
+  const panelEntries = useMemo(() => Object.entries(panels), [panels]);
 
   return (
     <View style={addonsTabsContainerStyle}>
@@ -189,7 +179,7 @@ export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId
                 key={id}
                 active={id === addonSelected}
                 onPress={() => setAddonSelected(id)}
-                text={resolvedTitle}
+                text={String(resolvedTitle)}
               />
             );
           })}
@@ -207,12 +197,30 @@ export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId
         // keyboardShouldPersistTaps="handled"
         contentContainerStyle={scrollContentContainerStyle}
       >
-        {panel}
+        {!storyId ? (
+          <View style={centeredStyle}>
+            <Text>No Story Selected</Text>
+          </View>
+        ) : panelEntries.length === 0 ? (
+          <View style={centeredStyle}>
+            <Text>No addons loaded.</Text>
+          </View>
+        ) : (
+          panelEntries.map(([id, p]) => (
+            <View key={id} style={id === addonSelected ? undefined : hiddenStyle}>
+              <PanelRenderer panel={p} />
+            </View>
+          ))
+        )}
       </ScrollView>
     </View>
   );
 };
 
+const PanelRenderer = ({ panel }: { panel: Addon_BaseType }) => {
+  return panel.render({ active: true });
+};
+
 const Tab = ({ active, onPress, text }: { active: boolean; onPress: () => void; text: string }) => {
   return (
     <TabButton active={active} onPress={onPress}>