feat: add buttons to hide/show ui

examples/expo-example/.storybook/preview.tsx

@@ -19,6 +19,8 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    hideFullScreenButton: false,
+    noSafeArea: false,
     my_param: 'anything',
     backgrounds: {
       default: Appearance.getColorScheme() === 'dark' ? 'dark' : 'plain',

examples/expo-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-example",
-  "version": "8.4.4",
+  "version": "8.4.5-alpha.0",
   "private": true,
   "main": "index.js",
   "scripts": {
@@ -28,19 +28,19 @@
     "@storybook/addon-essentials": "^8.4.2",
     "@storybook/addon-interactions": "^8.4.2",
     "@storybook/addon-links": "^8.4.2",
-    "@storybook/addon-ondevice-actions": "^8.4.4",
-    "@storybook/addon-ondevice-backgrounds": "^8.4.4",
-    "@storybook/addon-ondevice-controls": "^8.4.4",
-    "@storybook/addon-ondevice-notes": "^8.4.4",
+    "@storybook/addon-ondevice-actions": "^8.4.5-alpha.0",
+    "@storybook/addon-ondevice-backgrounds": "^8.4.5-alpha.0",
+    "@storybook/addon-ondevice-controls": "^8.4.5-alpha.0",
+    "@storybook/addon-ondevice-notes": "^8.4.5-alpha.0",
     "@storybook/addon-react-native-server": "0.0.6",
     "@storybook/addon-react-native-web": "^0.0.26",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/blocks": "^8.4.2",
     "@storybook/builder-webpack5": "^8.4.2",
     "@storybook/global": "^5.0.0",
     "@storybook/react": "^8.4.2",
-    "@storybook/react-native": "^8.4.4",
-    "@storybook/react-native-theming": "^8.4.4",
+    "@storybook/react-native": "^8.4.5-alpha.0",
+    "@storybook/react-native-theming": "^8.4.5-alpha.0",
     "@storybook/react-webpack5": "^8.4.2",
     "@storybook/test": "^8.4.2",
     "expo": "~52.0.11",

lerna.json

@@ -1,5 +1,5 @@
 {
   "npmClient": "yarn",
   "registry": "https://registry.npmjs.org",
-  "version": "8.4.4"
+  "version": "8.4.5-alpha.0"
 }

packages/ondevice-actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-actions",
-  "version": "8.4.4",
+  "version": "8.4.5-alpha.0",
   "description": "Action Logger addon for react-native storybook",
   "keywords": [
     "storybook"

packages/ondevice-backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-backgrounds",
-  "version": "8.4.4",
+  "version": "8.4.5-alpha.0",
   "description": "A react-native storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@storybook/core": "^8.4.2",
-    "@storybook/react-native-theming": "^8.4.4"
+    "@storybook/react-native-theming": "^8.4.5-alpha.0"
   },
   "devDependencies": {
     "typescript": "^5.3.3"

packages/ondevice-controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-controls",
-  "version": "8.4.4",
+  "version": "8.4.5-alpha.0",
   "description": "Display storybook controls on your device.",
   "keywords": [
     "addon",
@@ -32,8 +32,8 @@
   "dependencies": {
     "@storybook/addon-controls": "^8.4.2",
     "@storybook/core": "^8.4.2",
-    "@storybook/react-native-theming": "^8.4.4",
-    "@storybook/react-native-ui": "^8.4.4",
+    "@storybook/react-native-theming": "^8.4.5-alpha.0",
+    "@storybook/react-native-ui": "^8.4.5-alpha.0",
     "deep-equal": "^1.0.1",
     "prop-types": "^15.7.2",
     "react-native-modal-datetime-picker": "^14.0.0",

packages/ondevice-notes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-notes",
-  "version": "8.4.4",
+  "version": "8.4.5-alpha.0",
   "description": "Write notes for your react-native Storybook stories.",
   "keywords": [
     "addon",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@storybook/core": "^8.4.2",
-    "@storybook/react-native-theming": "^8.4.4",
+    "@storybook/react-native-theming": "^8.4.5-alpha.0",
     "react-native-markdown-display": "^7.0.2"
   },
   "devDependencies": {

packages/react-native-theming/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-theming",
-  "version": "8.4.4",
+  "version": "8.4.5-alpha.0",
   "description": "A wrapper library around emotion 11 to provide theming support for react-native storybook",
   "keywords": [
     "react",

packages/react-native-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "8.4.4",
+  "version": "8.4.5-alpha.0",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -60,7 +60,7 @@
   "dependencies": {
     "@storybook/core": "^8.4.2",
     "@storybook/react": "^8.4.2",
-    "@storybook/react-native-theming": "^8.4.4",
+    "@storybook/react-native-theming": "^8.4.5-alpha.0",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",

packages/react-native-ui/src/Layout.tsx

@@ -3,20 +3,21 @@ import { addons } from '@storybook/core/manager-api';
 import { type API_IndexHash, type Args, type StoryContext } from '@storybook/core/types';
 import type { ReactRenderer } from '@storybook/react';
 import { styled, useTheme } from '@storybook/react-native-theming';
-import { ReactNode, useRef } from 'react';
-import { ScrollView, Text, View } from 'react-native';
+import { ReactNode, useRef, useState } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { IconButton } from './IconButton';
 import { useLayout } from './LayoutProvider';
 import { AddonsTabs, MobileAddonsPanel, MobileAddonsPanelRef } from './MobileAddonsPanel';
 import { MobileMenuDrawer, MobileMenuDrawerRef } from './MobileMenuDrawer';
 import { Sidebar } from './Sidebar';
+import { StorybookLogo } from './StorybookLogo';
 import { DEFAULT_REF_ID } from './constants';
+import { useStoreBooleanState } from './hooks/useStoreState';
 import { BottomBarToggleIcon } from './icon/BottomBarToggleIcon';
-
+import { CloseFullscreenIcon } from './icon/CloseFullscreenIcon';
+import { FullscreenIcon } from './icon/FullscreenIcon';
 import { MenuIcon } from './icon/MenuIcon';
-import { StorybookLogo } from './StorybookLogo';
-import { useStoreBooleanState } from './hooks/useStoreState';
 
 export const Layout = ({
   storyHash,
@@ -43,6 +44,8 @@ export const Layout = ({
     true
   );
 
+  const [uiHidden, setUiHidden] = useState(false);
+
   if (isDesktop) {
     return (
       <View
@@ -133,35 +136,44 @@ export const Layout = ({
   }
 
   return (
-    <View style={{ flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }}>
-      <View style={{ flex: 1, overflow: 'hidden' }}>{children}</View>
-
-      <Container style={{ marginBottom: insets.bottom }}>
-        <Nav>
-          <Button
-            style={{ flexShrink: 1 }}
-            hitSlop={{ bottom: 10, left: 10, right: 10, top: 10 }}
-            onPress={() => {
-              mobileMenuDrawerRef.current.setMobileMenuOpen(true);
+    <View
+      style={{
+        flex: 1,
+        paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
+        backgroundColor: theme.background.content,
+      }}
+    >
+      <View style={{ flex: 1, overflow: 'hidden' }}>
+        {children}
+
+        {story.parameters.hideFullScreenButton ? null : (
+          <TouchableOpacity
+            style={{
+              position: 'absolute',
+              bottom: uiHidden ? 56 + insets.bottom : 16,
+              right: 16,
+              backgroundColor: theme.background.content,
+              padding: 4,
+              borderRadius: 4,
+              borderWidth: 1,
+              borderColor: theme.appBorderColor,
             }}
+            onPress={() => setUiHidden((prev) => !prev)}
           >
-            <MenuIcon color={theme.color.mediumdark} />
-            <Text style={{ flexShrink: 1, color: theme.color.defaultText }} numberOfLines={1}>
-              {story?.title}/{story?.name}
-            </Text>
-          </Button>
-
-          <IconButton
-            onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
-            Icon={BottomBarToggleIcon}
-          />
-        </Nav>
-      </Container>
+            {uiHidden ? (
+              <CloseFullscreenIcon color={theme.color.mediumdark} />
+            ) : (
+              <FullscreenIcon color={theme.color.mediumdark} />
+            )}
+          </TouchableOpacity>
+        )}
+      </View>
 
       <MobileMenuDrawer ref={mobileMenuDrawerRef}>
         <View style={{ paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }}>
           <StorybookLogo theme={theme} />
         </View>
+
         <Sidebar
           extra={[]}
           previewInitialized
@@ -180,6 +192,32 @@ export const Layout = ({
       </MobileMenuDrawer>
 
       <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} />
+
+      {!uiHidden ? (
+        <Container style={{ marginBottom: insets.bottom }}>
+          <Nav>
+            <Button
+              testID="mobile-menu-button"
+              style={{ flexShrink: 1 }}
+              hitSlop={{ bottom: 10, left: 10, right: 10, top: 10 }}
+              onPress={() => {
+                mobileMenuDrawerRef.current.setMobileMenuOpen(true);
+              }}
+            >
+              <MenuIcon color={theme.color.mediumdark} />
+              <Text style={{ flexShrink: 1, color: theme.color.defaultText }} numberOfLines={1}>
+                {story?.title}/{story?.name}
+              </Text>
+            </Button>
+
+            <IconButton
+              testID="mobile-addons-button"
+              onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
+              Icon={BottomBarToggleIcon}
+            />
+          </Nav>
+        </Container>
+      ) : null}
     </View>
   );
 };

packages/react-native-ui/src/icon/CloseFullscreenIcon.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import Svg, { Path, SvgProps } from 'react-native-svg';
+import { useTheme } from '@storybook/react-native-theming';
+
+export function CloseFullscreenIcon({ color, width = 14, height = 14, ...props }: SvgProps) {
+  const theme = useTheme();
+
+  return (
+    <Svg
+      fill={color ?? theme.color.defaultText}
+      height={height}
+      viewBox="0 0 16 16"
+      width={width}
+      {...props}
+    >
+      <Path d="M5.5 0a.5.5 0 01.5.5v4A1.5 1.5 0 014.5 6h-4a.5.5 0 010-1h4a.5.5 0 00.5-.5v-4a.5.5 0 01.5-.5zm5 0a.5.5 0 01.5.5v4a.5.5 0 00.5.5h4a.5.5 0 010 1h-4A1.5 1.5 0 0110 4.5v-4a.5.5 0 01.5-.5zM0 10.5a.5.5 0 01.5-.5h4A1.5 1.5 0 016 11.5v4a.5.5 0 01-1 0v-4a.5.5 0 00-.5-.5h-4a.5.5 0 01-.5-.5zm10 1a1.5 1.5 0 011.5-1.5h4a.5.5 0 010 1h-4a.5.5 0 00-.5.5v4a.5.5 0 01-1 0v-4z" />
+    </Svg>
+  );
+}

packages/react-native-ui/src/icon/FullscreenIcon.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Svg, { Path, SvgProps } from 'react-native-svg';
+import { useTheme } from '@storybook/react-native-theming';
+
+export function FullscreenIcon({ color, width = 14, height = 14, ...props }: SvgProps) {
+  const theme = useTheme();
+
+  return (
+    <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
+      <Path
+        d="M1.5 1h2a.5.5 0 010 1h-.793l3.147 3.146a.5.5 0 11-.708.708L2 2.707V3.5a.5.5 0 01-1 0v-2a.5.5 0 01.5-.5zm8.5.5a.5.5 0 01.5-.5h2a.5.5 0 01.5.5v2a.5.5 0 01-1 0v-.793L8.854 5.854a.5.5 0 11-.708-.708L11.293 2H10.5a.5.5 0 01-.5-.5zm2.5 8.5a.5.5 0 01.5.5v2a.5.5 0 01-.5.5h-2a.5.5 0 010-1h.793L8.146 8.854a.5.5 0 11.708-.708L12 11.293V10.5a.5.5 0 01.5-.5zM2 11.293V10.5a.5.5 0 00-1 0v2a.5.5 0 00.5.5h2a.5.5 0 000-1h-.793l3.147-3.146a.5.5 0 10-.708-.708L2 11.293z"
+        fill={color ?? theme.color.defaultText}
+      />
+    </Svg>
+  );
+}

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "8.4.4",
+  "version": "8.4.5-alpha.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -49,8 +49,8 @@
     "@storybook/csf": "^0.1.1",
     "@storybook/global": "^5.0.0",
     "@storybook/react": "^8.4.2",
-    "@storybook/react-native-theming": "^8.4.4",
-    "@storybook/react-native-ui": "^8.4.4",
+    "@storybook/react-native-theming": "^8.4.5-alpha.0",
+    "@storybook/react-native-ui": "^8.4.5-alpha.0",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",