{"id":31358234,"url":"https://github.com/chvvkrishnakumar/expo-nativewind-template","last_synced_at":"2026-04-28T12:06:58.292Z","repository":{"id":316039034,"uuid":"1061697883","full_name":"chvvkrishnakumar/expo-nativewind-template","owner":"chvvkrishnakumar","description":" Expo React Native TypeScript template with NativeWind (TailwindCSS) - Production-ready starter kit featuring pre-styled UI components, dark mode,   Expo Router navigation, and cross-platform iOS/Android support. Best Expo template 2025.","archived":false,"fork":false,"pushed_at":"2025-09-22T10:41:35.000Z","size":289,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-22T11:24:48.293Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chvvkrishnakumar.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-22T09:08:22.000Z","updated_at":"2025-09-22T10:41:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"26c5b737-d222-4a4e-a2a1-5b163837e41c","html_url":"https://github.com/chvvkrishnakumar/expo-nativewind-template","commit_stats":null,"previous_names":["chvvkrishnakumar/expo-nativewind-template"],"tags_count":1,"template":true,"template_full_name":null,"purl":"pkg:github/chvvkrishnakumar/expo-nativewind-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chvvkrishnakumar%2Fexpo-nativewind-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chvvkrishnakumar%2Fexpo-nativewind-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chvvkrishnakumar%2Fexpo-nativewind-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chvvkrishnakumar%2Fexpo-nativewind-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chvvkrishnakumar","download_url":"https://codeload.github.com/chvvkrishnakumar/expo-nativewind-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chvvkrishnakumar%2Fexpo-nativewind-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277149964,"owners_count":25769492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-26T02:00:09.010Z","response_time":78,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-09-26T21:43:20.144Z","updated_at":"2025-09-26T21:43:24.338Z","avatar_url":"https://github.com/chvvkrishnakumar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 📱 Expo NativeWind Template\n\n\u003e 🚀 **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.\n\n[![Version](https://img.shields.io/badge/version-0.1.0-blue.svg)](https://github.com/chvvkrishnakumar/expo-nativewind-template/releases)\n[![Expo](https://img.shields.io/badge/Expo-SDK_53-000.svg?style=flat\u0026logo=expo)](https://expo.dev)\n[![React Native](https://img.shields.io/badge/React%20Native-0.79.6-61DAFB.svg?style=flat\u0026logo=react)](https://reactnative.dev)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.3.3-blue.svg?style=flat\u0026logo=typescript)](https://www.typescriptlang.org)\n[![NativeWind](https://img.shields.io/badge/NativeWind-v4-38B2AC.svg?style=flat)](https://www.nativewind.dev)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://your-demo-gif.gif\" alt=\"Demo\" width=\"300\" /\u003e\n\u003c/p\u003e\n\n## 🎯 Why This Template?\n\nStop building UI components from scratch! This Expo starter template comes with:\n\n- ✅ **20+ Pre-built Components** - Buttons, Cards, Dialogs, Bottom Sheets, and more\n- ✅ **Platform-Specific UI** - Automatic iOS/Android adaptations\n- ✅ **Dark Mode Ready** - System-aware theme switching\n- ✅ **Permission Management** - Unified API for all device permissions\n- ✅ **TypeScript First** - Full type safety out of the box\n- ✅ **Production Ready** - Best practices and scalable architecture\n\n## 🌟 Perfect For\n\n- 📱 **Mobile App MVPs** - Launch faster with pre-built components\n- 🏢 **Enterprise Apps** - Scalable architecture and TypeScript safety\n- 🎨 **Design Systems** - Consistent UI across iOS and Android\n- 🚀 **Startups** - Focus on your business logic, not UI implementation\n\n## 🚀 Core Features\n\n- **🎨 Complete UI Component Library** - 20+ pre-built components with iOS/Android platform-specific behaviors\n- **🎯 TypeScript** - Full type safety and IntelliSense support\n- **💨 NativeWind** - Tailwind CSS for React Native with dark mode support\n- **📍 Expo Router** - File-based routing with typed navigation\n- **🔒 Permission Management** - Unified permission handling for camera, location, notifications, etc.\n- **📱 Platform-Specific Components** - Automatic iOS/Android adaptations\n- **🌙 Dark Mode** - Built-in theme support with automatic system detection\n- **♿ Accessibility** - WCAG compliant components with proper ARIA labels\n\n## 📦 What's Included\n\n### UI Components\n\n- **Layout**: SafeAreaView, ScrollView, KeyboardAvoidingView\n- **Typography**: Text with variants (h1-h6, p, lead, muted, code)\n- **Buttons**: Multiple variants (primary, secondary, destructive, outline, ghost, link)\n- **Forms**: Input, Label, Switch, Checkbox\n- **Feedback**: Dialog, Sheet (Bottom Sheet), Drawer\n- **Display**: Card, Badge\n- **Navigation**: Hamburger Menu, Tab Navigation\n- **Utilities**: Permission Requester, Theme Provider\n\n### Demo Screens\n\n1. **UI Showcase** (`/app/(tabs)/index.tsx`) - Interactive component gallery\n2. **Menu Demo** (`/app/(tabs)/menu-demo.tsx`) - Hamburger menu implementation\n3. **Permissions Demo** (`/app/(tabs)/permissions-demo.tsx`) - Permission management UI\n\n## 🏗️ Project Structure\n\n```\n├── app/                    # 📱 Expo Router screens\n│   ├── (tabs)/            # 📊 Tab navigation\n│   │   ├── index.tsx      # Component showcase\n│   │   ├── menu-demo.tsx  # Menu examples\n│   │   └── permissions-demo.tsx # Permission examples\n│   └── _layout.tsx        # 🎨 Root layout\n├── components/            \n│   ├── ui/                # 🎨 UI component library (20+ components)\n│   └── error-boundary/    # Error handling components\n├── hooks/                 # 🪝 Custom React hooks\n├── constants/             # 📌 App constants \u0026 colors\n├── config/                # ⚙️ App configuration\n├── assets/                # 🖼️ Images, fonts, etc.\n```\n\n## ⚠️ Important Notes\n\n### Expo Go Limitations\nSome features require a development build instead of Expo Go:\n- **Push Notifications** - Requires development build (SDK 53+)\n- **Camera** - May have limited functionality\n- **Other native modules** - Some features work better in dev builds\n\nTo create a development build:\n```bash\nnpx eas build --profile development --platform ios\nnpx eas build --profile development --platform android\n```\n\n## 🛠️ Getting Started\n\n### Prerequisites\n\n- Node.js 18+ and npm/yarn\n- iOS Simulator (Mac only) or Android Studio\n- Expo Go app on your physical device (optional)\n\n### Installation\n\n1. **Clone the template**\n   ```bash\n   git clone https://github.com/yourusername/expo-starter-template.git my-app\n   cd my-app\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   # or\n   yarn install\n   ```\n\n3. **Start the development server**\n   ```bash\n   npx expo start\n   ```\n\n4. **Run on your device**\n   - Press `i` for iOS simulator\n   - Press `a` for Android emulator\n   - Scan QR code with Expo Go app\n\n## 📁 Project Structure\n\n```\nexpo-nativewind-template/\n├── app/                    # App routes (Expo Router)\n│   ├── (tabs)/            # Tab navigation screens\n│   │   ├── _layout.tsx    # Tab layout configuration\n│   │   ├── index.tsx      # UI component showcase\n│   │   ├── menu-demo.tsx  # Hamburger menu demo\n│   │   └── permissions-demo.tsx # Permissions demo\n│   ├── _layout.tsx        # Root layout with providers\n│   └── +not-found.tsx     # 404 screen\n├── components/            \n│   └── ui/                # UI component library\n│       ├── button.tsx     \n│       ├── card.tsx\n│       ├── dialog.tsx\n│       ├── sheet.tsx\n│       ├── theme.tsx      # Theme provider\n│       └── ...            # Other components\n├── assets/                # Images, fonts, etc.\n├── hooks/                 # Custom React hooks\n├── constants/             # App constants\n└── package.json\n```\n\n## 🎨 Using Components\n\n### Basic Example\n\n```tsx\nimport { Button, Text, Card, SafeAreaView } from '@/components/ui';\n\nexport default function MyScreen() {\n  return (\n    \u003cSafeAreaView className=\"flex-1 p-4\"\u003e\n      \u003cCard\u003e\n        \u003cText variant=\"h2\"\u003eWelcome!\u003c/Text\u003e\n        \u003cButton onPress={() =\u003e console.log('Pressed')}\u003e\n          \u003cText\u003eGet Started\u003c/Text\u003e\n        \u003c/Button\u003e\n      \u003c/Card\u003e\n    \u003c/SafeAreaView\u003e\n  );\n}\n```\n\n### Platform-Specific Components\n\nComponents automatically adapt to the platform:\n\n```tsx\n// Button uses TouchableOpacity on iOS, Pressable with ripple on Android\n\u003cButton onPress={handlePress}\u003e\n  \u003cText\u003ePlatform Adaptive Button\u003c/Text\u003e\n\u003c/Button\u003e\n\n// Dialog animations differ by platform\n\u003cDialog open={open} onOpenChange={setOpen}\u003e\n  \u003cDialogContent\u003e\n    {/* iOS: slide animation, Android: fade animation */}\n  \u003c/DialogContent\u003e\n\u003c/Dialog\u003e\n```\n\n### Permission Handling\n\n```tsx\nimport { PermissionRequester, useCameraPermissions } from '@/components/ui';\n\n// Using the component\n\u003cPermissionRequester permission=\"location\"\u003e\n  {({ status, requestPermission }) =\u003e (\n    \u003cButton onPress={requestPermission}\u003e\n      \u003cText\u003e{status === 'granted' ? 'Access Granted' : 'Request Access'}\u003c/Text\u003e\n    \u003c/Button\u003e\n  )}\n\u003c/PermissionRequester\u003e\n\n// Using the hook for camera (special case)\nconst [permission, requestPermission] = useCameraPermissions();\n```\n\n## 🎨 Styling with NativeWind\n\nThis template uses NativeWind (Tailwind for React Native):\n\n```tsx\n// Using className for styling\n\u003cView className=\"flex-1 bg-background p-4\"\u003e\n  \u003cText className=\"text-lg font-bold text-primary\"\u003eHello World\u003c/Text\u003e\n  \u003cButton className=\"mt-4\" variant=\"secondary\"\u003e\n    \u003cText\u003eClick me\u003c/Text\u003e\n  \u003c/Button\u003e\n\u003c/View\u003e\n\n// Dark mode is automatic\n\u003cText className=\"text-foreground\"\u003eAdapts to dark/light mode\u003c/Text\u003e\n```\n\n## 🔧 Customization\n\n### Theme Colors\n\nEdit `global.css` to customize your theme:\n\n```css\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n    --primary: 221.2 83.2% 53.3%;\n    /* ... other colors */\n  }\n  \n  .dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n    /* ... dark mode colors */\n  }\n}\n```\n\n### Adding New Components\n\n1. Create component in `/components/ui/`\n2. Export from `/components/ui/index.ts`\n3. Follow existing patterns for platform-specific behavior\n\n## 📱 Platform-Specific Files\n\nFor platform-specific implementations:\n\n```\ncomponents/ui/\n├── button.tsx          # Shared logic\n├── button.ios.tsx      # iOS specific (optional)\n└── button.android.tsx  # Android specific (optional)\n```\n\n## 🚀 Building for Production\n\n### Development Build\n```bash\n# iOS\neas build --platform ios --profile development\n\n# Android  \neas build --platform android --profile development\n```\n\n### Production Build\n```bash\n# iOS\neas build --platform ios --profile production\n\n# Android\neas build --platform android --profile production\n```\n\n## 📚 Tech Stack \u0026 Resources\n\n### Core Libraries\n\n| Library | Version | Description | Documentation |\n|---------|---------|-------------|--------------|\n| [Expo SDK](https://expo.dev) | ~53.0.0 | React Native framework | [Docs](https://docs.expo.dev/) |\n| [React Native](https://reactnative.dev) | 0.74.5 | Mobile framework | [Docs](https://reactnative.dev/docs/getting-started) |\n| [TypeScript](https://www.typescriptlang.org) | ^5.3.3 | Type safety | [Docs](https://www.typescriptlang.org/docs/) |\n| [Expo Router](https://expo.github.io/router) | ~3.5.23 | File-based routing | [Docs](https://docs.expo.dev/router/introduction/) |\n| [NativeWind](https://www.nativewind.dev) | ^4.0.0 | Tailwind for RN | [Docs](https://www.nativewind.dev/v4/overview) |\n\n### UI Libraries\n\n| Library | Purpose | Documentation |\n|---------|---------|---------------|\n| [@gorhom/bottom-sheet](https://github.com/gorhom/react-native-bottom-sheet) | Bottom sheets | [Docs](https://gorhom.dev/react-native-bottom-sheet/) |\n| [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) | Gesture handling | [Docs](https://docs.swmansion.com/react-native-gesture-handler/) |\n| [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) | Animations | [Docs](https://docs.swmansion.com/react-native-reanimated/) |\n| [lucide-react-native](https://lucide.dev) | Icon library | [Icons](https://lucide.dev/icons/) |\n| [class-variance-authority](https://cva.style) | Component variants | [Docs](https://cva.style/docs) |\n\n### Permission Libraries\n\n| Library | Purpose | Documentation |\n|---------|---------|---------------|\n| [expo-camera](https://docs.expo.dev/versions/latest/sdk/camera/) | Camera access | [API](https://docs.expo.dev/versions/latest/sdk/camera/) |\n| [expo-location](https://docs.expo.dev/versions/latest/sdk/location/) | Location services | [API](https://docs.expo.dev/versions/latest/sdk/location/) |\n| [expo-media-library](https://docs.expo.dev/versions/latest/sdk/media-library/) | Photo library | [API](https://docs.expo.dev/versions/latest/sdk/media-library/) |\n| [expo-notifications](https://docs.expo.dev/versions/latest/sdk/notifications/) | Push notifications | [API](https://docs.expo.dev/versions/latest/sdk/notifications/) |\n| [expo-contacts](https://docs.expo.dev/versions/latest/sdk/contacts/) | Contacts access | [API](https://docs.expo.dev/versions/latest/sdk/contacts/) |\n\n## 🔍 SEO Keywords\n\n`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`\n\n## 🤔 Frequently Asked Questions\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eCan I use this template for commercial projects?\u003c/b\u003e\u003c/summary\u003e\n\nYes! This template is MIT licensed, meaning you can use it for commercial projects, modify it, and distribute it.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eHow do I add custom colors to the theme?\u003c/b\u003e\u003c/summary\u003e\n\nEdit the `global.css` file and add your custom colors to the `:root` and `.dark` selectors. NativeWind will automatically generate the utility classes.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eDo the components support iPad/tablets?\u003c/b\u003e\u003c/summary\u003e\n\nYes, the components are responsive and work on tablets. You may want to adjust some layouts for larger screens using responsive utilities.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cb\u003eCan I use this with React Native CLI instead of Expo?\u003c/b\u003e\u003c/summary\u003e\n\nWhile 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.\n\u003c/details\u003e\n\n## 🌟 Show Your Support\n\nIf this template helps you build your app faster, please consider:\n\n- ⭐ Starring the repository\n- 🐦 Sharing it on Twitter\n- 💬 Leaving feedback in Issues\n- 🤝 Contributing improvements\n\n## 🤝 Contributing\n\nContributions 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.\n\n### Contributing Guidelines\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🏷️ Version\n\nCurrent version: **0.1.0** - See [CHANGELOG.md](CHANGELOG.md) for version history.\n\n## 🙏 Acknowledgments\n\n- [Expo Team](https://expo.dev) for the amazing framework\n- [NativeWind Team](https://nativewind.dev) for bringing Tailwind to React Native\n- [Gorhom](https://gorhom.dev) for the bottom sheet library\n- [Software Mansion](https://swmansion.com) for gesture handler and reanimated\n- All contributors who help improve this template\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eBuilt with ❤️ for the React Native community\u003c/b\u003e\n  \u003cbr\u003e\n  \u003csub\u003eIf you found this helpful, please ⭐ the repository!\u003c/sub\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#-expo-react-native-starter-template-with-ui-components\"\u003eBack to top ⬆️\u003c/a\u003e\n\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchvvkrishnakumar%2Fexpo-nativewind-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchvvkrishnakumar%2Fexpo-nativewind-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchvvkrishnakumar%2Fexpo-nativewind-template/lists"}