@coze-arch/cli 0.0.1-alpha.912cd5 → 0.0.1-alpha.9c9bba

package/lib/__templates__/expo/.coze

@@ -3,5 +3,10 @@ entrypoint = "server.js"
 requires = ["nodejs-24"]
 
 [dev]
-build = ["bash", ".cozeproj/scripts/deploy_build.sh"]
-run = ["bash", ".cozeproj/scripts/deploy_run.sh"]
+build = ["bash", ".cozeproj/scripts/dev_build.sh"]
+run = ["bash", ".cozeproj/scripts/dev_run.sh"]
+
+[deploy]
+build = ["bash", ".cozeproj/scripts/prod_build.sh"]
+run = ["bash", ".cozeproj/scripts/prod_run.sh"]
+build_app_dir = "."

package/lib/__templates__/expo/.cozeproj/scripts/dev_build.sh

@@ -0,0 +1,86 @@
+#!/bin/bash
+if [ -z "${BASH_VERSION:-}" ]; then exec /usr/bin/env bash "$0" "$@"; fi
+set -euo pipefail
+ROOT_DIR="$(pwd)"
+PREVIEW_DIR="${COZE_PREVIEW_DIR:-$ROOT_DIR}"
+LOG_DIR="${COZE_LOG_DIR:-$ROOT_DIR/logs}"
+LOG_FILE="$LOG_DIR/app.log"
+mkdir -p "$LOG_DIR"
+
+# ==================== 配置项 ====================
+SERVER_DIR="app"
+EXPO_DIR="expo"
+CHECK_HASH_SCRIPT="$ROOT_DIR/check_hash.py"
+# ==================== 工具函数 ====================
+info() {
+  echo -e "\033[32m[INFO] $1\033[0m"
+}
+warn() {
+  echo -e "\033[33m[WARN] $1\033[0m"
+}
+error() {
+  echo -e "\033[31m[ERROR] $1\033[0m"
+  exit 1
+}
+check_command() {
+  if ! command -v "$1" &> /dev/null; then
+    error "命令 $1 未找到，请先安装"
+  fi
+}
+write_log() {
+  local level="${1:-INFO}"
+  local msg="${2:-}"
+  node -e '
+const fs=require("fs");
+const path=process.argv[1];
+const level=(process.argv[2]||"").toUpperCase();
+let msg=String(process.argv[3]||"");
+const ts=Date.now();
+const dt=new Date();
+const parts=new Intl.DateTimeFormat("en-GB",{timeZone:"Asia/Shanghai",year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:false}).formatToParts(dt);
+const o={};
+for(const p of parts){o[p.type]=p.value}
+const dt_str=`${o.year}-${o.month}-${o.day} ${o.hour}:${o.minute}:${o.second}`;
+msg=msg.replace(/\\n/g,"\n");
+msg=`${dt_str} [${level}] ${msg}`;
+const record=JSON.stringify({level, message: msg, timestamp: ts},null,0);
+const fd=fs.openSync(path,"a");
+fs.writeSync(fd, record+"\n", null, "utf8");
+fs.fsyncSync(fd);
+fs.closeSync(fd);
+' "$LOG_FILE" "$level" "$msg"
+}
+
+# ==================== 前置检查 ====================
+write_log "INFO" "==================== 开始构建 ===================="
+
+write_log "INFO" "检查根目录 pre_install.py"
+if [ -f "$PREVIEW_DIR/pre_install.py" ]; then
+  write_log "INFO" "执行：python $PREVIEW_DIR/pre_install.py"
+  python "$PREVIEW_DIR/pre_install.py" || write_log "ERROR" "pre_install.py 执行失败"
+fi
+
+write_log "INFO" "开始执行构建脚本（build_dev.sh）..."
+write_log "INFO" "正在检查依赖命令是否存在..."
+# 检查核心命令
+# check_command "pip"
+# check_command "python"
+check_command "pnpm"
+check_command "npm"
+
+# ==================== 步骤 1：安装项目依赖 ====================
+write_log "INFO" "==================== 安装项目依赖 ===================="
+if [ ! -f "package.json" ]; then
+  write_log "ERROR" "项目目录下无 package.json，不是合法的 Node.js 项目"
+fi
+# 步骤 2.1/2.2：安装项目依赖
+pnpm install --registry=https://registry.npmmirror.com || write_log "ERROR" "Expo 项目依赖安装失败（pnpm 执行出错）"
+
+write_log "INFO" "检查根目录 post_install.py"
+if [ -f "$ROOT_DIR/post_install.py" ]; then
+  write_log "INFO" "执行：python $ROOT_DIR/post_install.py"
+  python "$ROOT_DIR/post_install.py" || write_log "ERROR" "post_install.py 执行失败"
+fi
+
+write_log "INFO" "==================== 依赖安装完成！====================\n"
+write_log "INFO" "下一步：执行 ./deploy_run.sh 启动服务"

