A production-ready React Native (Expo) starter kit for vibe coders. Features a complete design system, form handling, navigation patterns, and excellent developer experience.
- Design System: Complete token-based design system with light/dark mode
- Form Handling: react-hook-form + zod with pre-built form components
- Navigation: Expo Router with tabs, stacks, drawers, modals, and typed routes
- Storage: AsyncStorage hooks with TypeScript support
- Static Testing: ESLint 9, Prettier, TypeScript strict mode, lefthook
- Developer Experience: Path aliases, VSCode settings, AI agent rules
- Scripts: Icon generation, screen scaffolding
# Create a new project from this template
npx degit markshenouda/VibeRN my-app
cd my-app
# Initialize Git repository
git init && git add -A && git commit -m "Initial commit"
# Install dependencies
npm install
# Start development server
npm run start
# Run on iOS
npm run ios
# Run on Android
npm run androidsrc/
├── app/ # Expo Router screens
│ ├── index.tsx # App entry point (currently redirects to examples/tabs)
│ ├── examples/ # Example screens (removable)
│ │ ├── auth/ # Auth screens (login, register, forgot-password)
│ │ ├── tabs/ # Tab navigation (home, explore, profile)
│ │ ├── drawer/ # Drawer navigation example
│ │ ├── details/ # Dynamic route example
│ │ ├── components.tsx # Component showcase
│ │ └── forms.tsx # Form examples
│ ├── _layout.tsx # Root layout with providers
│ └── +not-found.tsx # 404 screen
├── components/
│ ├── ui/ # Design system primitives
│ ├── forms/ # Form components
│ └── patterns/ # Common UI patterns
├── design-system/
│ ├── tokens/ # Colors, typography, spacing
│ └── ThemeProvider.tsx # Theme context
├── hooks/ # Custom React hooks
├── lib/ # Utilities and validation
└── constants/ # App configuration
- Design System Guide - Colors, typography, components
- Components Reference - All UI components
- Form Handling - Form validation patterns
- Navigation - Routing and navigation
- Scripts - Available npm scripts
import { useTheme } from '@/design-system';
import { Text, Button, Card } from '@/components/ui';
function MyComponent() {
const { theme, isDark, toggleTheme } = useTheme();
return (
<Card>
<Text variant="h2">Hello World</Text>
<Button onPress={toggleTheme}>{isDark ? 'Light Mode' : 'Dark Mode'}</Button>
</Card>
);
}import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { FormInput, loginFormSchema } from '@/components/forms';
import { Button } from '@/components/ui';
function LoginForm() {
const { control, handleSubmit } = useForm({
resolver: zodResolver(loginFormSchema),
});
return (
<>
<FormInput name="email" control={control} label="Email" />
<FormInput name="password" control={control} label="Password" secureTextEntry />
<Button onPress={handleSubmit(onSubmit)}>Login</Button>
</>
);
}import { useAsyncStorage } from '@/hooks';
function Settings() {
const [settings, setSettings] = useAsyncStorage('settings', defaultSettings);
return (
<Switch
value={settings.notifications}
onValueChange={(value) => setSettings({ ...settings, notifications: value })}
/>
);
}# Development
npm run start # Start Expo dev server
npm run ios # Run on iOS
npm run android # Run on Android
# Code Quality
npm run lint # Run ESLint
npm run typecheck # TypeScript check
npm run format # Format with Prettier
npm run check # Run all checks
# Project Management
npm run generate:icons # Generate app icons
npm run generate:splash # Generate splash screenEdit app.json:
{
"expo": {
"name": "Your App Name",
"slug": "your-app",
"scheme": "yourapp"
}
}Edit src/design-system/tokens/colors.ts:
export const palette = {
primary: {
500: '#your-color',
// ... other shades
},
};Simply delete the src/app/examples/ folder to remove all example screens and start fresh.
Note for AI Agents: The
examples/folder is just a reference for patterns and components - do NOT create new screens there. Start working directly insrc/app/. The currentsrc/app/index.tsxredirects toexamples/tabs- replace it with your own home screen when ready.
The app uses src/app/index.tsx as the entry point. By default, it redirects to the examples:
// src/app/index.tsx (current - redirects to examples)
import { Redirect } from 'expo-router';
export default function Index() {
return <Redirect href="/examples/tabs" />;
}To create your own home screen, replace the redirect with your content:
// src/app/index.tsx (your custom home screen)
import { View } from 'react-native';
import { Text, Button } from '@/components/ui';
import { useTheme } from '@/design-system';
export default function HomeScreen() {
const { theme } = useTheme();
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: theme.colors.background,
}}
>
<Text variant="h1">Welcome to My App</Text>
<Button onPress={() => {}}>Get Started</Button>
</View>
);
}- Framework: React Native with Expo SDK 54
- Navigation: Expo Router 6
- Forms: react-hook-form + zod
- Storage: @react-native-async-storage/async-storage
- Animations: react-native-reanimated
- Gestures: react-native-gesture-handler
- Styling: React Native's
StyleSheetAPI and a custom design system. Does not usestyled-components,NativeWind, or similar external styling libraries. - TypeScript: Strict mode with path aliases
This project has robust support for AI agents, providing clear guidelines and configurations to ensure seamless integration and adherence to project standards.
For comprehensive guidelines on AI agent interaction, conventions, and operational notes for both the frontend and backend, please refer to:
- All AI Agent Rules - Essential reading for all AI agents working on this project.
This project also includes specific configuration files for various AI assistants:
.cursor/rules- General AI rules and best practices for the project..gemini/rules.md- Specific guidelines for the Gemini agent..github/copilot-instructions.md- GitHub Copilot instructions.
These resources help AI understand the project structure and coding conventions, ensuring consistent and high-quality contributions.
MIT