t4-app Documentation

The config object is created using createTamagui and defines the core design system for the application, including fonts, themes, tokens, animations, and media queries. This configuration is used to drive the styling engine across the UI kit.

Key configuration properties include:

• defaultFont: Sets the fallback font family (e.g., 'body').
• animations: Provides the animation definitions.
• shouldAddPrefersColorThemes: Enables support for system color preference media queries.
• themeClassNameOnRoot: Applies theme class names to the root element.
• shorthands: Enables shorthand property names for styles.
• fonts: A mapping of font names to createInterFont instances.
• themes: The set of available color themes.
• tokens: The design tokens (colors, spacing, etc.).
• media: A set of media query breakpoints defined via createMedia.

export const config = createTamagui({
  defaultFont: 'body',
  animations,
  shouldAddPrefersColorThemes: true,
  themeClassNameOnRoot: true,
  shorthands,
  fonts: {
    body: bodyFont,
    heading: headingFont,
  },
  themes,
  tokens,
  media: createMedia({
    // ... media queries
  }),
})

The metro.config.js in the apps/expo directory is configured to support a monorepo structure. It enables CSS support for web builds, extends the resolver to include .cjs files, and configures Metro to watch the entire workspace root. It also ensures that dependencies are resolved correctly by looking into both the local projectRoot and the workspaceRoot node modules.

const { getDefaultConfig } = require('@expo/metro-config')
const path = require('path')

const projectRoot = __dirname
const workspaceRoot = path.resolve(__dirname, '../..')

const config = getDefaultConfig(projectRoot, {
  isCSSEnabled: true,
})

config.resolver.sourceExts.push('cjs')

config.watchFolders = [workspaceRoot]
config.resolver.nodeModulesPaths = [
  path.resolve(projectRoot, 'node_modules'),
  path.resolve(workspaceRoot, 'node_modules'),
]
config.resolver.disableHierarchicalLookup = false

config.transformer = { ...config.transformer, unstable_allowRequireContext: true }
config.transformer.minifierPath = require.resolve('metro-minify-terser')

module.exports = config

The drizzle.config.ts file defines the configuration for Drizzle Kit when working with a Cloudflare D1 database. It specifies the schema location, migration output directory, and the necessary credentials to connect via Wrangler.

Key configuration keys:

• schema: Path to the TypeScript file defining the database schema.
• out: Directory where migration files will be generated.
• driver: Set to 'd1' for Cloudflare D1 support.
• dbCredentials: Object containing connection details:
  • wranglerConfigPath: Path to your wrangler.toml file.
  • dbName: The name of the D1 database.
• verbose: Boolean to enable/disable detailed logging.
• strict: Boolean to enable strict mode for schema validation.

import type { Config } from 'drizzle-kit'

export default {
  schema: './src/db/schema.ts',
  out: './migrations',
  driver: 'd1',
  dbCredentials: {
    wranglerConfigPath: 'wrangler.toml',
    dbName: 'production',
  },
  verbose: false,
  strict: true,
} satisfies Config

The app.config.ts file defines the configuration for the Expo mobile application. It uses environment variables to manage EAS (Expo Application Services) settings and project ownership.

Key configuration settings include:

• extra.eas.projectId: Set via the EXPO_PUBLIC_EAS_PROJECT_ID environment variable.
• owner: Set via the EXPO_PUBLIC_EAS_OWNER environment variable.
• plugins: Includes expo-router for file-based routing.
• experiments: Enables tsconfigPaths and typedRoutes for improved TypeScript integration.
• platforms: Configured for ios and android.
• updates.url: Points to the specific Expo update URL for this project.
• runtimeVersion: Uses the sdkVersion policy.

import { ConfigContext, ExpoConfig } from '@expo/config'

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  extra: {
    eas: {
      projectId: process.env.EXPO_PUBLIC_EAS_PROJECT_ID,
    },
  },
  owner: process.env.EXPO_PUBLIC_EAS_OWNER,
  plugins: ['expo-router'],
  experiments: {
    tsconfigPaths: true,
    typedRoutes: true,
  },
  platforms: ['ios', 'android'],
  name: 'T4 App',
  slug: 't4-app',
  updates: {
    url: 'https://u.expo.dev/85fc6ccd-0ce1-4e4d-804c-b15df989f97e',
  },
  runtimeVersion: {
    policy: 'sdkVersion',
  },
})