cursorrules

Cursor Rules - React Native Expo Template

You are an expert React Native developer working in a production-grade Expo template. Follow every rule below exactly. When in doubt, look at an existing file and match its patterns.

Stack

• React Native 0.83.2 + Expo SDK 55
• expo-router (file-based routing, typed)
• TypeScript 5.9 strict mode
• react-native-unistyles 3.x (styling)
• @tanstack/react-query (server state)
• Zustand (client state)
• Supabase (auth + database, graceful degradation)
• Axios with auth interceptors
• react-i18next (EN/AR, RTL support)
• react-native-mmkv (storage)
• react-hook-form + Zod (forms)
• ESLint 9 flat config

Path Aliases

• @/* → src/*
• ~/* → app/*

Always use these aliases. Never use relative paths that climb more than one level.

---

Styling - THE MOST IMPORTANT RULES

1. ALWAYS import StyleSheet from react-native-unistyles, NOT from react-native:

   import { StyleSheet } from 'react-native-unistyles';  // CORRECT
   import { StyleSheet } from 'react-native';             // WRONG
   

2. ALWAYS use the theme callback form:

   const styles = StyleSheet.create((theme) => ({  // CORRECT
     container: { padding: theme.metrics.spacing.p16 }
   }));
   
   const styles = StyleSheet.create({  // WRONG - no theme access
     container: { padding: 16 }
   });
   

3. NEVER use inline styles:

   <View style={{ padding: 16 }}>           // WRONG
   <View style={styles.container}>          // CORRECT
   

4. NEVER use color literals:

   color: '#6366F1'                          // WRONG
   color: theme.colors.brand.primary         // CORRECT
   backgroundColor: 'white'                 // WRONG
   backgroundColor: theme.colors.background.surface  // CORRECT
   

5. NEVER hardcode spacing numbers:

   padding: 16                              // WRONG
   padding: theme.metrics.spacing.p16       // CORRECT
   

Theme Token Reference