React Native Monorepo Template

A clean, minimal template for building cross-platform applications with shared UI components powered by gluestack-v3. It is based on the fantastic react-native starter template: https://github.com/gurselcakar/universal-react-monorepo.git

📋 Current Versions & Updates

Note: This template currently uses:

• Tailwind CSS v3 - Utility-first CSS framework
• NativeWind v4 - Tailwind CSS for React Native
• Expo SDK 54 - React Native development platform
• gluestack-v3 - Crossplatform, Copy & Paste Shadcn style like UI primitives library

🚀 Features

• 🔄 Cross-Platform: Share components between web and mobile
• 📦 Monorepo: Turborepo with pnpm workspaces
• 🎨 Consistent Styling: Using gluestack-v3 components with NativeWind (Tailwind for React Native)
• ⚡ Fast Development: Hot reload on all platforms
• 📱 Modern Stack: Next.js 15, Expo, React 19, TypeScript
• 🏗️ Clean Architecture: Minimal, extensible, production-ready

📸 Demo

Cross-platform development: iOS Simulator, Android Emulator, and Web Browser running simultaneously with hot reload.

🛠️ Tech Stack

Technology	Purpose	Version
Turborepo	Monorepo build system	Latest
Next.js	React framework for web	15.x
Expo	React Native platform	54.x
React	UI library	19.0
NativeWind	Cross-platform styling	4.x
gluestack-v3	Cross-platform UI primitives	3.x
TypeScript	Type safety	5.x
pnpm	Package manager	10.x

📁 Project Structure

react-native-starter/
├── apps/
│   ├── mobile/          # Expo React Native app
│   └── web/             # Next.js web app
├── packages/
│   └── ui/              # Shared component library based on gluestack-v3
├── CLAUDE.md            # AI assistant guidance
├── turbo.json           # Turborepo configuration
└── package.json         # Root dependencies & scripts

🚦 Quick Start

Prerequisites

• Node.js 18+
• pnpm 10+
• iOS Simulator (for iOS development)
• Android Studio (for Android development)

Installation

# Clone the repository
git clone https://github.com/xLucaH/react-native-starter.git
cd react-native-starter

# Install dependencies
pnpm install

Development

# Start all apps (web + mobile)
pnpm dev

# Start individual apps
pnpm --filter web dev      # Next.js web app
pnpm --filter mobile dev   # Expo mobile app

Platform-Specific Commands

# Mobile development
cd apps/mobile
pnpm ios       # iOS simulator
pnpm android   # Android emulator
pnpm web       # Web browser

# Web development
cd apps/web
pnpm dev       # Development server
pnpm build     # Production build
pnpm start     # Production server

🏗️ Architecture

Cross-Platform Components

Components in packages/ui/ use gluestack-v3 with NativeWind styling:

// Shared Button component with tailwind-variants
import { Button, ButtonText } from 'ui';

export function MyComponent() {
  return (
    <Button>
      <ButtonText>This is a Button</ButtonText>
    </Button>
  );
}

Mobile Native

Expo renders components natively on iOS/Android with identical styling and behavior.

🎨 Styling System

NativeWind enables Tailwind CSS classes on React Native components:

<View className="flex-1 bg-gray-50 p-4">
  <Text className="text-2xl font-bold text-gray-900 mb-4">
    Styled with Tailwind
  </Text>
</View>

📋 Available Scripts

Command	Description
pnpm dev	Start all apps in development
pnpm build	Build all apps for production
pnpm lint	Lint all workspaces
pnpm check-types	TypeScript type checking

🚀 Deployment

Web App (Vercel)

cd apps/web
pnpm build
# Deploy to your preferred platform

Mobile App

cd apps/mobile
# iOS
eas build --platform ios

# Android  
eas build --platform android

📚 Documentation

Core Technologies

• Next.js - React framework with App Router
• Expo - React Native development platform
• Turborepo - High-performance build system
• React Native - Cross-platform mobile development
• TypeScript - Type-safe JavaScript

Styling & UI

• Tailwind CSS v3 - Utility-first CSS framework
• NativeWind - Tailwind CSS for React Native
• gluestack - Cross-Platform Copy-paste UI components library
• React Native Web - RN components for web

Development Tools

• pnpm - Fast, disk space efficient package manager
• Expo Router - File-based routing for React Native
• EAS Build - Cloud build service for React Native

Deployment

• Vercel - Web app deployment platform
• EAS Submit - App store submission service

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

📄 License

This project is licensed under the MIT License.

🔗 Links

• ⭐ Star on GitHub
• 📝 Original Template

---

Built with Turborepo • Next.js • Expo • NativeWind • gluestack