@storybook/react-native-ui 10.2.3 → 10.3.0-canary-20260217005118

package/dist/index.d.ts

@@ -108,9 +108,10 @@ interface SidebarProps extends API_LoadedRefData {
 declare const Sidebar: React.NamedExoticComponent<SidebarProps>;
 
 declare const FullUI: SBUI;
-declare const Layout: ({ storyHash, story, children, }: {
+declare const Layout: ({ storyHash, story, storyBackgroundColor, children, }: {
     storyHash: API_IndexHash | undefined;
     story?: StoryContext<ReactRenderer, Args>;
+    storyBackgroundColor?: string;
     children: ReactNode | ReactNode[];
 }) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -942,7 +942,7 @@ var Search = import_react10.default.memo(function Search2({ children, dataset, s
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native2.View, { style: { flex: 1 }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(SearchField, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SearchIconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SearchIcon, {}) }),
-      isBottomSheet ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      isBottomSheet && (import_react_native2.Platform.OS === "ios" || import_react_native2.Platform.OS === "android") ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         BottomSheetInput,
         {
           ref: inputRef,
@@ -1602,7 +1602,7 @@ var MobileMenuDrawer = (0, import_react17.memo)(
     const handleIndicatorStyle = (0, import_react17.useMemo)(() => {
       return { backgroundColor: theme.textMutedColor };
     }, [theme.textMutedColor]);
-    const contentContainerStyle2 = (0, import_react17.useMemo)(() => {
+    const contentContainerStyle = (0, import_react17.useMemo)(() => {
       return { paddingBottom: insets.bottom };
     }, [insets.bottom]);
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -1627,7 +1627,7 @@ var MobileMenuDrawer = (0, import_react17.memo)(
           {
             ref: scrollRef,
             keyboardShouldPersistTaps: "handled",
-            contentContainerStyle: contentContainerStyle2,
+            contentContainerStyle,
             children
           }
         )
@@ -1864,7 +1864,6 @@ var desktopLogoContainer = {
   paddingRight: 10,
   justifyContent: "space-between"
 };
-var contentContainerStyle = { flex: 1, overflow: "hidden" };
 var mobileContentStyle = { flex: 1, overflow: "hidden" };
 var placeholderObject = {};
 var iconFloatRightStyle = { marginLeft: "auto" };
@@ -1876,15 +1875,31 @@ var mobileMenuDrawerContentStyle = {
   paddingBottom: 4
 };
 var flex1 = { flex: 1 };
-var FullUI = ({ storage, theme, storyHash, story, children }) => {
+var FullUI = ({
+  storage,
+  theme,
+  storyHash,
+  story,
+  storyBackgroundColor,
+  children
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native_theming15.ThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native_safe_area_context3.SafeAreaProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native_gesture_handler2.GestureHandlerRootView, { style: flex1, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_bottom_sheet4.BottomSheetModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native_ui_common7.StorageProvider, { storage, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native_ui_common7.LayoutProvider, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Layout, { storyHash, story, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      Layout,
+      {
+        storyHash,
+        story,
+        storyBackgroundColor,
+        children
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_portal.PortalHost, { name: "storybook-lite-ui-root" })
   ] }) }) }) }) }) });
 };
 var Layout = ({
   storyHash,
   story,
+  storyBackgroundColor,
   children
 }) => {
   const theme = (0, import_react_native_theming15.useTheme)();
@@ -1941,9 +1956,23 @@ var Layout = ({
     return {
       flex: 1,
       paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
-      backgroundColor: theme.background.content
+      backgroundColor: storyBackgroundColor || theme.background.content
     };
-  }, [theme.background.content, insets.top, story?.parameters?.noSafeArea, isDesktop]);
+  }, [
+    storyBackgroundColor,
+    theme.background.content,
+    insets.top,
+    story?.parameters?.noSafeArea,
+    isDesktop
+  ]);
+  const storyContentStyle = (0, import_react_native_ui_common7.useStyle)(
+    () => ({
+      flex: 1,
+      overflow: "hidden",
+      backgroundColor: storyBackgroundColor || theme.background.content
+    }),
+    [storyBackgroundColor, theme.background.content]
+  );
   const fullScreenButtonStyle = (0, import_react_native_ui_common7.useStyle)(
     () => ({
       position: "absolute",
@@ -1959,7 +1988,7 @@ var Layout = ({
   );
   const menuContainerStyle = (0, import_react_native_ui_common7.useStyle)(
     () => ({
-      marginBottom: insets.bottom
+      paddingBottom: insets.bottom
     }),
     [insets.bottom]
   );
@@ -2005,7 +2034,7 @@ var Layout = ({
       }
     ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native_ui_common7.IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon }) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native8.View, { style: mobileContentStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native8.View, { style: contentContainerStyle, children }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native8.View, { style: storyContentStyle, children }),
       story?.parameters?.hideFullScreenButton || isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         import_react_native8.TouchableOpacity,
         {
@@ -2050,7 +2079,7 @@ var Layout = ({
         }
       )
     ] }) }) : null,
