Topics

#cross-platform #expo #expo-react-template #expo-reactnative #expo-router #expo-starter #expo-template #mobile-app #mobile-development #native-ui-component #nativewind #react-native #starter-template #starter-template-expo #tailwind #tailwindcss #template #typescript #ui-components

Language breakdown

TypeScript 97.6%

JavaScript 1.5%

CSS 0.9%

▸ Files click to expand

README

📱 Expo NativeWind Template

🚀 Production-Ready Expo Starter Kit - Mobile app template with 20+ pre-built UI components, TypeScript, NativeWind (Tailwind CSS), and platform-specific behaviors for iOS/Android.

20+ Pre-built UI Components • TypeScript • NativeWind • Expo Router • Dark Mode

🎯 Why This Template?

Stop building UI components from scratch! This Expo starter template comes with:

✅ 20+ Pre-built Components - Buttons, Cards, Dialogs, Bottom Sheets, and more
✅ Platform-Specific UI - Automatic iOS/Android adaptations
✅ Dark Mode Ready - System-aware theme switching
✅ Permission Management - Unified API for all device permissions
✅ TypeScript First - Full type safety out of the box
✅ Production Ready - Best practices and scalable architecture

🌟 Perfect For

📱 Mobile App MVPs - Launch faster with pre-built components
🏢 Enterprise Apps - Scalable architecture and TypeScript safety
🎨 Design Systems - Consistent UI across iOS and Android
🚀 Startups - Focus on your business logic, not UI implementation

🚀 Core Features

🎨 Complete UI Component Library - 20+ pre-built components with iOS/Android platform-specific behaviors
🎯 TypeScript - Full type safety and IntelliSense support
💨 NativeWind - Tailwind CSS for React Native with dark mode support
📍 Expo Router - File-based routing with typed navigation
🔒 Permission Management - Unified permission handling for camera, location, notifications, etc.
📱 Platform-Specific Components - Automatic iOS/Android adaptations
🌙 Dark Mode - Built-in theme support with automatic system detection
♿ Accessibility - WCAG compliant components with proper ARIA labels

📦 What's Included

UI Components

Layout: SafeAreaView, ScrollView, KeyboardAvoidingView
Typography: Text with variants (h1-h6, p, lead, muted, code)
Buttons: Multiple variants (primary, secondary, destructive, outline, ghost, link)
Forms: Input, Label, Switch, Checkbox
Feedback: Dialog, Sheet (Bottom Sheet), Drawer
Display: Card, Badge
Navigation: Hamburger Menu, Tab Navigation
Utilities: Permission Requester, Theme Provider

Demo Screens

UI Showcase (/app/(tabs)/index.tsx) - Interactive component gallery
Menu Demo (/app/(tabs)/menu-demo.tsx) - Hamburger menu implementation
Permissions Demo (/app/(tabs)/permissions-demo.tsx) - Permission management UI

🏗️ Project Structure

├── app/                    # 📱 Expo Router screens
│   ├── (tabs)/            # 📊 Tab navigation
│   │   ├── index.tsx      # Component showcase
│   │   ├── menu-demo.tsx  # Menu examples
│   │   └── permissions-demo.tsx # Permission examples
│   └── _layout.tsx        # 🎨 Root layout
├── components/            
│   ├── ui/                # 🎨 UI component library (20+ components)
│   └── error-boundary/    # Error handling components
├── hooks/                 # 🪝 Custom React hooks
├── constants/             # 📌 App constants & colors
├── config/                # ⚙️ App configuration
├── assets/                # 🖼️ Images, fonts, etc.

⚠️ Important Notes

Expo Go Limitations

Some features require a development build instead of Expo Go:

Push Notifications - Requires development build (SDK 56+)
Camera - May have limited functionality
Other native modules - Some features work better in dev builds

To create a development build:

npx eas build --profile development --platform ios
npx eas build --profile development --platform android

🛠️ Getting Started

Prerequisites

Node.js 18+ and npm/yarn
iOS Simulator (Mac only) or Android Studio
Expo Go app on your physical device (optional)

Installation

Clone the template

git clone https://github.com/chvvkrishnakumar/expo-nativewind-template.git my-app
   cd my-app

Install dependencies

npm install
   # or
   yarn install

Start the development server

npx expo start

Run on your device

- Press i for iOS simulator - Press a for Android emulator - Scan QR code with Expo Go app

📁 Project Structure

