Patch

example/apps/expo-app/.gitignore

@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

example/apps/expo-app/App.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { SafeAreaView } from 'react-native';
+import {
+  GluestackUIProvider,
+  Button,
+  ButtonText,
+  Center,
+} from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
+export default function App() {
+  return (
+    <SafeAreaView
+      // eslint-disable-next-line react-native/no-inline-styles
+      style={{
+        flex: 1,
+      }}
+    >
+      <GluestackUIProvider config={config}>
+        <Center flex={1}>
+          <Button>
+            <ButtonText>Hello</ButtonText>
+          </Button>
+        </Center>
+      </GluestackUIProvider>
+    </SafeAreaView>
+  );
+}

example/expo-project/app.json → example/apps/expo-app/app.json

@@ -1,13 +1,11 @@
 {
   "expo": {
-    "name": "expo-project",
-    "slug": "expo-project",
+    "name": "expo-app",
+    "slug": "expo-app",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
     "splash": {
-      "image": "./assets/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
@@ -17,12 +15,9 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       }
     },
-    "web": {
-      "favicon": "./assets/favicon.png"
-    }
+    "web": {}
   }
 }

example/expo-project/babel.config.js → example/apps/expo-app/babel.config.js

@@ -8,7 +8,16 @@ module.exports = function (api) {
         ? [
             'module-resolver',
             {
-              alias: getAliases(),
+              alias: {
+                '@gluestack-ui/themed': path.join(
+                  __dirname,
+                  '../../../packages/themed/src'
+                ),
+                '@gluestack-ui/config': path.join(
+                  __dirname,
+                  '../../../packages/config/src/gluestack-ui.config'
+                ),
+              },
             },
           ]
         : [
@@ -17,12 +26,7 @@ module.exports = function (api) {
               exclude: 'node_modules',
             },
           ],
+      '@babel/plugin-transform-modules-commonjs',
     ],
   };
 };
-function getAliases() {
-  return {
-    // For development, we want to alias the library to the source
-    '@gluestack-ui/themed': path.join(__dirname, '../../packages/themed/src'),
-  };
-}

example/expo-project/metro.config.js → example/apps/expo-app/metro.config.js

@@ -1,11 +1,10 @@
-// Learn more https://docs.expo.dev/guides/monorepos
 const { getDefaultConfig } = require('expo/metro-config');
 const path = require('path');
 
 // Find the project and workspace directories
 const projectRoot = __dirname;
 // This can be replaced with `find-yarn-workspace-root`
-const workspaceRoot = path.resolve(projectRoot, '../..');
+const workspaceRoot = path.resolve(projectRoot, '../../..');
 
 const config = getDefaultConfig(projectRoot);
 

example/expo-project/package.json → example/apps/expo-app/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "expo-project",
+  "name": "expo-app",
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
@@ -9,15 +9,13 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "expo": "~48.0.6",
-    "expo-status-bar": "~1.4.4",
+    "expo": "~49.0.13",
+    "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
-    "react-native": "^0.71.7"
+    "react-native": "0.72.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
-    "@types/react": "~18.0.14",
-    "typescript": "4.9.4"
+    "@babel/core": "^7.20.0"
   },
   "private": true
 }

example/apps/expo-app/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@gluestack-ui/config": [
+        "../../../packages/config/src/gluestack-ui.config"
+      ],
+      "@gluestack-ui/themed": ["../../../packages/themed/src"]
+    }
+  },
+  "extends": "expo/tsconfig.base"
+}