Build Mobile Apps with TypeScript & React Native
Create productivity task managers and document scanner apps with practical projects. For developers learning React Native and TypeScript.
Course Description
Many developers want to build real-world mobile applications but struggle with setting up TypeScript and React Native, managing complex features like camera integration, and deploying to app stores. This course addresses those challenges directly with two hands-on projects.
You'll learn to build a productivity task manager and a document scanner app from scratch. The course includes video lessons, code-along sessions, and case studies using current 2026 tools like Expo SDK, EAS Build, and modern state management. By the end, you'll have practical skills to create, test, and deploy mobile apps.
Course Curriculum
5 sections • 18.50 hours total length
-
TypeScript Fundamentals for React Native (25m)
Review key TypeScript features like types, interfaces, and functions to write cleaner React Native code.
-
Setting Up Your Development Environment with Expo SDK (18m)
Install and configure Expo SDK for rapid development and testing on real devices.
-
Configuring React Native CLI and Emulators (20m)
Set up React Native CLI and Android/iOS emulators for a full development workflow.
-
Introduction to Functional Components (15m)
Learn the basics of functional components in React Native and why they're preferred.
-
Using Hooks: useState and useEffect (22m)
Manage component state and side effects with practical examples of useState and useEffect.
-
Building Your First App Structure (18m)
Create the initial project structure and understand the file organization in React Native.
-
Implementing Basic Navigation with React Navigation (25m)
Set up stack navigation to move between screens in your first app.
-
Testing Your First App on Emulators (12m)
Run your app on Android and iOS emulators to verify the setup and navigation.
-
TypeScript Interfaces for Component Props (18m)
Define and use interfaces to type props for React Native components, improving code reliability.
-
Using Generics in TypeScript Components (22m)
Create flexible and reusable components with generics in TypeScript.
-
Advanced Type Definitions and Utility Types (20m)
Explore utility types like Partial, Pick, and Record for better type management.
-
Mastering View and Text Components (15m)
Deep dive into View and Text for layout and typography in React Native apps.
-
Image Handling and Optimization (18m)
Work with Image component, handle local and remote images, and optimize for performance.
-
Lists and FlatList for Dynamic Data (25m)
Implement FlatList to render dynamic lists efficiently with example data sets.
-
Stack Navigation Deep Dive (20m)
Configure stack navigation with headers, params, and screen transitions.
-
Tab Navigation for Multi-Screen Apps (18m)
Add tab navigation to switch between main sections of your app.
-
Drawer Navigation for Sidebar Menus (15m)
Implement a drawer navigation for app-wide menu access.
-
Introduction to Context API (22m)
Set up Context API to manage global state across your application.
-
Setting Up Zustand for State Management (25m)
Learn Zustand as a modern alternative for simple and effective state management.
-
Comparing State Management Approaches (12m)
Evaluate when to use Context API versus Zustand based on app complexity.
-
Planning the Task Manager App Architecture (18m)
Outline the features and structure of the productivity task manager project.
-
Creating Reusable TypeScript Components: TaskItem (25m)
Build a TaskItem component with TypeScript for displaying task details.
-
Building the TaskInput Component with Validation (22m)
Develop a form component for adding tasks with input validation.
-
Implementing Data Persistence with AsyncStorage (20m)
Store task data locally using AsyncStorage for offline access.
-
Exploring Firestore Lite for Real-Time Data (18m)
Integrate Firestore Lite to sync tasks across devices in real-time.
-
Adding Task CRUD Operations (25m)
Implement create, read, update, and delete functionality for tasks.
-
Implementing Priority Flags and Categories (15m)
Add priority levels and categories to organize tasks effectively.
-
Setting Due Dates and Reminders (22m)
Integrate date pickers and notification reminders for task deadlines.
-
Designing UI with StyleSheet and Flexbox (20m)
Style the app using StyleSheet and Flexbox for a responsive layout.
-
Polishing the User Interface with Animations (18m)
Add subtle animations to enhance user experience and app feel.
-
Introduction to Document Scanning Features (12m)
Overview of what you'll build: a mobile document scanner with camera integration.
-
Setting Up expo-camera for Image Capture (25m)
Configure expo-camera to access the device camera for document scanning.
-
Handling Camera Permissions on iOS and Android (18m)
Manage platform-specific permissions for camera access in your app.
-
Implementing Real-Time Camera Preview (20m)
Display a live camera feed in your app for document alignment.
-
Capturing and Saving Images (15m)
Take photos and save them to the device storage for processing.
-
Introduction to Image Processing Libraries (22m)
Explore libraries like opencv.js or native modules for image manipulation.
-
Implementing Edge Detection for Document Boundaries (25m)
Detect document edges automatically using image processing techniques.
-
Cropping and Adjusting Perspective (20m)
Crop the scanned image and correct perspective for a flat document view.
-
Enhancing Image Quality and Contrast (18m)
Improve the readability of scanned documents with image adjustments.
-
Converting Scanned Images to PDF (22m)
Generate PDF files from scanned images for easy sharing and storage.
-
Managing File Storage and Access (15m)
Handle file permissions and organize scanned documents in the app.
-
Handling Platform-Specific Camera Behaviors (18m)
Address differences in camera APIs between iOS and Android.
-
Building the Scanning Workflow UI (20m)
Design the user interface for the scanning process, from capture to PDF.
-
Testing the Document Scanner on Multiple Devices (12m)
Ensure your scanner works across different devices and OS versions.
-
Performance Optimization Strategies (18m)
Learn key techniques to improve your React Native app's performance.
-
Memoization with React.memo and useMemo (22m)
Prevent unnecessary re-renders using memoization hooks and components.
-
Lazy Loading Components and Screens (15m)
Implement code splitting to load parts of your app on demand.
-
Profiling Your App with React Native Tools (20m)
Use profiling tools to identify and fix performance bottlenecks.
-
Introduction to Testing in React Native (18m)
Set up a testing environment and understand the importance of testing.
-
Writing Unit Tests with Jest (25m)
Create unit tests for your TypeScript functions and utilities.
-
Component Testing with React Native Testing Library (22m)
Test React Native components for correct rendering and behavior.
-
Integration and End-to-End Testing (20m)
Write integration tests and set up end-to-end testing with Detox.
-
Debugging with Flipper for Network and State Inspection (18m)
Use Flipper to debug network requests and state changes in your app.
-
Using React Native Debugger for UI Issues (15m)
Debug UI problems and layout issues with React Native Debugger.
-
Setting Up EAS Build for Production (25m)
Configure EAS Build to create production-ready builds for iOS and Android.
-
Submitting to the App Store: Current 2026 Process (22m)
Step-by-step guide to submitting your app to the Apple App Store in 2026.
-
Submitting to the Play Store: Current 2026 Process (20m)
Guide to publishing your app on Google Play Store with current requirements.
Course Details
- Duration: 18.50 hours
- Level: Adaptative
- Language: English
- Lessons: 57+ video lessons
- Categories: Programming
- Access: Lifetime access
- Device: Mobile & Desktop
- Certificate: Yes. After completion and Exam
The course is totally free. Seriously appreciated attribution