package/lib/__templates__/expo/.cozeproj/scripts/{deploy_run.sh → dev_run.sh}

@@ -1,16 +1,17 @@
 ROOT_DIR="$(cd "$(dirname "$0")" && pwd)"
+PREVIEW_DIR="${COZE_PREVIEW_DIR:-$ROOT_DIR}"
 LOG_DIR="${COZE_LOG_DIR:-$ROOT_DIR/logs}"
 LOG_FILE="$LOG_DIR/app.log"
 mkdir -p "$LOG_DIR"
 
 # ==================== 配置项 ====================
-# Python 服务配置
+# Server 服务配置
 SERVER_HOST="0.0.0.0"
 SERVER_PORT="9091"
 # Expo 项目配置
 EXPO_HOST="0.0.0.0"
 EXPO_DIR="expo"
-EXPO_PORT="9090"
+EXPO_PORT="5000"
 WEB_URL="${COZE_PROJECT_DOMAIN_DEFAULT:-http://127.0.0.1:${SERVER_PORT}}"
 ASSUME_YES="1"
 EXPO_PUBLIC_BACKEND_BASE_URL="${EXPO_PUBLIC_BACKEND_BASE_URL:-$WEB_URL}"
@@ -97,31 +98,31 @@ ensure_port() {
 write_log() {
   local level="${1:-INFO}"
   local msg="${2:-}"
-  python - "$LOG_FILE" "$level" "$msg" <<'PY'
-import os,sys,json,time
-from datetime import datetime, timezone, timedelta
-path, level, msg = sys.argv[1], sys.argv[2].upper(), sys.argv[3]
-ts = int(time.time()*1000)
-msg = msg.replace('\\n', '\n')
-tz = timezone(timedelta(hours=8))
-dt_str = datetime.now(tz).strftime('%Y-%m-%d %H:%M:%S')
-msg = f"{dt_str} [{level}] {msg}"
-with open(path,'a',encoding='utf-8',buffering=1) as f:
-    f.write(json.dumps({"level":level,"message":msg,"timestamp":ts},ensure_ascii=False)+'\n')
-    f.flush(); os.fsync(f.fileno())
-PY
-  case "$level" in
-    INFO) echo -e "\033[32m[INFO] $msg\033[0m" ;;
-    WARN) echo -e "\033[33m[WARN] $msg\033[0m" ;;
-    ERROR) echo -e "\033[31m[ERROR] $msg\033[0m" ;;
-    *) echo -e "\033[32m[INFO] $msg\033[0m" ;;
-  esac
+  node -e '
+const fs=require("fs");
+const path=process.argv[1];
+const level=(process.argv[2]||"").toUpperCase();
+let msg=String(process.argv[3]||"");
+const ts=Date.now();
+msg=msg.replace(/\\n/g,"\n");
+const dt=new Date();
+const parts=new Intl.DateTimeFormat("en-GB",{timeZone:"Asia/Shanghai",year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:false}).formatToParts(dt);
+const o={};
+for(const p of parts){o[p.type]=p.value}
+const dt_str=`${o.year}-${o.month}-${o.day} ${o.hour}:${o.minute}:${o.second}`;
+msg=`${dt_str} [${level}] ${msg}`;
+const record=JSON.stringify({level, message: msg, timestamp: ts},null,0);
+const fd=fs.openSync(path,"a");
+fs.writeSync(fd, record+"\n", null, "utf8");
+fs.fsyncSync(fd);
+fs.closeSync(fd);
+' "$LOG_FILE" "$level" "$msg"
 }
 
 wait_port_connectable() {
   local host=$1 port=$2 retries=${3:-10}
   for _ in $(seq 1 "$retries"); do
-    nc -z "$host" "$port" && return 0
+    nc -z -w 1 "$host" "$port" >/dev/null 2>&1 && return 0
     sleep 1
   done
   return 1
@@ -129,13 +130,18 @@ wait_port_connectable() {
 
 start_expo() {
   local offline="${1:-0}"
+
+  pushd ./client
+
   if [ "$offline" = "1" ]; then
-    EXPO_OFFLINE=1 EXPO_NO_DOCTOR=1 EXPO_PUBLIC_BACKEND_BASE_URL="$EXPO_PUBLIC_BACKEND_BASE_URL" EXPO_PACKAGER_PROXY_URL="$EXPO_PACKAGER_PROXY_URL" nohup npx expo start --port "$EXPO_PORT" > logs/expo.log 2>&1 &
+    EXPO_OFFLINE=1 EXPO_NO_DOCTOR=1 EXPO_PUBLIC_BACKEND_BASE_URL="$EXPO_PUBLIC_BACKEND_BASE_URL" EXPO_PACKAGER_PROXY_URL="$EXPO_PACKAGER_PROXY_URL" nohup npx expo start --clear --port "$EXPO_PORT" > ../logs/expo.log 2>&1 &
   else
-    EXPO_NO_DOCTOR=1 EXPO_PUBLIC_BACKEND_BASE_URL="$EXPO_PUBLIC_BACKEND_BASE_URL" EXPO_PACKAGER_PROXY_URL="$EXPO_PACKAGER_PROXY_URL" nohup npx expo start --port "$EXPO_PORT" > logs/expo.log 2>&1 &
+    EXPO_NO_DOCTOR=1 EXPO_PUBLIC_BACKEND_BASE_URL="$EXPO_PUBLIC_BACKEND_BASE_URL" EXPO_PACKAGER_PROXY_URL="$EXPO_PACKAGER_PROXY_URL" nohup npx expo start --clear --port "$EXPO_PORT" > ../logs/expo.log 2>&1 &
   fi
   EXPO_PID=$!
   echo "$EXPO_PID"
+
+  popd
 }
 
 detect_expo_fetch_failed() {
@@ -153,11 +159,20 @@ detect_expo_fetch_failed() {
 }
 
 # ==================== 前置检查 ====================
+# 关掉nginx进程
+ps -ef | grep nginx | grep -v grep | awk '{print $2}' | xargs -r kill -9
+
+write_log "INFO" "检查根目录 pre_install.py"
+if [ -f "$PREVIEW_DIR/pre_install.py" ]; then
+  write_log "INFO" "执行：python $PREVIEW_DIR/pre_install.py"
+  python "$PREVIEW_DIR/pre_install.py" || write_log "ERROR" "pre_install.py 执行失败"
+fi
+
 write_log "INFO" "==================== 开始启动 ===================="
 write_log "INFO" "开始执行服务启动脚本（start_dev.sh）..."
 write_log "INFO" "正在检查依赖命令和目录是否存在..."
 # 检查核心命令
-check_command "python"
+# check_command "python"
 check_command "npm"
 check_command "pnpm"
 check_command "lsof"
@@ -169,42 +184,10 @@ mkdir -p logs
 ensure_port SERVER_PORT "$SERVER_PORT"
 ensure_port EXPO_PORT "$EXPO_PORT"
 
-# ==================== 步骤 1：启动 Python 服务 ====================
-
-# ------------环境变量----------------------
-export storage_type="s3"
-export project_platform="app"
-
-if [ -n "${COZE_WORKLOAD_IDENTITY_API_KEY:-}" ]; then
-  export OPENAI_API_KEY="$COZE_WORKLOAD_IDENTITY_API_KEY"
-fi
-if [ -n "${OPENAI_API_KEY:-}" ]; then
-  export ARK_API_KEY="$OPENAI_API_KEY"
-fi
-
-if [ -n "${COZE_INTEGRATION_BASE_URL:-}" ]; then
-  _base="${COZE_INTEGRATION_BASE_URL%/}"
-  export default_llm_base_url="${_base}/api/v3"
-else
-  export default_llm_base_url="https://ark.cn-beijing.volces.com/api/v3"
-fi
-
-if [ -n "${PGDATABASE_URL:-}" ]; then
-  _pg="${PGDATABASE_URL}"
-  case "${_pg}" in
-    postgresql://*)
-      _pg="postgresql+asyncpg://${_pg#postgresql://}"
-      ;;
-  esac
-  _pg="${_pg%%\?*}"
-  export DATABASE_URL="${_pg}"
-fi
-
-# ------------环境变量----------------------
-
+# ==================== 启动 Server 服务 ====================
 write_log "INFO" "==================== 启动 server 服务 ===================="
-write_log "INFO" "正在执行：npm run server"
-PORT="$SERVER_PORT" nohup npm run server > logs/app.log 2>&1 &
+write_log "INFO" "正在执行：npm run dev"
+PORT="$SERVER_PORT" nohup npm run dev --prefix ./server > logs/app.log 2>&1 &
 SERVER_PID=$!
 if [ -z "${SERVER_PID}" ]; then
   write_log "ERROR" "无法获取 server 后台进程 PID"
@@ -212,8 +195,7 @@ fi
 write_log "INFO" "server 服务已启动，进程 ID：${SERVER_PID:-unknown}"
 
 write_log "INFO" "==================== 启动 Expo 项目 ===================="
-write_log "INFO" "正在执行：npx expo start --port ${EXPO_PORT}"
-write_log "INFO" "开始启动 Expo 服务"
+write_log "INFO" "开始启动 Expo 服务，端口 ${EXPO_PORT}"
 EXPO_PID=$(start_expo 0)
 if detect_expo_fetch_failed 8; then
   write_log "WARN" "Expo 启动检测到网络错误：TypeError: fetch failed，启用离线模式重试"
@@ -221,7 +203,7 @@ if detect_expo_fetch_failed 8; then
   : > logs/expo.log
   EXPO_PID=$(start_expo 1)
 fi
-# 输出以下环境变量，确保 Expo 项目能正确连接到 Python 服务
+# 输出以下环境变量，确保 Expo 项目能正确连接到 Server 服务
 write_log "INFO" "Expo 环境变量配置："
 write_log "INFO" "EXPO_PUBLIC_BACKEND_BASE_URL=${EXPO_PUBLIC_BACKEND_BASE_URL}"
 write_log "INFO" "EXPO_PACKAGER_PROXY_URL=${EXPO_PACKAGER_PROXY_URL}"

package/lib/__templates__/expo/.cozeproj/scripts/prod_build.sh

@@ -0,0 +1,47 @@
+#!/bin/bash
+if [ -z "${BASH_VERSION:-}" ]; then exec /usr/bin/env bash "$0" "$@"; fi
+set -euo pipefail
+ROOT_DIR="$(pwd)"
+
+# ==================== 工具函数 ====================
+info() {
+  echo "[INFO] $1"
+}
+warn() {
+  echo "[WARN] $1"
+}
+error() {
+  echo "[ERROR] $1"
+  exit 1
+}
+check_command() {
+  if ! command -v "$1" &> /dev/null; then
+    error "命令 $1 未找到，请先安装"
+  fi
+}
+
+info "==================== 开始构建 ===================="
+info "开始执行构建脚本（build_prod.sh）..."
+info "正在检查依赖命令是否存在..."
+# 检查核心命令
+check_command "pnpm"
+check_command "npm"
+
+# ==================== 安装 Node 依赖 ====================
+info "==================== 安装 Node 依赖 ===================="
+info "开始安装 Node 依赖"
+if [ -f "$ROOT_DIR/package.json" ]; then
+  info "进入目录：$ROOT_DIR"
+  info "正在执行：pnpm install"
+  (cd "$ROOT_DIR" && pnpm install --registry=https://registry.npmmirror.com) || error "Node 依赖安装失败"
+else
+  warn "未找到 $ROOT_DIR/package.json 文件，请检查路径是否正确"
+fi
+info "==================== 依赖安装完成！====================\n"
+
+info "==================== dist打包 ===================="
+info "开始执行：npm run build --prefix server"
+(cd "$ROOT_DIR" && npm run build --prefix ./server) || error "dist打包失败"
+info "==================== dist打包完成！====================\n"
+
+info "下一步：执行 ./prod_run.sh 启动服务"

package/lib/__templates__/expo/.cozeproj/scripts/prod_run.sh

@@ -0,0 +1,34 @@
+#!/usr/bin/env bash
+# 产物部署使用
+set -euo pipefail
+
+ROOT_DIR="$(pwd)"
+
+HOST="${HOST:-0.0.0.0}"
+PORT="${PORT:-5000}"
+
+# ==================== 工具函数 ====================
+info() {
+  echo "[INFO] $1"
+}
+warn() {
+  echo "[WARN] $1"
+}
+error() {
+  echo "[ERROR] $1"
+  exit 1
+}
+check_command() {
+  if ! command -v "$1" &> /dev/null; then
+    error "命令 $1 未找到，请先安装"
+  fi
+}
+
+# ============== 启动服务 ======================
+# 检查核心命令
+check_command "pnpm"
+check_command "npm"
+
+info "开始执行：npm run start"
+(cd "$ROOT_DIR" && PORT="$PORT" npm run start --prefix ./server) || error "服务启动失败"
+info "服务启动完成！\n"

package/lib/__templates__/expo/README.md

@@ -1,13 +1,72 @@
-# Expo App Template
+# Expo App + Express.js
+
+## 目录结构规范（严格遵循）
+
+当前仓库是一个 monorepo（基于 pnpm 的 workspace）
+
+- Expo 代码在 client 目录，Express.js 代码在 server 目录
+- 本模板默认无 Tab Bar，可按需改造
+
+目录结构说明
+
+├── server/                     # 服务端代码根目录 (Express.js)
+|   ├── src/
+│   │   └── index.ts            # Express 入口文件
+|   └── package.json            # 服务端 package.json
+├── client/                     # React Native 前端代码
+│   ├── app/                    # Expo Router 路由目录（仅路由配置）
+│   │   ├── _layout.tsx         # 根布局文件（必需）
+│   │   ├── home.tsx            # 首页
+│   │   └── index.tsx           # re-export home.tsx
+│   ├── screens/                # 页面实现目录（与 app/ 路由对应）
+│   │   └── home/
+│   │       ├── index.tsx       # 页面组件实现
+│   │       └── styles.ts       # 页面样式
+│   ├── components/             # 可复用组件
+│   │   └── Screen.tsx          # 页面容器组件（必用）
+│   ├── hooks/                  # 自定义 Hooks
+│   ├── contexts/               # React Context 代码
+│   ├── assets/                 # 静态资源
+|   └── package.json            # Expo 应用 package.json
+├── package.json
+├── .cozeproj                   # 预置脚手架脚本（禁止修改）
+└── .coze                       # 配置文件（禁止修改）
+
 ## 安装依赖
+
+### 命令
+
 ```bash
-pnpm install
+pnpm i
 ```
-## 启动 Metro 服务
-```bash
-npx expo start
+
+### 新增依赖约束
+
+如果需要新增依赖，需在 client 和 server 各自的目录添加（原因：隔离前后端的依赖），禁止在根目录直接安装依赖
+
+### 新增依赖标准流程
+
+- 编辑 `client/package.json` 或 `server/package.json`
+- 在根目录执行 `pnpm i`
+
+## Expo 开发规范
+
+### 路径别名
+
+Expo 配置了 `@/` 路径别名指向 `client/` 目录：
+
+```tsx
+// 正确
+import { Screen } from '@/components/Screen';
+
+// 避免相对路径
+import { Screen } from '../../../components/Screen';
 ```
-## 启动 Node 服务器
+
+## 本地开发
+
+运行 coze dev 可以同时启动前端和后端服务，如果端口已占用，该命令会先杀掉占用端口的进程再启动，也可以用来重启前端和后端服务
+
 ```bash
-npm run server
+coze dev
 ```

package/lib/__templates__/expo/_gitignore

@@ -8,4 +8,4 @@ expo/expo-env.d.ts
 expo-env.d.ts
 .DS_Store
 logs/
-tsconfig.tsbuildinfo
+*.tsbuildinfo

package/lib/__templates__/expo/_npmrc

@@ -1,4 +1,4 @@
-registry=https://registry.npmjs.org
+registry=https://registry.npmmirror.com
 
 strictStorePkgContentCheck=false
 verifyStoreIntegrity=false
@@ -8,15 +8,13 @@ network-concurrency=16
 fetch-retries=3
 fetch-timeout=60000
 
-# 严格使用 peer dependencies
+# peerDependencies
 strict-peer-dependencies=false
-
-# 自动生成 lockfile
 auto-install-peers=true
 
 # lockfile 配置
 lockfile=true
 prefer-frozen-lockfile=true
 
-# 如果 lockfile 存在但过期，更新而不是失败
+# semver 选择最高版本
 resolution-mode=highest

package/lib/__templates__/expo/client/app/_layout.tsx

@@ -24,7 +24,7 @@ export default function RootLayout() {
                 // 隐藏自带的头部
                 headerShown: false
             }}>
-              <Stack.Screen name="(tabs)" options={{ title: "" }} />
+              <Stack.Screen name="index" options={{ title: "" }} />
             </Stack>
             <Toast />
         </GestureHandlerRootView>

package/lib/__templates__/expo/client/app/home.tsx

@@ -0,0 +1 @@
+export { default } from '@/screens/home'

package/lib/__templates__/expo/client/app/index.tsx

@@ -0,0 +1 @@
+export { default } from './home'

package/lib/__templates__/expo/client/app.config.ts

@@ -0,0 +1,71 @@
+import { ExpoConfig, ConfigContext } from 'expo/config';
+
+export default ({ config }: ConfigContext): ExpoConfig => {
+  return {
+    ...config,
+      "name": "${app_name}",
+      "slug": "${slug}",
+      "version": "1.0.0",
+      "orientation": "portrait",
+      "icon": "./assets/images/icon.png",
+      "scheme": "myapp",
+      "userInterfaceStyle": "automatic",
+      "newArchEnabled": true,
+      "ios": {
+        "supportsTablet": true
+      },
+      "android": {
+        "adaptiveIcon": {
+          "foregroundImage": "./assets/images/adaptive-icon.png",
+          "backgroundColor": "#ffffff"
+        }
+      },
+      "web": {
+        "bundler": "metro",
+        "output": "single",
+        "favicon": "./assets/images/favicon.png"
+      },
+      "plugins": [
+        process.env.EXPO_PUBLIC_BACKEND_BASE_URL ? [
+          "expo-router",
+          {
+            "origin": process.env.EXPO_PUBLIC_BACKEND_BASE_URL
+          }
+        ] : 'expo-router',
+        [
+          "expo-splash-screen",
+          {
+            "image": "./assets/images/splash-icon.png",
+            "imageWidth": 200,
+            "resizeMode": "contain",
+            "backgroundColor": "#ffffff"
+          }
+        ],
+        [
+          "expo-image-picker",
+          {
+            "photosPermission": "允许${app_name}访问您的相册，以便您上传或保存图片。",
+            "cameraPermission": "允许${app_name}使用您的相机，以便您直接拍摄照片上传。",
+            "microphonePermission": "允许${app_name}访问您的麦克风，以便您拍摄带有声音的视频。"
+          }
+        ],
+        [
+          "expo-location",
+          {
+            "locationWhenInUsePermission": "${app_name}需要访问您的位置以提供周边服务及导航功能。"
+          }
+        ],
+        [
+          "expo-camera",
+          {
+            "cameraPermission": "${app_name}需要访问相机以拍摄照片和视频。",
+            "microphonePermission": "${app_name}需要访问麦克风以录制视频声音。",
+            "recordAudioAndroid": true
+          }
+        ]
+      ],
+      "experiments": {
+        "typedRoutes": true
+      }
+  }
+}

package/lib/__templates__/expo/client/components/ThemedText.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Text, TextProps, TextStyle } from 'react-native';
+import { useTheme } from '@/hooks/useTheme';
+import { Typography } from '@/constants/theme';
+
+type TypographyVariant = keyof typeof Typography;
+
+interface ThemedTextProps extends TextProps {
+  variant?: TypographyVariant;
+  color?: string;
+}
+
+export function ThemedText({
+  variant = 'body',
+  color,
+  style,
+  children,
+  ...props
+}: ThemedTextProps) {
+  const { theme } = useTheme();
+  const typographyStyle = Typography[variant];
+
+  const textStyle: TextStyle = {
+    ...typographyStyle,
+    color: color ?? theme.textPrimary,
+  };
+
+  return (
+    <Text style={[textStyle, style]} {...props}>
+      {children}
+    </Text>
+  );
+}

package/lib/__templates__/expo/client/components/ThemedView.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { View, ViewProps, ViewStyle } from 'react-native';
+import { useTheme } from '@/hooks/useTheme';
+
+type BackgroundLevel = 'root' | 'default' | 'secondary' | 'tertiary';
+
+interface ThemedViewProps extends ViewProps {
+  level?: BackgroundLevel;
+  backgroundColor?: string;
+}
+
+const backgroundMap: Record<BackgroundLevel, string> = {
+  root: 'backgroundRoot',
+  default: 'backgroundDefault',
+  secondary: 'backgroundSecondary',
+  tertiary: 'backgroundTertiary',
+};
+
+export function ThemedView({
+  level = 'root',
+  backgroundColor,
+  style,
+  children,
+  ...props
+}: ThemedViewProps) {
+  const { theme } = useTheme();
+  const bgColor = backgroundColor ?? (theme as any)[backgroundMap[level]];
+
+  const viewStyle: ViewStyle = {
+    backgroundColor: bgColor,
+  };
+
+  return (
+    <View style={[viewStyle, style]} {...props}>
+      {children}
+    </View>
+  );
+}