Skip to main content

​
Tech Stack

The stack consists of:
  • React Native: Cross‑platform mobile app framework providing core components and native APIs for building iOS and Android apps.
  • Expo (Expo Go during development): Framework and tooling for React Native that simplifies app development; Expo Go is used for running the app in development without native build steps.
  • Metro: JavaScript bundler and development server used by React Native and Expo to bundle and serve the app code.
  • Babel: JavaScript compiler that transforms modern JavaScript and JSX syntax into backward-compatible code for React Native.
  • React Native Reusables: Native Reusables: UI component library for React Native, inspired by shadcn/ui, providing pre-built, customizable components.
  • Uniwind: Tailwind-style utility-first CSS framework for React Native, used by React Native Reusables to style components efficiently.
  • Lucide: Open-source icon library integrated with React Native Reusables for vector icons.

​
Folder Structure

app
+html.tsx
+not-found.tsx
index.tsx
app.json
babel.config.js
components.json
global.css
metro.config.js
package-lock.json
package.json
tsconfig.json
uniwind-types.d.ts

​
Key Items explained

  • app/ – Expo Router’s file‑based routes (each file becomes a route in your app)
    • +html.tsx → Custom HTML document for the web part of Expo
    • +not-found.tsx → 404 page shown when no route matches
    • index.tsx → Home screen (/) route
    • (other dynamic/utility files like [slug].tsx or _layout.tsx would live here too)
  • app.json – Expo configuration file that defines project metadata (name, slug, icons) and build settings used by Expo tooling.
  • assets/ – Folder for static assets such as images, icons, fonts, etc.
    • images/ → Stores static image assets used in the app.
  • babel.config.js – Configuration for Babel, the JavaScript compiler; sets up presets (e.g., babel‑preset‑expo) and plugins used to transform modern JS/TS into code compatible with Expo/React Native.
  • components/ – Contains reusable UI pieces for your app
    • ui/ → A directory of UI component primitives you’ve copied in or built (buttons, inputs, etc.)
  • components.json – Config file for React Native Reusables CLI, defining which components exist and how they’re scaffolded.
  • global.css – Your global CSS file with custom properties (e.g., Tailwind variables) used for styling especially on web.
  • lib/ – Shared utilities and logic used across the app
    • theme.ts → A theme object (e.g., colors, fonts) coordinating design tokens with global styles
    • utils.ts → App utilities (helper functions like cn, ID helpers, etc.)
  • metro.config.js – Metro bundler config for React Native/Expo; defines how files are resolved, how CSS (or Uniwind/Tailwind) is handled, and custom transforms.
  • package-lock.json – Auto‑generated npm lockfile locking exact versions of all dependencies.
  • package.json – Lists dependencies, scripts, and metadata for your project (e.g., build/start commands).
  • tsconfig.json – TypeScript compiler settings (module resolution, strictness, paths).
  • uniwind‑types.d.ts – TypeScript declaration file generated by Uniwind/Tailwind tooling to provide typings for your CSS classes and theme variables.