React Native with AI: Setup and Workflow

# Download Cursor from https://cursor.sh/
# Install and open Cursor
# Sign up for Cursor Pro for advanced AI features

# Open your React Native project in Cursor
cursor MyReactNativeApp

// .cursor/rules/react-native.md
# React Native Development Rules

## Core Principles
- Always use functional components with hooks
- Prefer TypeScript for type safety
- Use Expo when possible for easier deployment
- Follow React Native best practices for performance

## Code Style
- Use PascalCase for component names
- Use camelCase for variables and functions
- Always destructure props
- Use StyleSheet.create() for styles

## Common Patterns
- useState for local state
- useEffect for side effects
- Custom hooks for shared logic
- Context for global state when needed

# Download Windsurf from https://codeium.com/windsurf
# Install and configure
# Open your project directory

# Install VS Code extensions
code --install-extension GitHub.copilot
code --install-extension codeium.codeium
code --install-extension ms-vscode.vscode-typescript-next

Create a new React Native project called "TaskMaster" with the following requirements:
- Use Expo for easy deployment
- Set up TypeScript
- Include navigation (React Navigation)
- Add a basic folder structure for screens, components, and utils
- Configure environment variables

# Initialize with Expo and TypeScript
npx create-expo-app TaskMaster --template typescript

cd TaskMaster

# Install navigation dependencies
npx expo install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context

# Install other common dependencies
npx expo install @react-native-async-storage/async-storage
npx expo install expo-constants expo-secure-store

# Create folder structure
mkdir src
mkdir src/screens src/components src/utils src/types src/hooks

Create a reusable TaskCard component for a React Native todo app with:
- TypeScript interfaces
- Props for task title, description, completed status
- Animated checkbox interaction
- Swipe-to-delete functionality
- Modern styling with shadows and animations

// src/components/TaskCard.tsx
import React, { useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Animated,
  PanGestureHandler,
  State,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';

interface Task {
  id: string;
  title: string;
  description: string;
  completed: boolean;
}

interface TaskCardProps {
  task: Task;
  onToggleComplete: (id: string) => void;
  onDelete: (id: string) => void;
}

export const TaskCard: React.FC<TaskCardProps> = ({
  task,
  onToggleComplete,
  onDelete,
}) => {
  const [translateX] = useState(new Animated.Value(0));
  const [scale] = useState(new Animated.Value(1));

  const handleToggleComplete = () => {
    // Animate scale for feedback
    Animated.sequence([
      Animated.timing(scale, {
        toValue: 0.95,
        duration: 100,
        useNativeDriver: true,
      }),
      Animated.timing(scale, {
        toValue: 1,
        duration: 100,
        useNativeDriver: true,
      }),
    ]).start();

    onToggleComplete(task.id);
  };

  const handleSwipeGesture = (event: any) => {
    const { translationX, state } = event.nativeEvent;

    if (state === State.ACTIVE) {
      translateX.setValue(translationX);
    } else if (state === State.END) {
      if (translationX > 100) {
        // Swipe right to delete
        Animated.timing(translateX, {
          toValue: 300,
          duration: 200,
          useNativeDriver: true,
        }).start(() => onDelete(task.id));
      } else {
        // Snap back
        Animated.spring(translateX, {
          toValue: 0,
          useNativeDriver: true,
        }).start();
      }
    }
  };

  return (
    <PanGestureHandler onGestureEvent={handleSwipeGesture}>
      <Animated.View
        style={[
          styles.container,
          {
            transform: [{ translateX }, { scale }],
            opacity: task.completed ? 0.7 : 1,
          },
        ]}
      >
        <TouchableOpacity
          style={styles.checkbox}
          onPress={handleToggleComplete}
        >
          <Ionicons
            name={task.completed ? 'checkmark-circle' : 'ellipse-outline'}
            size={24}
            color={task.completed ? '#4CAF50' : '#CCCCCC'}
          />
        </TouchableOpacity>

        <View style={styles.content}>
          <Text
            style={[
              styles.title,
              task.completed && styles.completedText,
            ]}
          >
            {task.title}
          </Text>
          <Text
            style={[
              styles.description,
              task.completed && styles.completedText,
            ]}
          >
            {task.description}
          </Text>
        </View>
      </Animated.View>
    </PanGestureHandler>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
    padding: 16,
    marginVertical: 4,
    marginHorizontal: 16,
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  checkbox: {
    marginRight: 12,
  },
  content: {
    flex: 1,
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    marginBottom: 4,
  },
  description: {
    fontSize: 14,
    color: '#666',
  },
  completedText: {
    textDecorationLine: 'line-through',
    opacity: 0.6,
  },
});

I'm getting this error in my React Native app:
"Cannot read property 'navigate' of undefined"

My code is:
[paste your code here]

Please explain what's wrong and how to fix it.

Analyze this React Native component for performance issues and optimize it:
[paste component code]

Focus on:
- Unnecessary re-renders
- Memory leaks
- Animation performance
- List rendering optimization

// Ask AI: "Create a custom hook for managing API calls with loading states"
import { useState, useEffect } from 'react';

export const useApi = <T>(url: string) => {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch(url);
        if (!response.ok) throw new Error('Network response was not ok');
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err instanceof Error ? err.message : 'Unknown error');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

Generate comprehensive tests for my TaskCard component including:
- Rendering tests
- Interaction tests
- Animation tests
- Edge cases

Generate README documentation for my React Native project including:
- Installation instructions
- Development workflow
- API documentation
- Deployment steps

Create a React Native screen component for user registration with:
- TypeScript interfaces
- Form validation using react-hook-form
- Error handling and loading states
- Keyboard-aware scrolling
- Modern UI with proper accessibility labels
- Integration with AsyncStorage for form persistence

1. Generate initial code with AI
2. Test and identify issues
3. Ask AI to fix specific problems
4. Optimize with AI suggestions
5. Document with AI assistance

Design the architecture for a social media React Native app with:
- User authentication
- Real-time messaging
- Photo/video sharing
- Push notifications
- Offline support

Provide folder structure, main components, and state management strategy.

Review this React Native component for:
- Code quality
- Security issues
- Performance optimizations
- Accessibility improvements
- React Native best practices

[paste your code]

Help me migrate this class component to a functional component with hooks:
[paste class component]

Maintain all functionality and improve performance where possible.