📱 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

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

Clone the template

git clone https://github.com/yourusername/expo-starter-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

🔍 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

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
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 ⬆️

Name		Name	Last commit message	Last commit date
Latest commit History 14 Commits
.expo		.expo
.github/ISSUE_TEMPLATE		.github/ISSUE_TEMPLATE
.vscode		.vscode
app		app
assets		assets
components		components
config		config
constants		constants
hooks		hooks
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
QUICK_START.md		QUICK_START.md
README.md		README.md
UI_COMPONENTS_GUIDE.md		UI_COMPONENTS_GUIDE.md
VERSION		VERSION
VERSIONING.md		VERSIONING.md
app.json		app.json
babel.config.js		babel.config.js
eslint.config.js		eslint.config.js
global.css		global.css
metro.config.js		metro.config.js
nativewind-env.d.ts		nativewind-env.d.ts
package-lock.json		package-lock.json
package.json		package.json
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

License

chvvkrishnakumar/expo-nativewind-template

Folders and files

Latest commit

History

Repository files navigation