fix: improve loading bottom sheet by using non modal version

.eslintrc.js

@@ -5,5 +5,11 @@ module.exports = {
     'react-native/no-inline-styles': 'off',
     'react/react-in-jsx-scope': 'off',
     curly: ['error', 'multi-line'],
+    'react-hooks/exhaustive-deps': [
+      'error',
+      {
+        additionalHooks: 'useStyle',
+      },
+    ],
   },
 };

examples/expo-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-example",
-  "version": "8.5.2-alpha.0",
+  "version": "8.5.2-alpha.3",
   "private": true,
   "main": "index.js",
   "scripts": {
@@ -25,24 +25,24 @@
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "8.2.0",
     "@react-native-community/slider": "4.5.5",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/addon-links": "^8.4.2",
-    "@storybook/addon-ondevice-actions": "^8.5.2-alpha.0",
-    "@storybook/addon-ondevice-backgrounds": "^8.5.2-alpha.0",
-    "@storybook/addon-ondevice-controls": "^8.5.2-alpha.0",
-    "@storybook/addon-ondevice-notes": "^8.5.2-alpha.0",
+    "@storybook/addon-essentials": "^8.5.1",
+    "@storybook/addon-interactions": "^8.5.1",
+    "@storybook/addon-links": "^8.5.1",
+    "@storybook/addon-ondevice-actions": "^8.5.2-alpha.3",
+    "@storybook/addon-ondevice-backgrounds": "^8.5.2-alpha.3",
+    "@storybook/addon-ondevice-controls": "^8.5.2-alpha.3",
+    "@storybook/addon-ondevice-notes": "^8.5.2-alpha.3",
     "@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/blocks": "^8.5.1",
+    "@storybook/builder-webpack5": "^8.5.1",
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "^8.4.2",
-    "@storybook/react-native": "^8.5.2-alpha.0",
-    "@storybook/react-native-theming": "^8.5.2-alpha.0",
-    "@storybook/react-webpack5": "^8.4.2",
-    "@storybook/test": "^8.4.2",
+    "@storybook/react": "^8.5.1",
+    "@storybook/react-native": "^8.5.2-alpha.3",
+    "@storybook/react-native-theming": "^8.5.2-alpha.3",
+    "@storybook/react-webpack5": "^8.5.1",
+    "@storybook/test": "^8.5.1",
     "expo": "~52.0.11",
     "history": "^5.3.0",
     "querystring": "^0.2.1",
@@ -55,7 +55,7 @@
     "react-native-svg": "15.8.0",
     "react-native-web": "~0.19.13",
     "react-router": "^6.26.2",
-    "storybook": "^8.4.2",
+    "storybook": "^8.5.1",
     "storybook-addon-deep-controls": "^0.9.2",
     "ws": "^8.18.0"
   },

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();

lerna.json

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

packages/ondevice-actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-actions",
-  "version": "8.5.2-alpha.0",
+  "version": "8.5.2-alpha.3",
   "description": "Action Logger addon for react-native storybook",
   "keywords": [
     "storybook"
@@ -27,8 +27,8 @@
     "prepare": "tsc"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^8.4.2",
-    "@storybook/core": "^8.4.2",
+    "@storybook/addon-actions": "^8.5.1",
+    "@storybook/core": "^8.5.1",
     "@storybook/global": "^5.0.0",
     "fast-deep-equal": "^2.0.1"
   },

packages/ondevice-backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-backgrounds",
-  "version": "8.5.2-alpha.0",
+  "version": "8.5.2-alpha.3",
   "description": "A react-native storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -32,8 +32,8 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@storybook/core": "^8.4.2",
-    "@storybook/react-native-theming": "^8.5.2-alpha.0"
+    "@storybook/core": "^8.5.1",
+    "@storybook/react-native-theming": "^8.5.2-alpha.3"
   },
   "devDependencies": {
     "typescript": "^5.3.3"

packages/ondevice-controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-controls",
-  "version": "8.5.2-alpha.0",
+  "version": "8.5.2-alpha.3",
   "description": "Display storybook controls on your device.",
   "keywords": [
     "addon",
@@ -30,10 +30,10 @@
     "copyimages": "cross-env-shell cp -r src/components/color-picker/resources dist/components/color-picker/resources"
   },
   "dependencies": {
-    "@storybook/addon-controls": "^8.4.2",
-    "@storybook/core": "^8.4.2",
-    "@storybook/react-native-theming": "^8.5.2-alpha.0",
-    "@storybook/react-native-ui": "^8.5.2-alpha.0",
+    "@storybook/addon-controls": "^8.5.1",
+    "@storybook/core": "^8.5.1",
+    "@storybook/react-native-theming": "^8.5.2-alpha.3",
+    "@storybook/react-native-ui": "^8.5.2-alpha.3",
     "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.5.2-alpha.0",
+  "version": "8.5.2-alpha.3",
   "description": "Write notes for your react-native Storybook stories.",
   "keywords": [
     "addon",
@@ -29,8 +29,8 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@storybook/core": "^8.4.2",
-    "@storybook/react-native-theming": "^8.5.2-alpha.0",
+    "@storybook/core": "^8.5.1",
+    "@storybook/react-native-theming": "^8.5.2-alpha.3",
     "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.5.2-alpha.0",
+  "version": "8.5.2-alpha.3",
   "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.5.2-alpha.0",
+  "version": "8.5.2-alpha.3",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -58,9 +58,9 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "@storybook/core": "^8.4.2",
-    "@storybook/react": "^8.4.2",
-    "@storybook/react-native-theming": "^8.5.2-alpha.0",
+    "@storybook/core": "^8.5.1",
+    "@storybook/react": "^8.5.1",
+    "@storybook/react-native-theming": "^8.5.2-alpha.3",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",