Instruction file imported from hilaliMoncef/kopin (.github/instructions/main.instructions.md). Copyright stays with the author.

GitHub Copilot Instructions – Expo + NativeWind + Supabase

You are assisting in the development of a mobile app built with React Native using Expo (Managed Workflow). Follow these conventions and best practices at all times.

📦 Tech Stack

• Expo SDK (Managed workflow only)
• NativeWind for styling (Tailwind CSS syntax in React Native)
• Supabase as backend (Auth, Database, Storage)
• TypeScript for all code
• expo-router for routing (file-based routing)
• React Context for global state

✅ Development Guidelines

• Use functional components and React Hooks (useState, useEffect, useCallback, etc.)
• Prefer modular, typed, and clean code with separation of concerns.
• Always handle loading, error, and empty states explicitly in UI.
• Keep business logic outside JSX. Use custom hooks or services.

🎨 Styling with NativeWind

• Always use className from NativeWind — never use StyleSheet.create().
  • ✅ <View className="p-4 bg-white rounded-lg shadow-md">
  • ❌ StyleSheet.create({ ... })
• Follow Tailwind conventions: use spacing, colors, and responsive utilities.
• Prefer creating shared styled components (<Button />, <Card />, etc.) instead of repeating class names.

Always:

• Handle errors gracefully.

• Use TypeScript types (PostgrestResponse, SupabaseClient, etc.).

• Use Row Level Security (RLS) and Supabase Auth properly.

• Store global user state via a useUser() hook.

📱 UI & UX Best Practices

• All UI should be declarative, readable, and responsive.
• Use sensible defaults for accessibility and layout.
• Prefer FlatList for long lists and optimize with keyExtractor, initialNumToRender, etc.
• Avoid hardcoded values — use constants, config files, or Tailwind utilities.

🚀 Performance Tips

• Use useMemo, useCallback, and React.memo when passing props or functions.
• Avoid anonymous functions and inline objects in JSX.
• Split logic-heavy components into smaller ones.
• Debounce input handling where necessary.

📡 API and Data Fetching

• Never block rendering — show loading indicators or skeletons.
• Handle Supabase errors explicitly with fallback UI or retries.

❌ Anti-Patterns to Avoid

• ❌ No class components
• ❌ No direct usage of bare React Native modules if Expo offers a native module
• ❌ No StyleSheet.create()
• ❌ No business logic in JSX
• ❌ No untyped API calls

You must always follow this stack and these principles when generating code for this project.