-    isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectedNodeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
+    !isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectedNodeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native8.View, { style: mobileMenuDrawerContentStyle, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StorybookLogo, { theme }) }),
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         Sidebar,
@@ -2065,8 +2094,8 @@ var Layout = ({
           refId: DEFAULT_REF_ID
         }
       )
-    ] }) }),
-    isDesktop ? null : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
+    ] }) }) : null,
+    !isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id }) : null
   ] });
 };
 var Nav = import_react_native_theming15.styled.View({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "10.2.3",
+  "version": "10.3.0-canary-20260217005118",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -36,8 +36,8 @@
     "@gorhom/portal": "^1.0.14",
     "@nozbe/microfuzz": "^1.0.0",
     "@storybook/react": "^10.2.3",
-    "@storybook/react-native-theming": "^10.2.3",
-    "@storybook/react-native-ui-common": "^10.2.3",
+    "@storybook/react-native-theming": "10.3.0-canary-20260217005118",
+    "@storybook/react-native-ui-common": "10.3.0-canary-20260217005118",
     "polished": "^4.3.1"
   },
   "peerDependencies": {

package/src/Layout.tsx

@@ -60,7 +60,14 @@ const mobileMenuDrawerContentStyle = {
 
 const flex1 = { flex: 1 } satisfies ViewStyle;
 
-export const FullUI: SBUI = ({ storage, theme, storyHash, story, children }) => {
+export const FullUI: SBUI = ({
+  storage,
+  theme,
+  storyHash,
+  story,
+  storyBackgroundColor,
+  children,
+}) => {
   return (
     <ThemeProvider theme={theme}>
       <SafeAreaProvider>
@@ -68,7 +75,11 @@ export const FullUI: SBUI = ({ storage, theme, storyHash, story, children }) =>
           <BottomSheetModalProvider>
             <StorageProvider storage={storage}>
               <LayoutProvider>
-                <Layout storyHash={storyHash} story={story}>
+                <Layout
+                  storyHash={storyHash}
+                  story={story}
+                  storyBackgroundColor={storyBackgroundColor}
+                >
                   {children}
                 </Layout>
                 <PortalHost name="storybook-lite-ui-root" />
@@ -84,10 +95,12 @@ export const FullUI: SBUI = ({ storage, theme, storyHash, story, children }) =>
 export const Layout = ({
   storyHash,
   story,
+  storyBackgroundColor,
   children,
 }: {
   storyHash: API_IndexHash | undefined;
   story?: StoryContext<ReactRenderer, Args>;
+  storyBackgroundColor?: string;
   children: ReactNode | ReactNode[];
 }) => {
   const theme = useTheme();
@@ -153,9 +166,24 @@ export const Layout = ({
     return {
       flex: 1,
       paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
-      backgroundColor: theme.background.content,
+      backgroundColor: storyBackgroundColor || theme.background.content,
     };
-  }, [theme.background.content, insets.top, story?.parameters?.noSafeArea, isDesktop]);
+  }, [
+    storyBackgroundColor,
+    theme.background.content,
+    insets.top,
+    story?.parameters?.noSafeArea,
+    isDesktop,
+  ]);
+
+  const storyContentStyle = useStyle(
+    () => ({
+      flex: 1,
+      overflow: 'hidden' as const,
+      backgroundColor: storyBackgroundColor || theme.background.content,
+    }),
+    [storyBackgroundColor, theme.background.content]
+  );
 
   const fullScreenButtonStyle = useStyle(
     () => ({
@@ -173,7 +201,7 @@ export const Layout = ({
 
   const menuContainerStyle = useStyle(
     () => ({
-      marginBottom: insets.bottom,
+      paddingBottom: insets.bottom,
     }),
     [insets.bottom]
   );
@@ -229,7 +257,7 @@ export const Layout = ({
       ) : null}
 
       <View style={mobileContentStyle}>
-        <View style={contentContainerStyle}>{children}</View>
+        <View style={storyContentStyle}>{children}</View>
 
         {story?.parameters?.hideFullScreenButton || isDesktop ? null : (
           <TouchableOpacity
@@ -283,7 +311,7 @@ export const Layout = ({
         </Container>
       ) : null}
 
-      {isDesktop ? null : (
+      {!isDesktop ? (
         <SelectedNodeProvider>
           <MobileMenuDrawer ref={mobileMenuDrawerRef}>
             <View style={mobileMenuDrawerContentStyle}>
@@ -302,9 +330,9 @@ export const Layout = ({
             />
           </MobileMenuDrawer>
         </SelectedNodeProvider>
-      )}
+      ) : null}
 
-      {isDesktop ? null : <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} />}
+      {!isDesktop ? <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} /> : null}
     </View>
   );
 };

package/src/Search.tsx

@@ -241,7 +241,7 @@ export const Search = React.memo<{
           <SearchIcon />
         </SearchIconWrapper>
 
-        {isBottomSheet ? (
+        {isBottomSheet && (Platform.OS === 'ios' || Platform.OS === 'android') ? (
           <BottomSheetInput
             ref={inputRef as any} // TODO find solution for this
             onChangeText={setInputValue}