fix: improve loading bottom sheet by using non modal version

Author: dannyhw

examples/expo-example/scripts/generatePerfTests.ts

@@ -0,0 +1,57 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+const template = (num: number) => `import { Meta, StoryObj } from '@storybook/react'
+import { View } from 'react-native'
+
+const Test${num} = () => {
+  return <View style={{ flex: 1, backgroundColor: 'red' }} />
+}
+
+const meta: Meta<typeof Test${num}> = {
+  title: 'PerfTesting/Test${num}',
+  component: Test${num},
+}
+
+export default meta
+
+export const Default: StoryObj<typeof Test${num}> = {}
+export const one: StoryObj<typeof Test${num}> = {}
+export const two: StoryObj<typeof Test${num}> = {}
+export const three: StoryObj<typeof Test${num}> = {}
+export const four: StoryObj<typeof Test${num}> = {}
+export const five: StoryObj<typeof Test${num}> = {}
+export const six: StoryObj<typeof Test${num}> = {}
+export const seven: StoryObj<typeof Test${num}> = {}
+export const eight: StoryObj<typeof Test${num}> = {}
+export const nine: StoryObj<typeof Test${num}> = {}
+export const ten: StoryObj<typeof Test${num}> = {}
+export const eleven: StoryObj<typeof Test${num}> = {}
+export const twelve: StoryObj<typeof Test${num}> = {}
+export const thirteen: StoryObj<typeof Test${num}> = {}
+export const fourteen: StoryObj<typeof Test${num}> = {}
+export const fifteen: StoryObj<typeof Test${num}> = {}
+export const sixteen: StoryObj<typeof Test${num}> = {}
+export const seventeen: StoryObj<typeof Test${num}> = {}
+export const eighteen: StoryObj<typeof Test${num}> = {}
+export const nineteen: StoryObj<typeof Test${num}> = {}`;
+
+const generateFiles = () => {
+  const baseDir = path.join(__dirname, '../components/PerfTesting');
+
+  // Create directory if it doesn't exist
+  if (!fs.existsSync(baseDir)) {
+    fs.mkdirSync(baseDir, { recursive: true });
+  }
+
+  // Generate files from Test11 to Test50 (since Test1-10 already exist)
+  for (let i = 1; i <= 200; i++) {
+    const fileName = `Test${i}.stories.tsx`;
+    const filePath = path.join(baseDir, fileName);
+
+    fs.writeFileSync(filePath, template(i));
+    console.log(`Generated ${fileName}`);
+  }
+};
+
+generateFiles();

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

@@ -169,30 +169,6 @@ export const Layout = ({
         )}
       </View>
 
-      <MobileMenuDrawer ref={mobileMenuDrawerRef}>
-        <View style={{ paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }}>
-          <StorybookLogo theme={theme} />
-        </View>
-
-        <Sidebar
-          extra={[]}
-          previewInitialized
-          indexError={undefined}
-          refs={{}}
-          setSelection={({ storyId: newStoryId }) => {
-            const channel = addons.getChannel();
-
-            channel.emit(SET_CURRENT_STORY, { storyId: newStoryId });
-          }}
-          status={{}}
-          index={storyHash}
-          storyId={story?.id}
-          refId={DEFAULT_REF_ID}
-        />
-      </MobileMenuDrawer>
-
-      <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} />
-
       {!uiHidden ? (
         <Container style={{ marginBottom: insets.bottom }}>
           <Nav>
@@ -218,6 +194,30 @@ export const Layout = ({
           </Nav>
         </Container>
       ) : null}
+
+      <MobileMenuDrawer ref={mobileMenuDrawerRef}>
+        <View style={{ paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }}>
+          <StorybookLogo theme={theme} />
+        </View>
+
+        <Sidebar
+          extra={[]}
+          previewInitialized
+          indexError={undefined}
+          refs={{}}
+          setSelection={({ storyId: newStoryId }) => {
+            const channel = addons.getChannel();
+
+            channel.emit(SET_CURRENT_STORY, { storyId: newStoryId });
+          }}
+          status={{}}
+          index={storyHash}
+          storyId={story?.id}
+          refId={DEFAULT_REF_ID}
+        />
+      </MobileMenuDrawer>
+
+      <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} />
     </View>
   );
 };

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

@@ -1,4 +1,4 @@
-import {
+import BottomSheet, {
   BottomSheetBackdrop,
   BottomSheetBackdropProps,
   BottomSheetModal,
@@ -39,28 +39,30 @@ export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawer
     useImperativeHandle(ref, () => ({
       setMobileMenuOpen: (open: boolean) => {
         if (open) {
-          menuBottomSheetRef.current?.present();
+          // menuBottomSheetRef.current?.present();
+          menuBottomSheetRef.current?.expand();
         } else {
           Keyboard.dismiss();
 
-          menuBottomSheetRef.current?.dismiss();
+          // menuBottomSheetRef.current?.dismiss();
+          menuBottomSheetRef.current?.close();
         }
       },
     }));
 
     return (
-      <BottomSheetModal
+      <BottomSheet
         ref={menuBottomSheetRef}
-        index={1}
+        index={-1}
         animateOnMount={!reducedMotion}
         snapPoints={['50%', '75%']}
-        enableDismissOnClose
+        // enableDismissOnClose
         enableHandlePanningGesture
         enableContentPanningGesture
         enableDynamicSizing={false}
         keyboardBehavior="extend"
         keyboardBlurBehavior="restore"
-        stackBehavior="replace"
+        // stackBehavior="replace"
         backdropComponent={BottomSheetBackdropComponent}
         backgroundStyle={{ backgroundColor: theme.background.content }}
         handleIndicatorStyle={{ backgroundColor: theme.textMutedColor }}
@@ -73,7 +75,7 @@ export const MobileMenuDrawer = forwardRef<MobileMenuDrawerRef, MobileMenuDrawer
         >
           {children}
         </BottomSheetScrollView>
-      </BottomSheetModal>
+      </BottomSheet>
     );
   }
 );