React Native with TypeScript

✅ Module 1: Getting Started

Learning Goals:

• Understand what React Native is and why it's useful.

• Learn how TypeScript enhances the development experience.

• Set up a working development environment.

Topics Covered:

• Introduction to React Native and Expo

• Differences between ReactJS and React Native

• Benefits of using TypeScript

• Installing Node.js, npm/yarn

• Installing Expo CLI and VS Code

• Running the first app using npx create-expo-app

Hands-on Activity:

• Create and run a “Hello World” app on an Android/iOS emulator or physical device.

Real-World Use Case:

A developer sets up Expo, creates a new project MyFirstApp, and previews it live on their phone using the Expo Go app.

---

✅ Module 2: TypeScript Fundamentals (For Beginners)

Learning Goals:

• Understand TypeScript basics and how it helps catch errors early.

• Learn to write typed variables, functions, and objects.

Topics Covered:

• Basic types: string, number, boolean, any, void, array, object

• Type aliases and unions: type ID = string | number

• Interfaces: interface User { name: string; age: number }

• Function parameter types and return types

• Optional and default parameters

Hands-on Activity:

• Create a function that greets a user with typed parameters.

• Define a typed list of products or users.

Real-World Use Case:

Typing props of a button component:

tsCopyEditinterface ButtonProps {
  title: string;
  onPress: () => void;
}

---

✅ Module 3: React Native Core Concepts

Learning Goals:

• Master fundamental components and layout systems in React Native.

• Learn how navigation and styling work.

Topics Covered:

• Core components: View, Text, Image, TextInput, ScrollView, Button, TouchableOpacity

• Flexbox layout system

• Styling with StyleSheet

• Platform-specific code (Platform.OS)

• SafeAreaView and StatusBar

• Using react-navigation (Stack, Tab, Drawer)

Hands-on Activity:

• Create a simple profile screen using layout components.

• Add navigation between Home and Profile screens.

Real-World Use Case:

Creating a mobile login UI that adapts to both iOS and Android with styled inputs and buttons.

---

✅ Module 4: React Native + TypeScript Integration

Learning Goals:

• Learn how to combine React Native and TypeScript effectively.

• Use TypeScript for component props, state, and functions.

Topics Covered:

• Typing useState and useEffect hooks

• Creating reusable typed components

• Using enums, generics, and type guards

• Prop drilling and context typing

• Handling API responses with typed interfaces

Hands-on Activity:

• Create a UserCard component with typed props.

• Use useState<User[]> and map through it.

Real-World Use Case:

Displaying a list of users from a backend API with proper type safety and error handling.

---

✅ Module 5: Navigation & Screen Management

Learning Goals:

• Build multi-screen mobile apps with smooth navigation.

Topics Covered:

• Installing react-navigation

• Setting up StackNavigator, TabNavigator, DrawerNavigator

• Passing data between screens

• Type-safe navigation using @react-navigation/native with TypeScript

• Deep linking and route parameters

Hands-on Activity:

• Build a three-screen app with Home, Details, and Settings.

• Pass user data from Home to Details screen with proper typing.

Real-World Use Case:

Tapping on a product in a list opens the detailed view with full product data.

---

✅ Module 6: API Integration with Axios + TypeScript

Learning Goals:

• Connect your app to real APIs with secure, typed requests.

Topics Covered:

• Installing and configuring Axios

• Creating services to fetch/post data

• Defining API response interfaces

• Error handling using try-catch blocks

• Using async/await with fetch and Axios

Hands-on Activity:

• Connect to a mock API like JSONPlaceholder or FakeStoreAPI

• Display a list of posts or products

Real-World Use Case:

Fetching a list of products and displaying them with price and image in a grid layout.

---

✅ Module 7: Forms and Input Handling with TypeScript

Learning Goals:

• Create user-friendly forms and validate them properly.

Topics Covered:

• Controlled vs uncontrolled components

• Form handling with react-hook-form

• Integrating form validation with yup

• Type-safe form inputs

• Managing form state and submitting

Hands-on Activity:

• Create a Login and Registration screen with validation

• Show error messages on incorrect input

Real-World Use Case:

Validating email/password inputs and displaying API errors during login.

---

✅ Module 8: Redux Toolkit with TypeScript

Learning Goals:

• Manage app-wide state using Redux in a typed and scalable way.

Topics Covered:

• Redux Toolkit setup

• Creating slices, actions, and reducers

• Typing store, state, and dispatch

• Using useSelector and useDispatch with hooks

• Async thunks for API calls

Hands-on Activity:

• Build a cart system for an e-commerce app

• Add and remove items using Redux state

Real-World Use Case:

Persisting user login or shopping cart across different screens.

---

✅ Module 9: Theming, Styling, and Responsive UI

Learning Goals:

• Make your app visually appealing and adaptable to different screen sizes.

Topics Covered:

• Centralized theme management

• Dark/light theme toggling

• Responsive design using Dimensions & react-native-responsive-fontsize

• Using UI libraries: NativeBase / React Native Paper / Tailwind

Hands-on Activity:

• Create a reusable Button or Card component with theming support

Real-World Use Case:

Switching between light and dark mode based on device settings.

---

✅ Module 10: Testing and Debugging

Learning Goals:

• Ensure your app is bug-free and production-ready.

Topics Covered:

• Debugging with Flipper and React DevTools

• Writing unit tests with Jest

• Testing components with React Native Testing Library

• Type-safe test mocking

Hands-on Activity:

• Test a basic Button component for clicks and rendering

Real-World Use Case:

Preventing regressions by testing login and registration logic.

---

✅ Module 11: Deployment & Publishing

Learning Goals:

• Learn how to deploy your app to users worldwide.

Topics Covered:

• Preparing builds with Expo or EAS Build

• Generating Android APK or AAB

• Publishing to Google Play Store

• App Store deployment (basic overview)

• Versioning, icons, splash screens

Hands-on Activity:

• Build a signed APK for testing on an Android device

Real-World Use Case:

Building and uploading your app to the Google Play Console for beta testing.

---

✅ Final Project & Capstone

Goal:
Apply everything you've learned to build a real-world app.

Examples:

• A recipe app with search, filters, and favorites

• A todo/task management app with drag and drop

• A weather app that pulls API data

Deliverables:

• App hosted on Expo or built APK

• Source code in GitHub

• Presentation with code walkthrough