Move App.tsx to App.storybook.tsx and update metro config to not load…

… storybook files when not necessary

App.storybook.tsx

@@ -0,0 +1,2 @@
+import StorybookUIRoot from './.ondevice/Storybook';
+export {StorybookUIRoot as default};

App.tsx

@@ -1,2 +1,29 @@
-import StorybookUIRoot from './.ondevice/Storybook';
-export {StorybookUIRoot as default};
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow strict-local
+ */
+
+import React from 'react';
+import {Button, SafeAreaView, StatusBar, useColorScheme} from 'react-native';
+
+import {Colors} from 'react-native/Libraries/NewAppScreen';
+
+const App: () => React.ReactNode = () => {
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const backgroundStyle = {
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
+  };
+
+  return (
+    <SafeAreaView style={backgroundStyle}>
+      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
+      <Button title={'hello from RN app'} />
+    </SafeAreaView>
+  );
+};
+
+export default App;

metro.config.js

@@ -1,9 +1,15 @@
+const {sourceExts} = require('metro-config/src/defaults/defaults');
+
 /**
  * Metro configuration for React Native
  * https://github.com/facebook/react-native
  *
  * @format
  */
+const storybookSourceExt =
+  process.env.STORYBOOK_VARIANT === 'true'
+    ? ['storybook.tsx', 'storybook.ts', 'storybook.js']
+    : [];
 
 module.exports = {
   transformer: {
@@ -15,6 +21,7 @@ module.exports = {
     }),
   },
   resolver: {
-    resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],
+    resolverMainFields: ['react-native', 'browser', 'main'],
+    sourceExts: [...storybookSourceExt, ...sourceExts],
   },
 };

package.json

@@ -6,7 +6,7 @@
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "start": "react-native start",
-    "start:storybook": "react-native start",
+    "start:storybook": "STORYBOOK_VARIANT=true react-native start",
     "test": "jest",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "update-stories": "sb-rn-get-stories --config-path .ondevice",