📱 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.

🎯 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

1. UI Showcase (/app/(tabs)/index.tsx) - Interactive component gallery
2. Menu Demo (/app/(tabs)/menu-demo.tsx) - Hamburger menu implementation
3. 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 53+) - 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

1. Clone the template bash git clone https://github.com/yourusername/expo-starter-template.git my-app cd my-app

2. Install dependencies bash npm install # or yarn install

3. Start the development server bash npx expo start

4. Run on your device

5. Press i for iOS simulator
6. Press a for Android emulator
7. 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

1. Create component in /components/ui/
2. Export from /components/ui/index.ts
3. 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

UI Libraries

Permission Libraries

🔍 SEO Keywords

expo starter template, expo ui components, react native starter kit, expo typescript template, react native ui kit, expo tailwind template, nativewind starter, expo component library, react native boilerplate, expo production template, mobile app starter, cross-platform ui components

🤔 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.

Contributing Guidelines

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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🏷️ Version

Current version: 0.1.0 - See CHANGELOG.md for version history.

🙏 Acknowledgments

• Expo Team for the amazing framework
• NativeWind Team for bringing Tailwind to React Native
• Gorhom for the bottom sheet library
• Software Mansion for gesture handler and reanimated
• All contributors who help improve this template

Built with ❤️ for the React Native community

_{If you found this helpful, please ⭐ the repository!}

Back to top ⬆️