diff --git a/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.stories.tsx b/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.stories.tsx
index 75dfb3da46..177204723a 100644
--- a/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.stories.tsx
+++ b/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { ControlExample } from './ControlExample';
 
-export default {
+const meta = {
   title: 'ControlExamples/Control Example',
   component: ControlExample,
   args: {
@@ -19,6 +19,16 @@ export default {
     },
     nice: true,
     birthday: new Date(2017, 0, 20),
+    test1: true,
+    test2: false,
+    test3: true,
+    test4: false,
+    test5: true,
+    test6: false,
+    test7: true,
+    test8: true,
+    test9: true,
+    test10: true,
   },
   argTypes: {
     age: {
@@ -28,20 +38,28 @@ export default {
       range: true,
     },
     fruit: {
-      options: {
-        Apple: 'apple',
-        Banana: 'banana',
-        Cherry: 'cherry',
+      options: ['apple', 'banana', 'cherry'],
+
+      control: {
+        type: 'select',
+        labels: {
+          apple: 'Apple',
+          banana: 'Banana',
+          cherry: 'Cherry',
+        },
       },
-      control: { type: 'select' },
     },
     otherFruit: {
-      options: {
-        Kiwi: 'kiwi',
-        Guava: 'guava',
-        Watermelon: 'watermelon',
+      options: ['kiwi', 'guava', 'watermelon'],
+
+      control: {
+        type: 'radio',
+        labels: {
+          kiwi: 'Kiwi',
+          guava: 'Guava',
+          watermelon: 'Watermelon',
+        },
       },
-      control: { type: 'radio' },
     },
     dollars: {
       min: 0,
@@ -54,6 +72,7 @@ export default {
       control: { type: 'color' },
     },
     items: {
+      // @ts-ignore
       control: { type: 'array' },
     },
     customStyles: {
@@ -63,7 +82,9 @@ export default {
       control: { type: 'nonexistent_type' },
     },
   },
-} as Meta<typeof ControlExample>;
+} satisfies Meta<typeof ControlExample>;
+
+export default meta;
 
 type ControlExampleStory = StoryObj<typeof ControlExample>;
 
diff --git a/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.tsx b/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.tsx
index a4ee0d05b7..e12ae8043c 100644
--- a/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.tsx
+++ b/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { View, Text } from 'react-native';
 
 export interface ControlExampleProps {
@@ -12,6 +11,16 @@ export interface ControlExampleProps {
   items: string[];
   nice: boolean;
   customStyles: Record<string, any>;
+  test1: boolean;
+  test2: boolean;
+  test3: boolean;
+  test4: boolean;
+  test5: boolean;
+  test6: boolean;
+  test7: boolean;
+  test8: boolean;
+  test9: boolean;
+  test10: boolean;
 }
 
 export function ControlExample({
diff --git a/packages/react-native-ui/src/Explorer.tsx b/packages/react-native-ui/src/Explorer.tsx
index 69129550bc..067170838a 100644
--- a/packages/react-native-ui/src/Explorer.tsx
+++ b/packages/react-native-ui/src/Explorer.tsx
@@ -22,7 +22,7 @@ export const Explorer: FC<ExplorerProps> = React.memo(function Explorer({
   const containerRef = useRef<View>(null);
 
   return (
-    <View ref={containerRef} id="storybook-explorer-tree">
+    <View style={{ flex: 1 }} ref={containerRef} id="storybook-explorer-tree">
       {dataset.entries.map(([refId, ref]) => (
         <Ref
           {...ref}
diff --git a/packages/react-native-ui/src/MobileMenuDrawer.tsx b/packages/react-native-ui/src/MobileMenuDrawer.tsx
index 98090f3fc6..30f13ea6bc 100644
--- a/packages/react-native-ui/src/MobileMenuDrawer.tsx
+++ b/packages/react-native-ui/src/MobileMenuDrawer.tsx
@@ -2,7 +2,7 @@ import {
   BottomSheetBackdrop,
   BottomSheetBackdropProps,
   BottomSheetModal,
-  BottomSheetScrollView,
+  BottomSheetView,
 } from '@gorhom/bottom-sheet';
 import { ReactNode, forwardRef, useImperativeHandle, useRef } from 'react';
 import { Keyboard } from 'react-native';
@@ -65,14 +65,13 @@ export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawer
         backgroundStyle={{ backgroundColor: theme.background.content }}
         handleIndicatorStyle={{ backgroundColor: theme.textMutedColor }}
       >
-        <BottomSheetScrollView
-          keyboardShouldPersistTaps="handled"
-          contentContainerStyle={{
-            paddingBottom: insets.bottom,
+        <BottomSheetView
+          style={{
+            flex: 1,
           }}
         >
           {children}
-        </BottomSheetScrollView>
+        </BottomSheetView>
       </BottomSheetModal>
     );
   }
diff --git a/packages/react-native-ui/src/Refs.tsx b/packages/react-native-ui/src/Refs.tsx
index 6da5af38fb..e407dc34b8 100644
--- a/packages/react-native-ui/src/Refs.tsx
+++ b/packages/react-native-ui/src/Refs.tsx
@@ -15,6 +15,7 @@ export interface RefProps {
 
 const Wrapper = styled.View<{ isMain: boolean }>(({}) => ({
   position: 'relative',
+  flex: 1,
 }));
 
 export const Ref: FC<RefType & RefProps & { status?: State['status'] }> = React.memo(function Ref(
diff --git a/packages/react-native-ui/src/Sidebar.tsx b/packages/react-native-ui/src/Sidebar.tsx
index 6dc34699e7..b45d7a6780 100644
--- a/packages/react-native-ui/src/Sidebar.tsx
+++ b/packages/react-native-ui/src/Sidebar.tsx
@@ -40,8 +40,12 @@ const Swap = React.memo(function Swap({
   const [a, b] = React.Children.toArray(children);
   return (
     <>
-      <View style={{ display: condition ? 'flex' : 'none' }}>{a}</View>
-      <View style={{ display: condition ? 'none' : 'flex' }}>{b}</View>
+      <View style={{ display: condition ? 'flex' : 'none', flex: condition ? 1 : undefined }}>
+        {a}
+      </View>
+      <View style={{ display: condition ? 'none' : 'flex', flex: condition ? undefined : 1 }}>
+        {b}
+      </View>
     </>
   );
 });
@@ -97,7 +101,7 @@ export const Sidebar = React.memo(function Sidebar({
   const lastViewedProps = useLastViewed(selected);
 
   return (
-    <Container style={{ paddingHorizontal: 10 }}>
+    <Container style={{ flex: 1, paddingHorizontal: 10 }}>
       <Top>
         {/* <Heading
             className="sidebar-header"
diff --git a/packages/react-native-ui/src/Tree.tsx b/packages/react-native-ui/src/Tree.tsx
index b1f7da404b..3329f52c4d 100644
--- a/packages/react-native-ui/src/Tree.tsx
+++ b/packages/react-native-ui/src/Tree.tsx
@@ -18,6 +18,8 @@ import type { ExpandAction, ExpandedState } from './hooks/useExpanded';
 import { useExpanded } from './hooks/useExpanded';
 import { getGroupStatus, statusMapping } from './util/status';
 import { createId, getAncestorIds, getDescendantIds, isStoryHoistable } from './util/tree';
+import { BottomSheetFlatList } from '@gorhom/bottom-sheet';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 interface NodeProps {
   item: Item;
@@ -188,6 +190,8 @@ export const Tree = React.memo<{
   selectedStoryId: string | null;
   onSelectStoryId: (storyId: string) => void;
 }>(function Tree({ isMain, refId, data, status, docsMode, selectedStoryId, onSelectStoryId }) {
+  const insets = useSafeAreaInsets();
+
   const containerRef = useRef<View>(null);
 
   // Find top-level nodes and group them so we can hoist any orphans and expand any roots.
@@ -290,8 +294,8 @@ export const Tree = React.memo<{
 
   const groupStatus = useMemo(() => getGroupStatus(collapsedData, status), [collapsedData, status]);
 
-  const treeItems = useMemo(() => {
-    return collapsedItems.map((itemId) => {
+  const renderItem = useCallback(
+    ({ item: itemId }) => {
       const item = collapsedData[itemId];
       const id = createId(itemId, refId);
 
@@ -337,32 +341,103 @@ export const Tree = React.memo<{
           onSelectStoryId={onSelectStoryId}
         />
       );
-    });
-  }, [
-    ancestry,
-    collapsedData,
-    collapsedItems,
-    docsMode,
-    expandableDescendants,
-    expanded,
-    groupStatus,
-    onSelectStoryId,
-    orphanIds,
-    refId,
-    selectedStoryId,
-    setExpanded,
-    status,
-  ]);
+    },
+    [
+      ancestry,
+      collapsedData,
+      docsMode,
+      expandableDescendants,
+      expanded,
+      groupStatus,
+      onSelectStoryId,
+      orphanIds,
+      refId,
+      selectedStoryId,
+      setExpanded,
+      status,
+    ]
+  );
+
+  // const treeItems = useMemo(() => {
+  //   return collapsedItems.map((itemId) => {
+  //     const item = collapsedData[itemId];
+  //     const id = createId(itemId, refId);
+
+  //     if (item.type === 'root') {
+  //       const descendants = expandableDescendants[item.id];
+  //       const isFullyExpanded = descendants.every((d: string) => expanded[d]);
+  //       return (
+  //         <Root
+  //           key={id}
+  //           item={item}
+  //           refId={refId}
+  //           isOrphan={false}
+  //           isDisplayed
+  //           isSelected={selectedStoryId === itemId}
+  //           isExpanded={!!expanded[itemId]}
+  //           setExpanded={setExpanded}
+  //           isFullyExpanded={isFullyExpanded}
+  //           expandableDescendants={descendants}
+  //           onSelectStoryId={onSelectStoryId}
+  //           docsMode={false}
+  //           color=""
+  //           status={{}}
+  //         />
+  //       );
+  //     }
+
+  //     const isDisplayed = !item.parent || ancestry[itemId].every((a: string) => expanded[a]);
+  //     const color = groupStatus[itemId] ? statusMapping[groupStatus[itemId]][1] : null;
+
+  //     return (
+  //       <Node
+  //         key={id}
+  //         item={item}
+  //         status={status?.[itemId]}
+  //         refId={refId}
+  //         color={color}
+  //         docsMode={docsMode}
+  //         isOrphan={orphanIds.some((oid) => itemId === oid || itemId.startsWith(`${oid}-`))}
+  //         isDisplayed={isDisplayed}
+  //         isSelected={selectedStoryId === itemId}
+  //         isExpanded={!!expanded[itemId]}
+  //         setExpanded={setExpanded}
+  //         onSelectStoryId={onSelectStoryId}
+  //       />
+  //     );
+  //   });
+  // }, [
+  //   ancestry,
+  //   collapsedData,
+  //   collapsedItems,
+  //   docsMode,
+  //   expandableDescendants,
+  //   expanded,
+  //   groupStatus,
+  //   onSelectStoryId,
+  //   orphanIds,
+  //   refId,
+  //   selectedStoryId,
+  //   setExpanded,
+  //   status,
+  // ]);
   return (
     <Container ref={containerRef} hasOrphans={isMain && orphanIds.length > 0}>
-      {treeItems}
+      <BottomSheetFlatList
+        contentContainerStyle={{ paddingTop: 20, paddingBottom: insets.bottom + 16 }}
+        style={{ flex: 1 }}
+        keyboardShouldPersistTaps="handled"
+        data={collapsedItems}
+        renderItem={renderItem}
+      />
     </Container>
   );
 });
 
 const Container = styled.View<{ hasOrphans: boolean }>((props) => ({
-  marginTop: props.hasOrphans ? 20 : 0,
+  // marginTop: props.hasOrphans ? 20 : 0,
   marginBottom: 20,
+  flex: 1,
 }));
 
 const Root = React.memo<NodeProps & { expandableDescendants: string[] }>(function Root({