android working

apps/storybook-react-native/.rnstorybook/index.tsx

@@ -1,11 +1,14 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import { view } from './storybook.requires';
 
 const StorybookUIRoot = view.getStorybookUI({
+  // Disable AsyncStorage to avoid persistence issues
   storage: {
-    getItem: AsyncStorage.getItem,
-    setItem: AsyncStorage.setItem,
+    getItem: async () => null,
+    setItem: async () => {},
   },
+  // Reset initial selection
+  initialSelection: undefined,
+  shouldPersistSelection: false,
 });
 
 export default StorybookUIRoot;

apps/storybook-react-native/.rnstorybook/preview.tsx

@@ -1,17 +1,7 @@
-import React from 'react';
-import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
 import type { Preview } from '@storybook/react';
-import { StorybookProvider } from '../.storybook/StorybookProvider';
 
 const preview: Preview = {
-  decorators: [
-    withBackgrounds,
-    (Story) => (
-      <StorybookProvider>
-        <Story />
-      </StorybookProvider>
-    ),
-  ],
+  decorators: [],
 };
 
 export default preview;

apps/storybook-react-native/.storybook/StorybookProvider.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import { View, Platform, useColorScheme } from 'react-native';
-import { ThemeProvider, Theme } from '@metamask/design-system-twrnc-preset';
-import FontLoader from './FontLoader';
+import { View, useColorScheme } from 'react-native';
 
 interface StorybookProviderProps {
   children: React.ReactNode;
@@ -13,20 +11,10 @@ export const StorybookProvider: React.FC<StorybookProviderProps> = ({
   const colorScheme = useColorScheme();
   // Handle null case by defaulting to light mode
   const isDarkMode = colorScheme === 'dark';
-  const theme = isDarkMode ? Theme.Dark : Theme.Light;
 
-  const content = (
-    <View style={{ backgroundColor: isDarkMode ? 'black' : 'white', flex: 1 }}>
+  return (
+    <View style={{ backgroundColor: isDarkMode ? '#000' : '#fff', flex: 1 }}>
       {children}
     </View>
   );
-
-  // Wrap with ThemeProvider and conditionally with FontLoader
-  const wrappedContent = (
-    <ThemeProvider theme={theme}>
-      {Platform.OS !== 'web' ? <FontLoader>{content}</FontLoader> : content}
-    </ThemeProvider>
-  );
-
-  return wrappedContent;
 };

apps/storybook-react-native/package.json

@@ -31,10 +31,10 @@
     "expo-status-bar": "~2.0.1",
     "expo-system-ui": "~4.0.9",
     "react-native": "^0.76.9",
-    "react-native-gesture-handler": "^2.20.2",
+    "react-native-gesture-handler": "~2.20.2",
     "react-native-reanimated": "~3.16.1",
     "react-native-safe-area-context": "4.12.0",
-    "react-native-svg": "^15.10.1",
+    "react-native-svg": "15.8.0",
     "react-native-web": "~0.19.13",
     "uuid": "^3.0.0"
   },

apps/storybook-react-native/stories/TestStory.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Text } from 'react-native';
+
+// Minimal test component
+const TestComponent = () => <Text>Hello Test</Text>;
+
+const meta: Meta<typeof TestComponent> = {
+  title: 'Test/Simple',
+  component: TestComponent,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};

yarn.lock

@@ -4033,10 +4033,10 @@ __metadata:
     expo-system-ui: "npm:~4.0.9"
     prettier: "npm:^3.3.3"
     react-native: "npm:^0.76.9"
-    react-native-gesture-handler: "npm:^2.20.2"
+    react-native-gesture-handler: "npm:~2.20.2"
     react-native-reanimated: "npm:~3.16.1"
     react-native-safe-area-context: "npm:4.12.0"
-    react-native-svg: "npm:^15.10.1"
+    react-native-svg: "npm:15.8.0"
     react-native-svg-transformer: "npm:^1.5.0"
     react-native-web: "npm:~0.19.13"
     storybook: "npm:^9.1.8"
@@ -15380,6 +15380,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-gesture-handler@npm:~2.20.2":
+  version: 2.20.2
+  resolution: "react-native-gesture-handler@npm:2.20.2"
+  dependencies:
+    "@egjs/hammerjs": "npm:^2.0.17"
+    hoist-non-react-statics: "npm:^3.3.0"
+    invariant: "npm:^2.2.4"
+    prop-types: "npm:^15.7.2"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10/64ab125c539ca8c275f5d305f5e11d366e6098d9e24e3cab25cbfd46a8d618fc3925ea86219972ccc63364e578384bb0120a72562312e596894a04ee0518a363
+  languageName: node
+  linkType: hard
+
 "react-native-jazzicon@npm:^0.1.2":
   version: 0.1.2
   resolution: "react-native-jazzicon@npm:0.1.2"
@@ -15454,6 +15469,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-svg@npm:15.8.0":
+  version: 15.8.0
+  resolution: "react-native-svg@npm:15.8.0"
+  dependencies:
+    css-select: "npm:^5.1.0"
+    css-tree: "npm:^1.1.3"
+    warn-once: "npm:0.1.1"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10/9a60d1f33539c41ca50b2c21e6d8909e52a3bdf67b29b9231c7ffe72120fc8cb6d7fca45723bd9219b993202ade2343c97c7e4f53de7ee2446279ac91426b096
+  languageName: node
+  linkType: hard
+
 "react-native-svg@npm:^15.10.1":
   version: 15.10.1
   resolution: "react-native-svg@npm:15.10.1"