A comprehensive, progressive learning path for mastering React Native development from foundations to advanced production patterns.
This repository follows a progressive mastery approach:
- Foundation First - Build solid understanding before advancing
- Progressive Complexity - Each concept builds upon previous ones
- Platform Understanding - Deep dive into iOS/Android differences
- Real-world Application - Practical examples with production patterns
- Copy-Paste Learning - Immediate testing in included playground environment
| Section | Theory | Practice | Status |
|---|---|---|---|
| 01 | React Native Fundamentals | Examples | ✅ Complete |
| 02 | Core Components | Examples | ✅ Complete |
| 03 | Basic Styling | Examples | ✅ Complete |
| Section | Theory | Practice | Status |
|---|---|---|---|
| 04 | Interactive Components | Examples | ✅ Complete |
| 05 | Advanced UI Components | 🚧 Coming Soon | ⏳ Planned |
| 06 | Form Components | 🚧 Coming Soon | ⏳ Planned |
| Section | Theory | Practice | Status |
|---|---|---|---|
| 07 | Flexbox Layout System | 🚧 Coming Soon | ⏳ Planned |
| 08 | Advanced Styling | 🚧 Coming Soon | ⏳ Planned |
| 09 | Responsive Design | 🚧 Coming Soon | ⏳ Planned |
| Section | Theory | Practice | Status |
|---|---|---|---|
| 10 | Custom Components | 🚧 Coming Soon | ⏳ Planned |
| 11 | Component Libraries | 🚧 Coming Soon | ⏳ Planned |
| 12 | State Management | 🚧 Coming Soon | ⏳ Planned |
| Section | Theory | Practice | Status |
|---|---|---|---|
| 13 | Performance Optimization | 🚧 Coming Soon | ⏳ Planned |
| 14 | Platform-Specific Development | 🚧 Coming Soon | ⏳ Planned |
| 15 | Testing & Debugging | 🚧 Coming Soon | ⏳ Planned |
# 1. Clone the repository
git clone https://github.com/ManishKrBarman/mob-expo.git
cd react-native-learning
# 2. Start with fundamentals
cat docs/LEARNING_INDEX.md
# 3. Practice with examples
cd playground/test-app
npm install
cp ../../concepts/01-fundamentals/architecture-visualization.tsx app/index.tsx
npm start# 1. Review learning index for knowledge gaps
cat docs/LEARNING_INDEX.md
# 2. Jump to specific sections
cat notes/04-interactive-components.md
# 3. Test advanced patterns
cd playground/test-app
cp ../../concepts/04-interactive-components/pressable-mastery.tsx app/index.tsx
npm startreact-native/
├── 📊 docs/
│ ├── LEARNING_INDEX.md # Complete progress tracking
│ ├── setup.md # Development environment setup
│ └── testing.md # Testing guidelines
├── 📚 notes/ # Comprehensive theory
│ ├── 01-fundamentals.md
│ ├── 02-core-components.md
│ ├── 03-basic-styling.md
│ └── 04-interactive-components.md
├── 💻 concepts/ # Practical examples
│ ├── package.json # TypeScript dependencies
│ ├── 01-fundamentals/
│ │ ├── README.md
│ │ ├── architecture-visualization.tsx
│ │ └── platform-detection.tsx
│ ├── 02-core-components/
│ │ ├── README.md
│ │ └── view-comprehensive.tsx
│ ├── 03-basic-styling/
│ │ ├── README.md
│ │ └── inline-styles.tsx
│ └── 04-interactive-components/
│ ├── README.md
│ ├── button-basics.tsx
│ └── pressable-mastery.tsx
├── 🧪 playground/ # Testing environment
│ └── test-app/ # Expo app for live testing
│ ├── package.json
│ ├── app/
│ │ ├── index.tsx # Copy examples here
│ │ └── _layout.tsx
│ └── assets/
├── 🔧 .github/ # GitHub configuration
│ └── ISSUE_TEMPLATE/
├── 📄 CONTRIBUTING.md # Contribution guidelines
└── 📖 README.md
- Choose Example: Browse
concepts/directories for relevant examples - Copy Content: Copy any
.tsxfile content - Test Immediately: Paste into
playground/test-app/app/index.tsx - Run & Learn:
cd playground/test-app && npm start
# Set up the playground
cd playground/test-app
npm install
# Test architecture concepts
cp ../../concepts/01-fundamentals/platform-detection.tsx app/index.tsx
npm start # App automatically reloads
# Test core components
cp ../../concepts/02-core-components/view-comprehensive.tsx app/index.tsx
# App automatically reloads with new example
# Test styling patterns
cp ../../concepts/03-basic-styling/inline-styles.tsx app/index.tsx
# Continue learning and testing
# Test interactive components
cp ../../concepts/04-interactive-components/button-basics.tsx app/index.tsx
# Immediate feedback and learning- 📖 Read Notes: Deep understanding with explanations and best practices
- 💻 Practice Concepts: Hands-on examples with comprehensive comments
- 🧪 Test in Playground: Immediate feedback in real React Native environment
- 🔄 Iterate: Modify examples to reinforce learning
- Foundation Building: Start with architecture and core concepts
- Skill Layering: Each section builds upon previous knowledge
- Real-world Focus: Production-ready patterns and optimization techniques
- Platform Awareness: iOS and Android considerations throughout
- 🔧 Architecture Deep-Dive: Bridge, JSI, and native integration
- 📱 Platform Awareness: iOS and Android differences throughout
- ♿ Accessibility First: Universal design principles integrated
- ⚡ Performance Oriented: Optimization techniques from the beginning
- JavaScript ES6+ fundamentals (arrow functions, destructuring, modules)
- React concepts (components, props, state, hooks, JSX)
- Basic understanding of mobile app development concepts
- Node.js 18+ installed
- Expo CLI for testing examples (
npm install -g @expo/cli) - iOS Simulator (Mac) or Android Emulator (or physical device)
- Code Editor with TypeScript support (VS Code recommended)
node --version # Should be 18+
npm --version # Should be 8+
expo --version # Should be latestCheck docs/LEARNING_INDEX.md for:
- ✅ Completed sections with direct links
- 🔄 Current progress status and next steps
- ⏳ Upcoming sections and priorities
- 📊 Comprehensive learning roadmap
- 🎯 Learning objectives and outcomes
Upon completion, you'll have mastered:
- React Native Architecture - Bridge, JSI, and runtime behavior
- Component Mastery - All core and advanced UI components
- Styling Systems - From basic styles to complex design systems
- Touch & Interaction - Gestures, animations, and user feedback
- Performance - Optimization techniques and profiling
- Cross-platform Development - iOS and Android best practices
- Accessibility - Universal design and assistive technologies
- Testing Strategies - Unit testing, integration testing, debugging
- Deployment - App store optimization and release management
- Component Architecture - Reusable, scalable component design
- State Management - Local state, context, and external libraries
- Native Integration - Bridge communication and native modules
- Performance Profiling - Memory management and optimization
We welcome contributions! This repository aims to be the most comprehensive React Native learning resource available.
Ways to Contribute:
- 🐛 Bug Reports - Found an issue with examples or documentation?
- 💡 Feature Requests - Suggest new learning topics or improvements
- 📝 Documentation - Improve explanations or add missing content
- 💻 Examples - Add new practical examples and patterns
- 🎨 Design - Improve visual presentation and learning experience
See CONTRIBUTING.md for detailed guidelines.
- React Native Team - For creating an amazing cross-platform framework
- Expo Team - For making React Native development more accessible
- Community Contributors - For sharing knowledge and improving this resource
- TypeScript Team - For bringing type safety to JavaScript development
🚀 Start your React Native mastery journey today!
Begin with React Native Fundamentals or explore the complete Learning Index.
This repository represents a comprehensive approach to React Native learning, distilled into a clear, progressive path toward production-ready mobile development skills.