RNCopilot: Instructions file for GitHub Copilot

GitHub Copilot Instructions

React Native Expo template. Follow these rules for every suggestion.

Stack

React Native 0.83.2, Expo SDK 55, expo-router, TypeScript 5.9 strict, react-native-unistyles 3.x, TanStack Query, Zustand, Supabase, Axios, react-i18next (EN+AR), react-native-mmkv, react-hook-form, zod/v4.

Path aliases: @/* = src/*, ~/* = app/*

---

Styling Rules

• Import StyleSheet from react-native-unistyles, never from react-native
• Always use the theme callback: StyleSheet.create((theme) => ({ ... }))
• Never inline styles: no style={{ padding: 16 }}
• Never color literals: no color: '#6366F1' or backgroundColor: 'white'
• Never hardcoded spacing: use theme.metrics.spacing.p16 not padding: 16

import { StyleSheet } from 'react-native-unistyles';

const styles = StyleSheet.create((theme) => ({
  container: {
    padding: theme.metrics.spacing.p16,
    backgroundColor: theme.colors.background.surface,
    borderRadius: theme.metrics.borderRadius.md,
    borderWidth: 1,
    borderColor: theme.colors.border.default,
  },
  title: {
    fontSize: theme.fonts.size.lg,
    color: theme.colors.text.primary,
  },
}));

---

Components

Use project components, not React Native primitives where a project component exists.

// Text - use project Text, not RN Text
import { Text } from '@/common/components/Text';
<Text variant="h1">{t('home.title')}</Text>
<Text variant="body" color={theme.colors.text.secondary}>{t('home.body')}</Text>
// Variants: h1, h2, h3, body, bodySmall, caption, label, overline

// Button
import { Button } from '@/common/components/Button';
<Button title={t('actions.submit')} variant="primary" size="md" onPress={fn} loading={isPending} />
// Variants: primary, secondary, outline, ghost | Sizes: sm, md, lg

// Icon (Ionicons names)
import { Icon } from '@/common/components/Icon';
<Icon name="home-outline" variant="primary" size={20} />
// Variants: primary, secondary, tertiary, muted, inverse, accent

// Screen root
import { ScreenContainer } from '@/common/components/ScreenContainer';
<ScreenContainer scrollable padded>{/* content */}</ScreenContainer>

// Card
import { Card } from '@/common/components/Card';
<Card variant="elevated" pressable onPress={fn}>{/* content */}</Card>
// Variants: default, elevated, outlined

// Input
import { Input } from '@/common/components/Input';
<Input label={t('fields.email')} value={val} onChangeText={fn} error={err ? t(err) : undefined} />