Merge pull request #1323 from gluestack/patch

Patch

_template/package-template/example/native/package.json

@@ -17,7 +17,7 @@
     "@babel/core": "^7.12.9",
     "@expo/webpack-config": "^0.17.2",
     "@types/react": "~18.0.14",
-    "@types/react-native": "~0.70.6",
+    "@types/react-native": "~0.72.3",
     "babel-loader": "8.2.5",
     "ts-loader": "~8.2.0",
     "typescript": "^4.6.3"

_template/package-template/package.json

@@ -14,20 +14,20 @@
   },
   "devDependencies": {
     "@types/react": "^18.0.22",
-    "@types/react-native": "^0.69.15",
+    "@types/react-native": "^0.72.3",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "react": "^18.1.0",
     "react-dom": "18.1.0",
-    "react-native": "^0.70.3",
+    "react-native": "^0.72.4",
     "react-native-builder-bob": "^0.20.1",
-    "react-native-web": "^0.18.1",
+    "react-native-web": "^0.19.9",
     "tsconfig": "*",
     "typescript": "^4.7.4"
   },
   "dependencies": {
     "@expo/html-elements": "^0.2.2",
     "@gluestack/styled": "*",
-    "@react-native-aria/focus": "^0.2.7",
+    "@react-native-aria/focus": "^0.2.9",
     "lodash.merge": "^4.6.2"
   },
   "peerDependencies": {

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,17 @@ 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'),
+    '@gluestack-ui/config': path.join(
+      __dirname,
+      '../../packages/config/src/gliesstack-ui.config'
+    ),
   };
 }

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.4"
   },
   "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"
+}