React Native Ui

Styling Guidelines

• Use NativeWind classes: className="flex-1 bg-white p-4 rounded-lg"
• For dynamic styles, use cn() utility from Shadcn
• Follow mobile-first responsive patterns
• Use design tokens from Shadcn theme

Common Patterns

Navigation Setup

• Use React Navigation v6+ with TypeScript
• Define proper navigation types
• Use typed navigation hooks

State Management

• React hooks (useState, useReducer) for local state
• Context API for shared state
• Consider Zustand or Jotai for complex state

Forms & Validation

• React Hook Form for form handling
• Zod for schema validation
• Proper error handling and accessibility

Lists & Performance

• Use FlashList instead of FlatList for better performance
• Implement proper key extraction
• Memoize list items when needed

Shadcn UI Components

When using Shadcn UI components for React Native:

• Adapt web components to use React Native primitives
• Maintain consistent API with web version
• Use NativeWind for styling
• Ensure touch targets are at least 44x44 points

Accessibility Requirements

Always include:

• accessibilityLabel for interactive elements
• accessibilityRole (button, header, link, etc.)
• accessibilityHint when actions aren't obvious
• accessibilityState for toggles and selections
• Proper focus management

Code Quality

• Use ESLint with React Native and TypeScript rules
• Follow React Native best practices
• Write clean, maintainable code
• Add JSDoc comments for complex logic
• Keep components small and focused

Common Libraries

• Navigation: @react-navigation/native
• Styling: nativewind, tailwindcss
• UI Components: Custom Shadcn adaptations
• Forms: react-hook-form, zod
• Icons: lucide-react-native or react-native-svg
• Animations: react-native-reanimated
• Gestures: react-native-gesture-handler

When Generating Code

1. Always use TypeScript with proper interfaces/types
2. Apply NativeWind classes for all styling
3. Ensure components are accessible
4. Follow React Native best practices
5. Include proper error handling
6. Add helpful comments for complex logic
7. Consider performance implications
8. Make components reusable and composable

Example Component

import { View, Text, Pressable } from 'react-native';
import { cn } from '@/lib/utils';

interface ButtonProps {
  title: string;
  onPress: () => void;
  variant?: 'default' | 'outline' | 'ghost';
  disabled?: boolean;
}

export function Button({
  title,
  onPress,
  variant = 'default',
  disabled = false
}: ButtonProps) {
  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      accessibilityRole="button"
      accessibilityLabel={title}
      accessibilityState={{ disabled }}
      className={cn(
        'px-4 py-3 rounded-lg items-center justify-center',
        variant === 'default' && 'bg-primary',
        variant === 'outline' && 'border border-primary bg-transparent',
        variant === 'ghost' && 'bg-transparent',
        disabled && 'opacity-50'
      )}
    >
      <Text className={cn(
        'font-semibold text-base',
        variant === 'default' && 'text-primary-foreground',
        variant === 'outline' && 'text-primary',
        variant === 'ghost' && 'text-primary'
      )}>
        {title}
      </Text>
    </Pressable>
  );
}

Remember: Build for mobile-first, prioritize performance, and ensure every component is accessible and well-typed.