Skip to content

Consensu-al/expo-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

10 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Consensual Expo Template

A modern Expo template with a robust stack for building React Native applications using best practices and high-performance libraries.

Features

  • 🧰 Expo Router - File-based routing with nested tabs and drawer navigation
  • πŸ”„ Zustand - Simple, fast state management
  • βœ… Zod - TypeScript-first schema validation
  • πŸ” Expo Secure Store - Secure local storage
  • 🎨 React Native Paper - Material Design components and icons
  • πŸ’Ύ Drizzle ORM - SQLite database with type-safe queries
  • ⚑ @shopify/flash-list - High-performance lists
  • 🧩 @paralleldrive/cuid2 - Collision-resistant IDs
  • πŸ” Biome - Fast linting and formatting
  • πŸ“„ Markdown Rendering - Build-time markdown to component conversion
  • 🌐 Environment Variables - Runtime configuration with Expo's EXPO_PUBLIC_ system

Installation

bunx create-expo-app --template consensual-expo-template

Getting Started

  1. Install dependencies

    cd your-app-name
    bun install
  2. Set up environment variables

    cp .env.example .env

    Then edit .env with your own values.

  3. Start the app

    bun run start
  4. Open on your preferred platform

    # iOS
    bun run ios
    
    # Android
    bun run android
    
    # Web
    bun run web

Project Structure

your-app/
β”œβ”€β”€ app/                  # Main application code (Expo Router)
β”‚   β”œβ”€β”€ (tabs)/           # Bottom tab navigator screens
β”‚   β”‚   β”œβ”€β”€ index.tsx     # Home screen
β”‚   β”‚   └── explore.tsx   # Explore screen
β”‚   β”œβ”€β”€ about/            # About screen (accessible via drawer)
β”‚   β”œβ”€β”€ examples/         # Example screens
β”‚   β”œβ”€β”€ settings/         # Settings screen (accessible via drawer)
β”‚   └── _layout.tsx       # Root layout with drawer navigator
β”œβ”€β”€ assets/               # Static assets
β”‚   β”œβ”€β”€ fonts/            # Custom fonts
β”‚   β”œβ”€β”€ images/           # App icons and images
β”‚   β”œβ”€β”€ markdown/         # Markdown content files
β”‚   └── generated/        # Auto-generated content
β”œβ”€β”€ components/           # Reusable components
β”‚   β”œβ”€β”€ examples/         # Example components
β”‚   β”œβ”€β”€ forms/            # Form components
β”‚   └── ui/               # UI components
β”œβ”€β”€ constants/            # App constants
β”œβ”€β”€ contexts/             # React contexts
β”œβ”€β”€ db/                   # Database configuration
β”‚   β”œβ”€β”€ migrations/       # Database migrations
β”‚   └── schema.ts         # Database schema
β”œβ”€β”€ hooks/                # Custom React hooks
β”œβ”€β”€ lib/                  # Utility functions
β”œβ”€β”€ schemas/              # Zod validation schemas 
β”œβ”€β”€ scripts/              # Build and utility scripts
β”œβ”€β”€ stores/               # Zustand stores
β”œβ”€β”€ .env.example          # Example environment variables
β”œβ”€β”€ .env                  # Your environment variables (gitignored)
└── CLAUDE.md             # AI Assistant guidelines

Included Features

  • Drawer Navigation - Main navigation with hamburger menu
  • Tab Navigation - Bottom tabs for main app sections
  • Dark Mode Support - Automatic theme detection with React Native Paper
  • State Management - Zustand for global state
  • Form Validation - Zod for schema validation
  • Optimized Lists - FlashList for better performance
  • Database Support - SQLite persistence with Drizzle ORM
  • Environment Variables - Runtime configuration using Expo's public vars
  • Feature Flags - Toggle features via environment variables
  • Markdown Rendering - Convert markdown files to React Native components

Development Commands

# Start development server
bun run start

# Run on iOS
bun run ios

# Run on Android
bun run android

# Run on Web
bun run web

