Practice and reinforce the concepts from Lesson 3
Master AI-powered development by:
Time Limit: 10 minutes
Set up and test these AI coding assistants:
Primary Options:
Setup Checklist:
Time Limit: 5 minutes
Test each tool's React Native knowledge:
Prompt Test One:
Create a React Native component that displays a list of todos with add/remove functionality
Prompt Test 2:
Add animations to the todo list using React Native Animated API
Scoring:
✅ Checkpoint: Choose your winner and document why!
Prompt Engineering Challenge: Use AI to set up a complete React Native project structure:
PROMPT: "Create a React Native expo project structure for a weather app that includes:
- Clean folder organization
- Navigation setup
- Component library structure
- Constants for colors and styles
- API service layer
- Custom hooks folder
- TypeScript configuration"
Manual Setup:
npx create-expo-app WeatherAI --template blank-typescript
cd WeatherAI
AI-Generated Structure Goal:
src/
├── components/
│ ├── common/
│ └── weather/
├── screens/
├── navigation/
├── services/
├── hooks/
├── constants/
├── types/
└── utils/
Your Mission: Get AI to generate this entire structure with placeholder files!
Challenge: Build a weather app component library using AI
Smart Prompts to Try:
PROMPT: "Create a React Native weather card component that shows:
- Current temperature (large, prominent)
- Weather condition with icon
- Location name
- High/low temperatures
- Beautiful gradient background based on weather
- Smooth animations on data update
- TypeScript interfaces"
PROMPT: "Create a React Native search input component with:
- Clean design with search icon
- Auto-complete suggestions
- Recent searches functionality
- Smooth focus/blur animations
- Error states
- Loading states"
PROMPT: "Create a detailed weather component showing:
- Hourly forecast (horizontal scroll)
- 7-day forecast
- Weather metrics (humidity, pressure, wind)
- Sunrise/sunset times
- Charts/graphs for temperature trends"
Challenge: Implement complex features using AI assistance
Feature 1: Smart Navigation
PROMPT: "Set up React Navigation v6 for a weather app with:
- Tab navigator (Current, Forecast, Settings)
- Stack navigator for detailed views
- Custom tab bar with weather-themed icons
- Smooth transitions
- Deep linking support"
Feature 2: API Integration
PROMPT: "Create a weather API service that:
- Uses fetch with proper error handling
- Implements retry logic for failed requests
- Caches recent weather data
- Handles different weather APIs (OpenWeather, etc.)
- Includes TypeScript interfaces for all responses
- Implements rate limiting"
Feature 3: State Management
PROMPT: "Implement React Context + useReducer for weather app state that manages:
- Current weather data
- Search history
- User preferences (units, theme)
- Loading states
- Error states
- Offline capabilities"
Generate Tests with AI:
PROMPT: "Create comprehensive Jest tests for the weather card component including:
- Rendering tests
- Props validation
- Animation testing
- User interaction tests
- Mock data scenarios
- Accessibility testing"
Technique 1: Context-Aware Prompts
Instead of: "Create a button"
Try: "Create a React Native TouchableOpacity button component for a weather app that matches iOS design guidelines, includes haptic feedback, and has loading states"
Technique 2: Constraint-Based Prompts
PROMPT: "Create a React Native component with these constraints:
- Must work on both iOS and Android
- Maximum 150 lines of code
- Uses TypeScript
- Follows React Native best practices
- Includes accessibility features
- Has smooth 60fps animations"
Technique 3: Example-Driven Prompts
PROMPT: "Create a React Native component similar to Instagram's story viewer that:
- Shows circular profile pictures
- Has progress indicators
- Supports horizontal scrolling
- Auto-advances with timer
- Includes gesture controls"
Take this basic prompt and optimize it:
Basic: "Make a list component"
Your Optimized Prompt:
[Your improved prompt here - aim for specific, detailed instructions]
AI Response Quality Scoring:
Without AI:
With AI:
Metrics to Track:
Scenario: You're building a complex animation
Human Role:
AI Role:
Task: Create a card flip animation using this collaboration model
Prompt for Code Review:
PROMPT: "Review this React Native component for:
- Performance optimizations
- Best practices violations
- Accessibility issues
- Security concerns
- Code organization improvements
[Paste your component code]"
Debugging Prompt Template:
PROMPT: "I'm getting this error in React Native:
[Error message]
Relevant code:
[Code snippet]
Expected behavior:
[What should happen]
Please provide:
1. Root cause analysis
2. Step-by-step fix
3. Prevention strategies
4. Alternative approaches"
Planning Prompt:
PROMPT: "Design the architecture for a React Native app that:
- Handles real-time chat
- Supports offline functionality
- Integrates with Firebase
- Has complex navigation
- Supports push notifications
- Needs to scale to 100k users
Provide:
1. Folder structure
2. Key components
3. Data flow
4. State management strategy
5. Performance considerations"
Performance Analysis Prompt:
PROMPT: "Analyze this React Native component for performance issues:
- Unnecessary re-renders
- Memory leaks
- Heavy computations
- Inefficient animations
[Component code]
Provide optimized version with explanations."
Bundle Analysis Challenge: Use AI to help optimize your app's bundle size:
PROMPT: "Review my package.json and suggest:
- Unused dependencies to remove
- Lighter alternatives
- Code splitting opportunities
- Import optimization strategies"
PROMPT: "Convert these imports to reduce bundle size:
- Lodash utilities
- Icon libraries
- UI component libraries
- Date manipulation libraries"
Document your optimal workflow:
Project Setup Phase:
Development Phase:
Testing & Debugging:
Code Review:
Workflow Successfully Optimized If:
Advanced AI Development:
Time Investment: 60 minutes total Difficulty Level: Intermediate to Advanced Prerequisites: Basic React Native knowledge, familiarity with AI tools Tools Needed: AI coding assistant (Cursor/Copilot), React Native development environment