expo-nativewind-template/
├── app/                    # App routes (Expo Router)
│   ├── (tabs)/            # Tab navigation screens
│   │   ├── _layout.tsx    # Tab layout configuration
│   │   ├── index.tsx      # UI component showcase
│   │   ├── menu-demo.tsx  # Hamburger menu demo
│   │   └── permissions-demo.tsx # Permissions demo
│   ├── _layout.tsx        # Root layout with providers
│   └── +not-found.tsx     # 404 screen
├── components/            
│   └── ui/                # UI component library
│       ├── button.tsx     
│       ├── card.tsx
│       ├── dialog.tsx
│       ├── sheet.tsx
│       ├── theme.tsx      # Theme provider
│       └── ...            # Other components
├── assets/                # Images, fonts, etc.
├── hooks/                 # Custom React hooks
├── constants/             # App constants
└── package.json

🎨 Using Components

Basic Example

import { Button, Text, Card, SafeAreaView } from '@/components/ui';
export default function MyScreen() {   return (     <SafeAreaView className="flex-1 p-4">       <Card>         <Text variant="h2">Welcome!</Text>         <Button onPress={() => console.log('Pressed')}>           <Text>Get Started</Text>         </Button>       </Card>     </SafeAreaView>   ); }

Platform-Specific Components

Components automatically adapt to the platform:

// Button uses TouchableOpacity on iOS, Pressable with ripple on Android
<Button onPress={handlePress}>
  <Text>Platform Adaptive Button</Text>
</Button>
// Dialog animations differ by platform <Dialog open={open} onOpenChange={setOpen}>   <DialogContent>     {/ iOS: slide animation, Android: fade animation /}   </DialogContent> </Dialog>

Permission Handling

import { PermissionRequester, useCameraPermissions } from '@/components/ui';
// Using the component <PermissionRequester permission="location">   {({ status, requestPermission }) => (     <Button onPress={requestPermission}>       <Text>{status === 'granted' ? 'Access Granted' : 'Request Access'}</Text>     </Button>   )} </PermissionRequester>
// Using the hook for camera (special case) const [permission, requestPermission] = useCameraPermissions();

🎨 Styling with NativeWind

This template uses NativeWind (Tailwind for React Native):

// Using className for styling
<View className="flex-1 bg-background p-4">
  <Text className="text-lg font-bold text-primary">Hello World</Text>
  <Button className="mt-4" variant="secondary">
    <Text>Click me</Text>
  </Button>
</View>
// Dark mode is automatic <Text className="text-foreground">Adapts to dark/light mode</Text>

🔧 Customization

Theme Colors

Edit global.css to customize your theme:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    / ... other colors /
  }
  
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    / ... dark mode colors /
  }
}

Adding New Components

Create component in /components/ui/
Export from /components/ui/index.ts
Follow existing patterns for platform-specific behavior

📱 Platform-Specific Files

For platform-specific implementations:

components/ui/
├── button.tsx          # Shared logic
├── button.ios.tsx      # iOS specific (optional)
└── button.android.tsx  # Android specific (optional)

🚀 Building for Production

Development Build

# iOS
eas build --platform ios --profile development
Android  
eas build --platform android --profile development

Production Build

# iOS
eas build --platform ios --profile production
Android
eas build --platform android --profile production

📚 Tech Stack & Resources

Core Libraries

| Library | Version | Description | Documentation | |---------|---------|-------------|--------------| | Expo SDK | ~53.0.0 | React Native framework | Docs | | React Native | 0.74.5 | Mobile framework | Docs | | TypeScript | ^5.3.3 | Type safety | Docs | | Expo Router | ~3.5.23 | File-based routing | Docs | | NativeWind | ^4.0.0 | Tailwind for RN | Docs |

UI Libraries

| Library | Purpose | Documentation | |---------|---------|---------------| | @gorhom/bottom-sheet | Bottom sheets | Docs | | react-native-gesture-handler | Gesture handling | Docs | | react-native-reanimated | Animations | Docs | | lucide-react-native | Icon library | Icons | | class-variance-authority | Component variants | Docs |

Permission Libraries

| Library | Purpose | Documentation | |---------|---------|---------------| | expo-camera | Camera access | API | | expo-location | Location services | API | | expo-media-library | Photo library | API | | expo-notifications | Push notifications | API | | expo-contacts | Contacts access | API |

🤔 Frequently Asked Questions

Can I use this template for commercial projects?

Yes! This template is MIT licensed, meaning you can use it for commercial projects, modify it, and distribute it.

How do I add custom colors to the theme?

Edit the global.css file and add your custom colors to the :root and .dark selectors. NativeWind will automatically generate the utility classes.

Do the components support iPad/tablets?

Yes, the components are responsive and work on tablets. You may want to adjust some layouts for larger screens using responsive utilities.

Can I use this with React Native CLI instead of Expo?

While this template is optimized for Expo, most components will work with React Native CLI. You'll need to replace Expo-specific packages with their React Native equivalents.

🌟 Show Your Support

If this template helps you build your app faster, please consider:

⭐ Starring the repository
🐦 Sharing it on Twitter
💬 Leaving feedback in Issues
🤝 Contributing improvements

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.