Create Expo Applab Template

A customizable Expo template with NativeWind (Tailwind CSS) and TypeScript that can be used to quickly bootstrap new React Native projects.

🚀 Quick Start

Create a new Expo app using this template:

npx create-expo-adelowomi-template my-app
cd my-app
npm install
npm start

🌟 What's Included

• Expo Router - File-based routing for React Native
• TypeScript - Type safety and better developer experience
• NativeWind - Tailwind CSS for React Native styling
• Atomic Design - Well-organized component structure (atoms, molecules, organisms)
• Context API - Built-in state management examples
• Custom Hooks - Reusable logic patterns
• SQLite Database - Local data persistence
• Notifications - Push notification setup
• Network Detection - Connection status monitoring
• Theme Support - Dark/light mode switching

📂 Template Structure

your-app/
├── src/
│   ├── app/
│   │   ├── components/
│   │   │   ├── atoms/          # Basic UI elements
│   │   │   ├── molecules/      # Combined atoms
│   │   │   ├── organisms/      # Complex components
│   │   │   └── primitives/     # Special components
│   │   ├── contexts/           # Global state
│   │   ├── hooks/              # Custom hooks
│   │   ├── screens/            # Screen components
│   │   └── types/              # TypeScript types
│   └── types/                  # Additional types
├── scripts/                    # Build scripts
└── Configuration files...

🔑 Key Features

Context Annotations

The template includes a unique context annotation system for better documentation:

// @context: isConnected - boolean - true if device is connected to internet
// @context: connectionType - string - type of connection (wifi, cellular, etc.)
const NetworkContext = createContext<NetworkContextType>({...});

Automatic Metadata Generation

Context metadata is automatically generated from annotations:

npm start  # Automatically generates context metadata

Component Architecture

• Atoms: Basic UI elements (buttons, inputs, text)
• Molecules: Simple combinations of atoms
• Organisms: Complex, reusable components
• Primitives: Special-purpose components

📦 Available Scripts

After creating your project:

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

🛠 Development

Prerequisites

• Node.js 16+
• npm or yarn
• Expo CLI
• iOS Simulator (for iOS development)
• Android Studio (for Android development)

Getting Started with Development

1. Create a new project: npx create-expo-adelowomi-template my-app
2. Navigate to project: cd my-app
3. Install dependencies: npm install
4. Start development server: npm start
5. Open in Expo Go app or simulator

🎨 Customization

Styling

The template uses NativeWind (Tailwind CSS for React Native). Customize styles in:

• tailwind.config.js - Tailwind configuration
• src/global.css - Global styles
• Component files - Inline Tailwind classes

Themes

Built-in theme switching is available through the ThemeContext:

const { isDarkMode, toggleTheme } = useContext(ThemeContext);

Database

SQLite database setup is included with examples in:

• src/app/database/database.ts - Database configuration
• src/app/hooks/useDatabase.ts - Database hooks

📱 Platform Support

• ✅ iOS
• ✅ Android
• ✅ Web (limited)

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - see the LICENSE file for details.

🌈 Attribution & Disclaimer

This template is packaged by Adelowomi based on the APP labs GitHub repository. Adelowomi does not claim to own any of the code in this template. All original code and concepts are credited to APP labs and their contributors.

This template is created and maintained by APP labs, committed to providing high-quality, open-source tools for mobile app development.

Publishing to NPM

To publish this template to npm:

1. Update version in package.json
2. Build and test the template
3. Run npm publish

Users can then create projects with:

npx create-expo-adelowomi-template my-new-app