# Run linting
bun run lint

# Run formatting
bun run format

# Run tests
bun run test

# Generate markdown components
bun run generate-content

Markdown Rendering

The template includes a build-time markdown-to-component conversion system that allows you to:

  • Convert markdown files to React Native components
  • Display rich formatted content with proper styling
  • Support for code blocks with syntax highlighting
  • Proper theme support for both light and dark mode
  • Tables, lists, links, and other markdown elements

Markdown files are processed during build time, which means:

  1. No runtime parsing overhead
  2. Type-safe components
  3. Optimized for performance

To add a new markdown file to be converted:

  1. Add your markdown file to /assets/markdown/
  2. Update the MARKDOWN_SOURCES array in /scripts/generate-markdown-components.js
  3. Run bun run generate-content

The generated components can be imported and used with theme support:

import { ReadmeContent } from '@/assets/generated/ReadmeContent';
// or import { ExampleMarkdownContent } from '@/assets/generated/ExampleMarkdownContent';

function MyScreen() {
  const theme = useTheme();
  return <ReadmeContent theme={theme} />;
}

Environment Configuration

The template uses environment variables for configuration, which are loaded from a .env file. This allows you to:

  • Keep sensitive data out of your codebase
  • Customize the app for different environments (dev, staging, production)
  • Easily switch between different configurations

Available Environment Variables

The template uses two types of environment variables:

  1. Build-time variables - Used during app building only
  2. Runtime variables - Accessible in your app code (prefixed with EXPO_PUBLIC_)

Build-time Variables

Variable Description Default
EXPO_APP_NAME The display name of your app Consensual Expo App
EXPO_APP_SLUG The unique slug for your app on Expo consensual-template
EXPO_APP_VERSION The version of your app 1.0.0
EXPO_APP_OWNER Your Expo account name anonymous
EXPO_PROJECT_ID Your Expo project ID your-project-id
EXPO_UPDATES_URL URL for Expo updates https://u.expo.dev/your-project-id
ANDROID_PACKAGE_NAME Android package name com.consensual.template
URL_SCHEME URL scheme for deep linking consensual

Runtime Variables (Client-accessible)

Variable Description Default
EXPO_PUBLIC_API_URL API base URL https://api.example.com
EXPO_PUBLIC_DB_NAME Database file name app.db
EXPO_PUBLIC_ENABLE_ANALYTICS Enable analytics false
EXPO_PUBLIC_ENABLE_CRASH_REPORTING Enable crash reporting false
EXPO_PUBLIC_LOG_LEVEL Logging level (debug, info, warn, error) debug (dev) or info (prod)
EXPO_PUBLIC_ENVIRONMENT Current environment development or production

Accessing Environment Variables in Code

Environment variables can be accessed in your app using the Env constant:

import { Env } from '@/constants/Env';

// App information
console.log(Env.app.name);      // App name
console.log(Env.app.version);   // App version
console.log(Env.isDevelopment); // Whether running in dev mode

// Configuration
console.log(Env.api.baseUrl);   // API URL
console.log(Env.db.name);       // Database name
console.log(Env.environment);   // Current environment

// Feature flags
console.log(Env.features.enableAnalytics);      // Analytics enabled
console.log(Env.features.enableCrashReporting); // Crash reporting enabled

// Logger configuration
console.log(Env.logger.level);  // Log level

Environment Files

The template supports different environment files:

.env                # Default environment, used in all builds
.env.local          # Local overrides (not committed to git)
.env.development    # Development environment
.env.production     # Production environment

Environment-specific files take precedence over the default .env file when the corresponding environment is active.

Example Screens

The template includes several example screens to help you get started:

  • Database Example - CRUD operations with Drizzle ORM and SQLite
  • Validation Example - Form validation using Zod schemas
  • Zustand Example - State management with persistence
  • Markdown Example - Rendering markdown content with theme support

These examples demonstrate best practices for common tasks in React Native apps. They can be accessed from the Examples section in the app.

Learn More

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published