{"id":51383710,"url":"https://github.com/koniz-dev/react-native-starter","last_synced_at":"2026-07-03T18:11:19.754Z","repository":{"id":323710160,"uuid":"1093946470","full_name":"koniz-dev/react-native-starter","owner":"koniz-dev","description":"A clean starter template for React Native with Expo Router, TypeScript, and file-based routing.","archived":false,"fork":false,"pushed_at":"2025-12-04T02:43:09.000Z","size":991,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-07T08:47:41.984Z","etag":null,"topics":["expo","expo-router","mobile-app","react-native","react-native-paper","starter-template","template","typescript"],"latest_commit_sha":null,"homepage":null,"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/koniz-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"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-11-11T03:46:17.000Z","updated_at":"2025-12-04T02:43:13.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/koniz-dev/react-native-starter","commit_stats":null,"previous_names":["koniz-dev/react-native-starter"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/koniz-dev/react-native-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koniz-dev%2Freact-native-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koniz-dev%2Freact-native-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koniz-dev%2Freact-native-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koniz-dev%2Freact-native-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/koniz-dev","download_url":"https://codeload.github.com/koniz-dev/react-native-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koniz-dev%2Freact-native-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35096187,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-03T02:00:05.635Z","response_time":110,"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":["expo","expo-router","mobile-app","react-native","react-native-paper","starter-template","template","typescript"],"created_at":"2026-07-03T18:11:19.256Z","updated_at":"2026-07-03T18:11:19.739Z","avatar_url":"https://github.com/koniz-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Starter\n\nA clean starter template for React Native with Expo Router, TypeScript, and file-based routing.\n\n## Quick Start\n\n```bash\n# Install dependencies\nnpm install\n\n# Start development server\nnpm start\n```\n\nThen press `a` (Android), `i` (iOS), or `w` (web), or scan the QR code with Expo Go.\n\n**📖 For detailed setup instructions, see [Getting Started Guide](docs/getting-started.md)**\n\n## Features\n\nThis starter includes everything you need to build a production-ready React Native app:\n\n- ✅ **React Native Paper** - Material Design 3 components with dark/light mode\n- ✅ **Dark/Light Mode** - Automatic system preference detection\n- ✅ **API Client** - Axios with interceptors for authentication and error handling\n- ✅ **Storage Service** - AsyncStorage wrapper with TypeScript support\n- ✅ **Custom Hooks** - `useFetch` for data fetching with loading/error states\n- ✅ **Error Boundary** - Global error handling component\n- ✅ **Loading States** - Built-in loading screen component\n- ✅ **Authentication Example** - Complete login flow with token management\n- ✅ **TypeScript** - Full type safety throughout\n- ✅ **ESLint + Prettier** - Code quality and formatting tools\n- ✅ **Example Screens** - See features in action\n\n## State Management Options\n\nThis starter template provides multiple state management solutions to choose from. Each option is available as a separate branch with a corresponding pull request for easy review and integration:\n\n### 🔴 Redux Toolkit\n**Branch:** [`state-management/redux`](https://github.com/koniz-dev/react-native-starter/tree/state-management/redux)  \n**Pull Request:** [#2](https://github.com/koniz-dev/react-native-starter/pull/2)\n\nA complete Redux Toolkit implementation with typed hooks, auth slice, and todos slice. Perfect for large-scale applications requiring predictable state management.\n\n**Features:**\n- Redux Toolkit with typed hooks\n- Auth slice for authentication state\n- Todos slice for todo management\n- Full TypeScript support\n\n### 🔵 React Context API\n**Branch:** [`state-management/react-context`](https://github.com/koniz-dev/react-native-starter/tree/state-management/react-context)  \n**Pull Request:** [#3](https://github.com/koniz-dev/react-native-starter/pull/3)\n\nBuilt-in React Context API with `useReducer` for state management. No external dependencies required, perfect for smaller to medium-sized applications.\n\n**Features:**\n- AuthContext and TodosContext\n- useReducer pattern for state updates\n- Zero external dependencies\n- Native React solution\n\n### 🟢 Zustand\n**Branch:** [`state-management/zustand`](https://github.com/koniz-dev/react-native-starter/tree/state-management/zustand)  \n**Pull Request:** [#4](https://github.com/koniz-dev/react-native-starter/pull/4)\n\nLightweight and simple state management library with minimal boilerplate. Great balance between simplicity and power.\n\n**Features:**\n- Minimal boilerplate\n- Simple API\n- Small bundle size\n- Easy to learn\n\n### 🟡 Jotai\n**Branch:** [`state-management/jotai`](https://github.com/koniz-dev/react-native-starter/tree/state-management/jotai)  \n**Pull Request:** [#5](https://github.com/koniz-dev/react-native-starter/pull/5)\n\nAtomic state management with fine-grained reactivity. Excellent for component-level state that needs to be shared across the app.\n\n**Features:**\n- Atomic state composition\n- Fine-grained reactivity\n- Great performance\n- Flexible architecture\n\n### How to Use\n\nTo try out any of these state management solutions:\n\n1. **Checkout the branch:**\n   ```bash\n   git checkout state-management/redux  # or react-context, zustand, jotai\n   ```\n\n2. **Install dependencies:**\n   ```bash\n   npm install\n   ```\n\n3. **Review the Pull Request** to see what changes were made\n\n4. **Merge or cherry-pick** the changes you want into your project\n\nEach branch includes complete implementation examples and updated documentation.\n\n## Getting Started\n\nFor detailed installation and setup instructions, see the [Getting Started Guide](docs/getting-started.md).\n\n**Quick overview:**\n\n1. **Prerequisites:** Node.js v18+, npm/yarn\n2. **Install:** `npm install`\n3. **Run:** `npm start`\n4. **Code:** Start editing `app/(tabs)/index.tsx`\n\n## Navigation\n\nThis project uses **Expo Router** for navigation, which is the recommended approach for Expo projects. Expo Router provides:\n\n- **File-based routing** - Files in the `app` directory automatically become routes\n- **Built on React Navigation** - Full access to React Navigation APIs when needed\n- **Type-safe routes** - Automatic TypeScript support for routes\n- **Deep linking** - Automatic deep linking configuration\n- **Web support** - Static rendering and optimized routing for web\n\nReact Native doesn't include built-in navigation, so you need a navigation library. Expo Router is built on top of React Navigation and integrates seamlessly with Expo CLI and bundling.\n\nFor more information, see:\n\n- [Navigation in Expo](https://docs.expo.dev/develop/app-navigation/)\n- [Expo Router Documentation](https://docs.expo.dev/router/introduction/)\n- [App Directory Guide](app/README.md)\n\n## Available Scripts\n\n- `npm start` - Start Expo dev server\n- `npm run android` - Run on Android emulator/device\n- `npm run ios` - Run on iOS simulator/device\n- `npm run web` - Run in web browser\n- `npm run lint` - Check code quality\n- `npm run lint:fix` - Fix linting issues automatically\n- `npm run format` - Format code with Prettier\n- `npm test` - Run tests\n\n## Project Structure\n\n```\nreact-native-starter/\n├── app/              # Expo Router screens (file-based routing)\n│   ├── (tabs)/       # Tab navigation screens\n│   └── _layout.tsx   # Root layout with theme provider\n├── components/       # Reusable UI components\n│   ├── ErrorBoundary.tsx\n│   └── LoadingScreen.tsx\n├── hooks/            # Custom React hooks\n│   └── useFetch.ts   # Data fetching hook\n├── services/         # API \u0026 storage services\n│   ├── api.ts        # Axios client with interceptors\n│   └── storage.ts    # AsyncStorage wrapper\n├── types/            # TypeScript type definitions\n│   └── api.ts        # API response types\n├── constants/        # App constants\n│   ├── Colors.ts     # Color definitions\n│   └── Theme.ts      # React Native Paper theme\n├── assets/           # Images, fonts, static files\n└── docs/             # Documentation\n```\n\n**Key directories:**\n\n- **`app/`** - All screens go here. Files automatically become routes (Expo Router).\n- **`components/`** - Reusable UI components used across screens.\n- **`hooks/`** - Custom React hooks for shared logic (e.g., `useFetch`).\n- **`services/`** - API client and storage utilities.\n- **`constants/`** - App-wide constants like colors and theme config.\n- **`types/`** - TypeScript interfaces and types.\n\n## User Interface\n\n### Safe Areas\n\nThis project includes `react-native-safe-area-context` (installed with Expo Router) for handling safe areas on devices with notches and system bars.\n\n**Quick example:**\n\n```tsx\nimport { SafeAreaView } from 'react-native-safe-area-context';\n\nexport default function Screen() {\n  return \u003cSafeAreaView style={{ flex: 1 }}\u003e{/* Your content */}\u003c/SafeAreaView\u003e;\n}\n```\n\nSee [Safe Areas Guide](docs/safe-areas.md) for more information.\n\n### UI Components (React Native Paper)\n\nThis project includes **React Native Paper**, a Material Design 3 component library. Paper provides pre-built, accessible components that automatically adapt to light/dark mode.\n\n**Quick example:**\n\n```tsx\nimport { Button, Card, Text } from 'react-native-paper';\n\nexport default function Screen() {\n  return (\n    \u003cCard\u003e\n      \u003cCard.Content\u003e\n        \u003cText variant=\"titleLarge\"\u003eCard Title\u003c/Text\u003e\n        \u003cButton mode=\"contained\" onPress={() =\u003e console.log('Pressed')}\u003e\n          Press me\n        \u003c/Button\u003e\n      \u003c/Card.Content\u003e\n    \u003c/Card\u003e\n  );\n}\n```\n\nSee [UI Library Guide](docs/ui-library.md) for more information on using React Native Paper components and customizing themes.\n\n### Assets\n\nAssets (images, fonts, etc.) are stored in the `assets/` directory. Import them directly:\n\n```tsx\nimport { Image } from 'react-native';\n\n\u003cImage source={require('./assets/icon.png')} /\u003e;\n```\n\nSee [Assets Guide](docs/assets.md) for more information.\n\n### Environment Variables\n\nThis project uses environment variables for configuration. Copy `.env.example` to `.env` and fill in your values:\n\n```bash\ncp .env.example .env\n```\n\nAll environment variables used in JavaScript must be prefixed with `EXPO_PUBLIC_`. See [Environment Variables Guide](docs/environment-variables.md) for more information.\n\n## Development Tools\n\n### Expo CLI\n\nExpo CLI is installed automatically with the `expo` package. Common commands:\n\n| Command                      | Description                                 |\n| ---------------------------- | ------------------------------------------- |\n| `npx expo start`             | Start the development server                |\n| `npx expo prebuild`          | Generate native Android and iOS directories |\n| `npx expo run:android`       | Compile and run on Android                  |\n| `npx expo run:ios`           | Compile and run on iOS                      |\n| `npx expo install \u003cpackage\u003e` | Install a library with compatible versions  |\n| `npx expo lint`              | Lint your project files                     |\n\nSee [Expo CLI documentation](https://docs.expo.dev/more/expo-cli/) for more commands.\n\n### EAS CLI\n\nEAS CLI is used for building, submitting, and managing your app. Install it globally:\n\n```bash\nnpm install -g eas-cli\n```\n\nCommon commands:\n\n- `eas build` - Create development, preview, or production builds\n- `eas submit` - Submit your app to app stores\n- `eas update` - Create over-the-air (OTA) updates\n\nSee [EAS CLI documentation](https://docs.expo.dev/eas/) for more information.\n\n### Expo Doctor\n\nDiagnose issues in your Expo project:\n\n```bash\nnpx expo-doctor\n```\n\nThis command checks for common issues in app config, package.json, dependency compatibility, and overall project health.\n\n### Expo Tools for VS Code\n\nInstall the [Expo Tools VS Code extension](https://marketplace.visualstudio.com/items?itemName=expo.vscode-expo-tools) for:\n\n- Autocomplete and IntelliSense for app config files\n- Debugging with breakpoints and variable inspection\n\n### Orbit\n\nOrbit is a macOS and Windows app for:\n\n- Installing and launching builds from EAS\n- Installing and launching updates\n- Testing on physical devices and emulators\n\nInstall with Homebrew (macOS):\n\n```bash\nbrew install expo-orbit\n```\n\nOr download from [GitHub releases](https://github.com/expo/orbit/releases).\n\n### Snack\n\n[Snack](https://snack.expo.dev) is an in-browser development environment for:\n\n- Sharing code snippets\n- Experimenting with React Native\n- Testing prototypes without local setup\n\n### Expo Go\n\nExpo Go is a free app for testing your app on physical devices:\n\n- Download from [App Store](https://apps.apple.com/app/expo-go/id982107779) (iOS)\n- Download from [Google Play](https://play.google.com/store/apps/details?id=host.exp.exponent) (Android)\n\n\u003e **Note:** Expo Go is great for learning and prototyping, but not recommended for production apps. Use development builds instead.\n\n## Documentation\n\n### Essential Guides\n\n- **[Getting Started](docs/getting-started.md)** - Complete setup guide (start here!)\n- **[How-To Guides](docs/how-to.md)** - Common development tasks\n- **[Code Conventions](docs/conventions.md)** - Project standards and best practices\n\n### Feature Guides\n\n- **[API and Storage](docs/api-and-storage.md)** - Backend integration guide\n- **[UI Library](docs/ui-library.md)** - React Native Paper components\n- **[Color Themes](docs/color-themes.md)** - Theming and dark mode\n- **[Error and Loading Handling](docs/error-and-loading.md)** - State management\n\n### Additional Guides\n\n- [Splash Screen and App Icon](docs/splash-screen-and-app-icon.md)\n- [Safe Areas](docs/safe-areas.md)\n- [System Bars](docs/system-bars.md)\n- [Fonts](docs/fonts.md)\n- [Assets](docs/assets.md)\n- [Animation](docs/animation.md)\n- [Store Data](docs/store-data.md)\n- [Environment Variables](docs/environment-variables.md)\n\n## Resources\n\n- [Expo Documentation](https://docs.expo.dev/)\n- [Expo Router Documentation](https://docs.expo.dev/router/introduction/)\n- [React Native Directory](https://reactnative.directory/) - Search for React Native libraries\n- [Expo Discord](https://chat.expo.dev/) - Community support\n\n## License\n\nMIT License - See [LICENSE](LICENSE) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoniz-dev%2Freact-native-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkoniz-dev%2Freact-native-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoniz-dev%2Freact-native-starter/lists"}