repository·master·Indexed 26 days ago
https://github.com/obytes/react-native-template-obytesA production-ready Expo and React Native starter kit designed for high-performance mobile app development. It features a pre-configured stack including Expo Router, NativeWind (TailwindCSS), Zustand, React Query, Axios, and Zod. The template emphasizes architectural consistency and developer experience, utilizing a custom dev client and providing a CLI tool, create-obytes-app, for project scaffolding.
Obytes Starter is an all-in-one React Native/Expo starter kit designed for building high-quality mobile applications. Key features include:
react-native-mmkv for fast, secure storage.React Native Template Obytes is a production-ready Expo starter kit designed for high-performance mobile application development. It prioritizes developer experience and follows strict architectural principles to ensure consistency and scalability.
Key technical pillars include:
react-native-mmkv for secure, fast storage.The project uses a feature-oriented architecture where each feature is a self-contained module. This promotes isolation, scalability, and maintainability by keeping related code (screens, components, API, and state) in one place.
features/: Contains all feature-specific code. Each feature folder should contain its own screens, components, and logic.app/: Contains the Expo Router file-based routing structure. These files act as thin re-export layers for screens defined in features/.components/ui/: The design system. Contains reusable UI primitives (Button, Input, etc.) and shared utilities. Promote components here only if they are used in 2+ features and have no feature-specific logic.lib/: Core infrastructure and cross-cutting concerns like the shared API client, authentication utilities, global hooks, and internationalization.translations/: Centralized i18n resource files.The Obytes starter kit is designed for various developer profiles:
You are not required to use the entire kit; you can cherry-pick specific configurations, ideas, or code snippets that suit your needs.
Starlight projects follow a specific directory structure for content and assets:
src/content/docs/: Place your .md or .mdx files here. Each file is automatically exposed as a route based on its filename.src/assets/: Store images here to be embedded in Markdown using relative links.public/: Store static assets like favicons.astro.config.mjs: The main configuration file for Astro.src/content/config.ts: Configuration for content collections.Radio and Switch components that share the same underlying logic and structure as the Checkbox. They are designed to handle boolean values and use MotiView for icon animations based on their checked state. They are highly customizable via props similar to the Checkbox component.When creating a new feature in features/, follow these conventions to ensure compatibility with Fast Refresh and maintainability:
-screen.tsx suffix and be placed in the feature root.components/ subfolder.api.ts file for feature-specific API calls and React Query hooks (avoid using folders for API).use-*-store.tsx for feature-specific state management (e.g., with Zustand).Important: Do not use index.ts barrel exports within feature folders, as this causes issues with React Fast Refresh.
dark: variant. To apply different styles for dark mode, prefix your utility classes with dark:. This is the preferred method over manually checking the color scheme.For JavaScript-only dependencies, use pnpm to interactively select and update packages.
Recommended Workflow:
devDependencies first using pnpm up -i.pnpm run doctor to revert any devDependencies that are out of sync with your current Expo version.pnpm up -i
# After updating devDependencies:
pnpm run doctor
# Then run verification suite
rm -rf node_modules
pnpm install
pnpm lint
pnpm type-check
pnpm test
pnpm prebuild --clean
pnpm ios
pnpm android
pnpm start -c