React Native Expo SQLite Starter Template

A production-ready React Native Expo starter template with SQLite database integration, featuring a modern tech stack with local-first data persistence, state management, testing, and code quality tools pre-configured.

Screenshots

Features

• Expo SDK 54 - Latest Expo framework with React 19
• Expo Router - File-based routing for native navigation
• TypeScript - Type-safe development
• NativeWind (Tailwind CSS) - Utility-first styling for React Native
• Drizzle ORM - Type-safe database toolkit with SQLite
• Zustand - Lightweight state management
• React Query - Powerful data fetching and caching
• Gorhom Bottom Sheet - Performant bottom sheet component
• Jest & Testing Library - Comprehensive testing setup
• ESLint & Prettier - Code quality and formatting
• Husky & lint-staged - Pre-commit hooks for code quality
• Drizzle Studio - Database visualization and management

Tech Stack

Core

• Expo - React Native development platform
• React Native - Mobile framework
• TypeScript - Type safety

Navigation & UI

• Expo Router - File-based routing
• NativeWind - Tailwind CSS for React Native
• Gorhom Bottom Sheet - Performant bottom sheet modals
• React Native Reanimated - Smooth animations
• React Native Gesture Handler - Touch gestures
• React Native Safe Area Context - Safe area handling

Database

• Drizzle ORM - Type-safe ORM
• Expo SQLite - Local database
• Drizzle Kit - Database migrations

State Management

• Zustand - State management
• React Query - Server state management

Testing

• Jest - Testing framework
• Testing Library - React Native testing utilities

Code Quality

• ESLint - Linting with Expo config
• Prettier - Code formatting
• Husky - Git hooks
• lint-staged - Run linters on staged files

Prerequisites

• Node.js (LTS version recommended)
• npm or yarn
• Expo CLI
• For iOS: macOS with Xcode
• For Android: Android Studio with SDK

Getting Started

1. Clone or Use This Template

# Clone the repository
git clone <your-repo-url>
cd expo-sqlite-starter

# Or use as GitHub template
# Click "Use this template" button on GitHub

2. Install Dependencies

npm install

3. Configure Your Project

Update app.json and package.json with your project details.

4. Database Setup

Generate your first migration after modifying db/schema.ts with npm run db:generate. The database will automatically migrate when the app starts. You can also view and manage your database with npm run db:studio.

5. Start Development

# Start Expo dev server
npm start

# Run on specific platform
npm run android
npm run ios
npm run web

Project Structure

expo-sqlite-starter/
├── app/                    # Expo Router pages
│   ├── index.tsx          # Home screen
│   └── _layout.tsx        # Root layout with providers
├── db/                     # Database configuration
│   ├── client.ts          # Drizzle client setup
│   └── schema.ts          # Database schema definitions
├── drizzle/               # Database migrations (auto-generated)
├── store/                 # Zustand stores
│   └── useExampleStore.ts # Example store
├── hooks/                 # Custom React hooks
│   └── useMulti.ts        # Zustand multi-selector hook
├── providers/             # React context providers
│   └── QueryProvider.tsx  # React Query provider
├── utils/                 # Utility functions
└── assets/                # Images, fonts, etc.

Available Scripts

Development

• npm start - Start Expo development server
• npm run android - Run on Android emulator/device
• npm run ios - Run on iOS simulator/device
• npm run web - Run in web browser

Database

• npm run db:generate - Generate migrations from schema changes
• npm run db:migrate - Apply migrations to database
• npm run db:studio - Open Drizzle Studio GUI

Testing

• npm test - Run tests once
• npm run test:watch - Run tests in watch mode
• npm run test:coverage - Generate coverage report

Code Quality

• npm run lint - Run ESLint

Database Management

Define your schema in db/schema.ts, generate migrations with npm run db:generate, and use the database via the db client from db/client.ts.

State Management

Create Zustand stores in the store/ directory and use React Query for server state management. See the official documentation for usage examples.

Styling with NativeWind

Use Tailwind CSS classes directly in your components via the className prop. Configure Tailwind in tailwind.config.js.

Testing

Run tests with npm test. Jest and Testing Library are pre-configured for React Native testing.

Code Quality

Husky runs lint-staged before each commit to ensure code quality. ESLint is configured with Expo recommended rules and Prettier integration.

Deployment

Build for production using npx expo run:android --variant release or npx expo run:ios --configuration Release. For cloud builds, use EAS Build (recommended).

Customization

Remove unused features by uninstalling packages and deleting their directories. Add new screens in the app/ directory using file-based routing.

Troubleshooting

Clear caches with npx expo start -c. For persistent issues, reinstall dependencies with rm -rf node_modules package-lock.json && npm install.

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

License

MIT License - feel free to use this starter kit for your projects.

Resources

• Expo Documentation
• React Native Documentation
• Drizzle ORM Documentation
• NativeWind Documentation
• Zustand Documentation
• React Query Documentation

Support

For issues and questions:

• Open an issue on GitHub
• Check existing documentation
• Join the Expo community on Discord

---

Built with ❤️ using Expo and React Native