From 37d275c380b4e5d3caa9a6266ce03f8e35f19ecc Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Fri, 25 Oct 2024 22:07:46 +0100
Subject: [PATCH 1/7] feat: add buttons to hide/show ui

---
 packages/react-native-ui/src/Layout.tsx       | 32 +++++++++++++++++--
 .../src/icon/CloseFullscreenIcon.tsx          | 19 +++++++++++
 .../src/icon/FullscreenIcon.tsx               | 21 ++++++++++++
 3 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 packages/react-native-ui/src/icon/CloseFullscreenIcon.tsx
 create mode 100644 packages/react-native-ui/src/icon/FullscreenIcon.tsx

diff --git a/packages/react-native-ui/src/Layout.tsx b/packages/react-native-ui/src/Layout.tsx
index 8bcfd8deba..b3f2a56ec6 100644
--- a/packages/react-native-ui/src/Layout.tsx
+++ b/packages/react-native-ui/src/Layout.tsx
@@ -4,7 +4,7 @@ import { type API_IndexHash, type Args, type StoryContext } from '@storybook/cor
 import type { ReactRenderer } from '@storybook/react';
 import { styled, useTheme } from '@storybook/react-native-theming';
 import { ReactNode, useRef, useState } from 'react';
-import { Platform, ScrollView, Text, View } from 'react-native';
+import { Platform, ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { IconButton } from './IconButton';
 import { useLayout } from './LayoutProvider';
@@ -16,6 +16,8 @@ import { BottomBarToggleIcon } from './icon/BottomBarToggleIcon';
 import { DarkLogo } from './icon/DarkLogo';
 import { Logo } from './icon/Logo';
 import { MenuIcon } from './icon/MenuIcon';
+import { FullscreenIcon } from './icon/FullscreenIcon';
+import { CloseFullscreenIcon } from './icon/CloseFullscreenIcon';
 
 export const Layout = ({
   storyHash,
@@ -38,6 +40,8 @@ export const Layout = ({
 
   const [desktopAddonsPanelOpen, setDesktopAddonsPanelOpen] = useState(true);
 
+  const [uiHidden, setUiHidden] = useState(false);
+
   if (isDesktop) {
     return (
       <View
@@ -133,7 +137,29 @@ export const Layout = ({
 
   return (
     <View style={{ flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }}>
-      <View style={{ flex: 1, overflow: 'hidden' }}>{children}</View>
+      <View style={{ flex: 1, overflow: 'hidden' }}>
+        {children}
+
+        <TouchableOpacity
+          style={{
+            position: 'absolute',
+            bottom: uiHidden ? 56 + insets.bottom : 16,
+            right: 16,
+            backgroundColor: 'white',
+            padding: 4,
+            borderRadius: 4,
+            borderWidth: 1,
+            borderColor: theme.appBorderColor,
+          }}
+          onPress={() => setUiHidden(!uiHidden)}
+        >
+          {uiHidden ? (
+            <CloseFullscreenIcon color={theme.color.mediumdark} />
+          ) : (
+            <FullscreenIcon color={theme.color.mediumdark} />
+          )}
+        </TouchableOpacity>
+      </View>
 
       <MobileMenuDrawer ref={mobileMenuDrawerRef} onStateChange={setDrawerOpen}>
         <View style={{ paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }}>
@@ -161,7 +187,7 @@ export const Layout = ({
       </MobileMenuDrawer>
 
       <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} onStateChange={setMenuOpen} />
-      {(Platform.OS !== 'android' || (!menuOpen && !drawerOpen)) && (
+      {!uiHidden && (Platform.OS !== 'android' || (!menuOpen && !drawerOpen)) && (
         <Container style={{ marginBottom: insets.bottom }}>
           <Nav>
             <Button
diff --git a/packages/react-native-ui/src/icon/CloseFullscreenIcon.tsx b/packages/react-native-ui/src/icon/CloseFullscreenIcon.tsx
new file mode 100644
index 0000000000..df73dd7cc4
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/packages/react-native-ui/src/icon/FullscreenIcon.tsx b/packages/react-native-ui/src/icon/FullscreenIcon.tsx
new file mode 100644
index 0000000000..a83daaabae
--- /dev/null
+++ b/packages/react-native-ui/src/icon/FullscreenIcon.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Svg, { Path, SvgProps } from 'react-native-svg';
+import { useTheme } from '@storybook/react-native-theming';
+
+export function FullscreenIcon({
+  color, //= '#2E3438',
+  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>
+  );
+}

From 3e601f0d12c7ead5c716e8ae2c8a29ab9e333b11 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Sat, 23 Nov 2024 09:03:10 +0000
Subject: [PATCH 2/7] fix: merge conflict

---
 packages/react-native-ui/src/Layout.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/react-native-ui/src/Layout.tsx b/packages/react-native-ui/src/Layout.tsx
index 0a805b4caf..b2b99f170e 100644
--- a/packages/react-native-ui/src/Layout.tsx
+++ b/packages/react-native-ui/src/Layout.tsx
@@ -4,7 +4,7 @@ import { type API_IndexHash, type Args, type StoryContext } from '@storybook/cor
 import type { ReactRenderer } from '@storybook/react';
 import { styled, useTheme } from '@storybook/react-native-theming';
 import { ReactNode, useRef, useState } from 'react';
-import { Platform, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { IconButton } from './IconButton';
 import { useLayout } from './LayoutProvider';
@@ -189,6 +189,7 @@ export const Layout = ({
             <DarkLogo height={25} width={125} />
           )}
         </View>
+
         <Sidebar
           extra={[]}
           previewInitialized
@@ -207,7 +208,8 @@ export const Layout = ({
       </MobileMenuDrawer>
 
       <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} />
-      {!uiHidden && (Platform.OS !== 'android' || (!menuOpen && !drawerOpen)) && (
+
+      {!uiHidden ? (
         <Container style={{ marginBottom: insets.bottom }}>
           <Nav>
             <Button
@@ -229,7 +231,7 @@ export const Layout = ({
             />
           </Nav>
         </Container>
-      )}
+      ) : null}
     </View>
   );
 };

From 1459bfa0dbac847795e3636b9f3cae04e1d92013 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Mon, 13 Jan 2025 18:43:13 +0000
Subject: [PATCH 3/7] fix: suggestions

---
 packages/react-native-ui/src/Layout.tsx              | 2 +-
 packages/react-native-ui/src/icon/FullscreenIcon.tsx | 7 +------
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/react-native-ui/src/Layout.tsx b/packages/react-native-ui/src/Layout.tsx
index b2b99f170e..4b3e4c29cc 100644
--- a/packages/react-native-ui/src/Layout.tsx
+++ b/packages/react-native-ui/src/Layout.tsx
@@ -149,7 +149,7 @@ export const Layout = ({
             borderWidth: 1,
             borderColor: theme.appBorderColor,
           }}
-          onPress={() => setUiHidden(!uiHidden)}
+          onPress={() => setUiHidden((prev) => !prev)}
         >
           {uiHidden ? (
             <CloseFullscreenIcon color={theme.color.mediumdark} />
diff --git a/packages/react-native-ui/src/icon/FullscreenIcon.tsx b/packages/react-native-ui/src/icon/FullscreenIcon.tsx
index a83daaabae..79cdcecb26 100644
--- a/packages/react-native-ui/src/icon/FullscreenIcon.tsx
+++ b/packages/react-native-ui/src/icon/FullscreenIcon.tsx
@@ -2,12 +2,7 @@ import * as React from 'react';
 import Svg, { Path, SvgProps } from 'react-native-svg';
 import { useTheme } from '@storybook/react-native-theming';
 
-export function FullscreenIcon({
-  color, //= '#2E3438',
-  width = 14,
-  height = 14,
-  ...props
-}: SvgProps) {
+export function FullscreenIcon({ color, width = 14, height = 14, ...props }: SvgProps) {
   const theme = useTheme();
 
   return (

From 9a48f6c7c7ec66b1b2988f8f586ed08fd0613166 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Mon, 13 Jan 2025 19:42:00 +0000
Subject: [PATCH 4/7] fix: reenable use of noSafeArea

---
 packages/react-native-ui/src/Layout.tsx | 32 +++++++------------------
 1 file changed, 9 insertions(+), 23 deletions(-)

diff --git a/packages/react-native-ui/src/Layout.tsx b/packages/react-native-ui/src/Layout.tsx
index 23ab6f7663..de5eac2441 100644
--- a/packages/react-native-ui/src/Layout.tsx
+++ b/packages/react-native-ui/src/Layout.tsx
@@ -136,7 +136,13 @@ export const Layout = ({
   }
 
   return (
-    <View style={{ flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }}>
+    <View
+      style={{
+        flex: 1,
+        paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
+        backgroundColor: theme.background.content,
+      }}
+    >
       <View style={{ flex: 1, overflow: 'hidden' }}>
         {children}
 
@@ -161,28 +167,6 @@ export const Layout = ({
         </TouchableOpacity>
       </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);
-            }}
-          >
-            <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>
-
       <MobileMenuDrawer ref={mobileMenuDrawerRef}>
         <View style={{ paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }}>
           <StorybookLogo theme={theme} />
@@ -211,6 +195,7 @@ export const Layout = ({
         <Container style={{ marginBottom: insets.bottom }}>
           <Nav>
             <Button
+              testID="mobile-menu-button"
               style={{ flexShrink: 1 }}
               hitSlop={{ bottom: 10, left: 10, right: 10, top: 10 }}
               onPress={() => {
@@ -224,6 +209,7 @@ export const Layout = ({
             </Button>
 
             <IconButton
+              testID="mobile-addons-button"
               onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
               Icon={BottomBarToggleIcon}
             />

From 685d3f7f9591fba209b3f7a94b8918660ab81f24 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Mon, 13 Jan 2025 19:42:34 +0000
Subject: [PATCH 5/7] v8.4.5-alpha.0

---
 examples/expo-example/package.json         | 14 ++++----
 lerna.json                                 |  2 +-
 packages/ondevice-actions/package.json     |  2 +-
 packages/ondevice-backgrounds/package.json |  4 +--
 packages/ondevice-controls/package.json    |  6 ++--
 packages/ondevice-notes/package.json       |  4 +--
 packages/react-native-theming/package.json |  2 +-
 packages/react-native-ui/package.json      |  4 +--
 packages/react-native/package.json         |  6 ++--
 yarn.lock                                  | 40 +++++++++++-----------
 10 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/examples/expo-example/package.json b/examples/expo-example/package.json
index ff786cb90a..93165237c7 100644
--- a/examples/expo-example/package.json
+++ b/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,10 +28,10 @@
     "@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",
@@ -39,8 +39,8 @@
     "@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",
diff --git a/lerna.json b/lerna.json
index 2f39f19acb..4c32355cdb 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
   "npmClient": "yarn",
   "registry": "https://registry.npmjs.org",
-  "version": "8.4.4"
+  "version": "8.4.5-alpha.0"
 }
\ No newline at end of file
diff --git a/packages/ondevice-actions/package.json b/packages/ondevice-actions/package.json
index ace35ef7c4..27ae8c05f8 100644
--- a/packages/ondevice-actions/package.json
+++ b/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"
diff --git a/packages/ondevice-backgrounds/package.json b/packages/ondevice-backgrounds/package.json
index 75f71f3cc0..177deda45b 100644
--- a/packages/ondevice-backgrounds/package.json
+++ b/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"
diff --git a/packages/ondevice-controls/package.json b/packages/ondevice-controls/package.json
index ffb88de403..0e1ba993b1 100644
--- a/packages/ondevice-controls/package.json
+++ b/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",
diff --git a/packages/ondevice-notes/package.json b/packages/ondevice-notes/package.json
index 1e416f0b15..27a95e054d 100644
--- a/packages/ondevice-notes/package.json
+++ b/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": {
diff --git a/packages/react-native-theming/package.json b/packages/react-native-theming/package.json
index 583be8f5c6..8f945973ea 100644
--- a/packages/react-native-theming/package.json
+++ b/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",
diff --git a/packages/react-native-ui/package.json b/packages/react-native-ui/package.json
index ab316ecbf8..7269da71ce 100644
--- a/packages/react-native-ui/package.json
+++ b/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",
diff --git a/packages/react-native/package.json b/packages/react-native/package.json
index 08ed6af56b..d240c73836 100644
--- a/packages/react-native/package.json
+++ b/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",
diff --git a/yarn.lock b/yarn.lock
index 8b88abcccb..5fa8ef22d2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5124,7 +5124,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-ondevice-actions@npm:^8.4.4, @storybook/addon-ondevice-actions@workspace:packages/ondevice-actions":
+"@storybook/addon-ondevice-actions@npm:^8.4.5-alpha.0, @storybook/addon-ondevice-actions@workspace:packages/ondevice-actions":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-ondevice-actions@workspace:packages/ondevice-actions"
   dependencies:
@@ -5139,12 +5139,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-ondevice-backgrounds@npm:^8.4.4, @storybook/addon-ondevice-backgrounds@workspace:packages/ondevice-backgrounds":
+"@storybook/addon-ondevice-backgrounds@npm:^8.4.5-alpha.0, @storybook/addon-ondevice-backgrounds@workspace:packages/ondevice-backgrounds":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-ondevice-backgrounds@workspace:packages/ondevice-backgrounds"
   dependencies:
     "@storybook/core": "npm:^8.4.2"
-    "@storybook/react-native-theming": "npm:^8.4.4"
+    "@storybook/react-native-theming": "npm:^8.4.5-alpha.0"
     typescript: "npm:^5.3.3"
   peerDependencies:
     react: "*"
@@ -5152,14 +5152,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-ondevice-controls@npm:^8.4.4, @storybook/addon-ondevice-controls@workspace:packages/ondevice-controls":
+"@storybook/addon-ondevice-controls@npm:^8.4.5-alpha.0, @storybook/addon-ondevice-controls@workspace:packages/ondevice-controls":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-ondevice-controls@workspace:packages/ondevice-controls"
   dependencies:
     "@storybook/addon-controls": "npm:^8.4.2"
     "@storybook/core": "npm:^8.4.2"
-    "@storybook/react-native-theming": "npm:^8.4.4"
-    "@storybook/react-native-ui": "npm:^8.4.4"
+    "@storybook/react-native-theming": "npm:^8.4.5-alpha.0"
+    "@storybook/react-native-ui": "npm:^8.4.5-alpha.0"
     cross-env: "npm:^7.0.3"
     deep-equal: "npm:^1.0.1"
     prop-types: "npm:^15.7.2"
@@ -5176,12 +5176,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-ondevice-notes@npm:^8.4.4, @storybook/addon-ondevice-notes@workspace:packages/ondevice-notes":
+"@storybook/addon-ondevice-notes@npm:^8.4.5-alpha.0, @storybook/addon-ondevice-notes@workspace:packages/ondevice-notes":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-ondevice-notes@workspace:packages/ondevice-notes"
   dependencies:
     "@storybook/core": "npm:^8.4.2"
-    "@storybook/react-native-theming": "npm:^8.4.4"
+    "@storybook/react-native-theming": "npm:^8.4.5-alpha.0"
     react-native-markdown-display: "npm:^7.0.2"
     typescript: "npm:^5.3.3"
   peerDependencies:
@@ -5490,7 +5490,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react-native-theming@npm:^8.4.4, @storybook/react-native-theming@workspace:packages/react-native-theming":
+"@storybook/react-native-theming@npm:^8.4.5-alpha.0, @storybook/react-native-theming@workspace:packages/react-native-theming":
   version: 0.0.0-use.local
   resolution: "@storybook/react-native-theming@workspace:packages/react-native-theming"
   dependencies:
@@ -5504,13 +5504,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/react-native-ui@npm:^8.4.4, @storybook/react-native-ui@workspace:packages/react-native-ui":
+"@storybook/react-native-ui@npm:^8.4.5-alpha.0, @storybook/react-native-ui@workspace:packages/react-native-ui":
   version: 0.0.0-use.local
   resolution: "@storybook/react-native-ui@workspace:packages/react-native-ui"
   dependencies:
     "@storybook/core": "npm:^8.4.2"
     "@storybook/react": "npm:^8.4.2"
-    "@storybook/react-native-theming": "npm:^8.4.4"
+    "@storybook/react-native-theming": "npm:^8.4.5-alpha.0"
     "@types/jest": "npm:^29.4.3"
     "@types/react": "npm:~18.3.12"
     babel-jest: "npm:^29.7.0"
@@ -5534,7 +5534,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/react-native@npm:^8.4.4, @storybook/react-native@workspace:packages/react-native":
+"@storybook/react-native@npm:^8.4.5-alpha.0, @storybook/react-native@workspace:packages/react-native":
   version: 0.0.0-use.local
   resolution: "@storybook/react-native@workspace:packages/react-native"
   dependencies:
@@ -5542,8 +5542,8 @@ __metadata:
     "@storybook/csf": "npm:^0.1.1"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/react": "npm:^8.4.2"
-    "@storybook/react-native-theming": "npm:^8.4.4"
-    "@storybook/react-native-ui": "npm:^8.4.4"
+    "@storybook/react-native-theming": "npm:^8.4.5-alpha.0"
+    "@storybook/react-native-ui": "npm:^8.4.5-alpha.0"
     "@types/jest": "npm:^29.4.3"
     "@types/react": "npm:~18.3.12"
     babel-jest: "npm:^29.7.0"
@@ -9975,10 +9975,10 @@ __metadata:
     "@storybook/addon-essentials": "npm:^8.4.2"
     "@storybook/addon-interactions": "npm:^8.4.2"
     "@storybook/addon-links": "npm:^8.4.2"
-    "@storybook/addon-ondevice-actions": "npm:^8.4.4"
-    "@storybook/addon-ondevice-backgrounds": "npm:^8.4.4"
-    "@storybook/addon-ondevice-controls": "npm:^8.4.4"
-    "@storybook/addon-ondevice-notes": "npm:^8.4.4"
+    "@storybook/addon-ondevice-actions": "npm:^8.4.5-alpha.0"
+    "@storybook/addon-ondevice-backgrounds": "npm:^8.4.5-alpha.0"
+    "@storybook/addon-ondevice-controls": "npm:^8.4.5-alpha.0"
+    "@storybook/addon-ondevice-notes": "npm:^8.4.5-alpha.0"
     "@storybook/addon-react-native-server": "npm:0.0.6"
     "@storybook/addon-react-native-web": "npm:^0.0.26"
     "@storybook/addon-webpack5-compiler-babel": "npm:^3.0.3"
@@ -9986,8 +9986,8 @@ __metadata:
     "@storybook/builder-webpack5": "npm:^8.4.2"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/react": "npm:^8.4.2"
-    "@storybook/react-native": "npm:^8.4.4"
-    "@storybook/react-native-theming": "npm:^8.4.4"
+    "@storybook/react-native": "npm:^8.4.5-alpha.0"
+    "@storybook/react-native-theming": "npm:^8.4.5-alpha.0"
     "@storybook/react-webpack5": "npm:^8.4.2"
     "@storybook/test": "npm:^8.4.2"
     "@testing-library/react-native": "npm:12.4.3"

From 8a94005638290535f239a447dac9e1ad0956e6d2 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Mon, 20 Jan 2025 22:57:42 +0000
Subject: [PATCH 6/7] fix: button color

---
 packages/react-native-ui/src/Layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-native-ui/src/Layout.tsx b/packages/react-native-ui/src/Layout.tsx
index de5eac2441..fae4a70e04 100644
--- a/packages/react-native-ui/src/Layout.tsx
+++ b/packages/react-native-ui/src/Layout.tsx
@@ -151,7 +151,7 @@ export const Layout = ({
             position: 'absolute',
             bottom: uiHidden ? 56 + insets.bottom : 16,
             right: 16,
-            backgroundColor: 'white',
+            backgroundColor: theme.background.content,
             padding: 4,
             borderRadius: 4,
             borderWidth: 1,

From e4ceaf26b37eb27ca6a878ef0aceb0489eae1793 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Mon, 20 Jan 2025 23:02:15 +0000
Subject: [PATCH 7/7] feat: make it hideable

---
 examples/expo-example/.storybook/preview.tsx |  2 +
 packages/react-native-ui/src/Layout.tsx      | 40 ++++++++++----------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/examples/expo-example/.storybook/preview.tsx b/examples/expo-example/.storybook/preview.tsx
index 0ed21ed447..4fcbefda0e 100644
--- a/examples/expo-example/.storybook/preview.tsx
+++ b/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',
diff --git a/packages/react-native-ui/src/Layout.tsx b/packages/react-native-ui/src/Layout.tsx
index fae4a70e04..5d097917e6 100644
--- a/packages/react-native-ui/src/Layout.tsx
+++ b/packages/react-native-ui/src/Layout.tsx
@@ -146,25 +146,27 @@ export const Layout = ({
       <View style={{ flex: 1, overflow: 'hidden' }}>
         {children}
 
-        <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)}
-        >
-          {uiHidden ? (
-            <CloseFullscreenIcon color={theme.color.mediumdark} />
-          ) : (
-            <FullscreenIcon color={theme.color.mediumdark} />
-          )}
-        </TouchableOpacity>
+        {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)}
+          >
+            {uiHidden ? (
+              <CloseFullscreenIcon color={theme.color.mediumdark} />
+            ) : (
+              <FullscreenIcon color={theme.color.mediumdark} />
+            )}
+          </TouchableOpacity>
+        )}
       </View>
 
       <MobileMenuDrawer ref={mobileMenuDrawerRef}>