React Native Training in Islamabad

📱 React Native Mobile Track

Currently available in Islamabad

---

Every modern product ships a mobile app — and if you already know React or Next.js, you are closer to building one than you think. React Native lets you write a single TypeScript codebase that compiles to fully native iOS and Android applications. Not a web app wrapped in a browser shell — real native components, real native performance, real App Store and Google Play releases.

This track is built around Expo and EAS (Expo Application Services) — the toolchain used by the majority of professional React Native teams in 2025. You will go from zero to a published, production-quality mobile application over the course of this program.

💡 Why React Native with Expo

---

The React Native ecosystem has matured significantly. Expo's managed workflow, combined with EAS Build and EAS Submit, has eliminated most of the painful native toolchain setup that used to make React Native frustrating. Today's workflow is clean, fast, and CI/CD-friendly. Here is why this stack is the right choice:

• One TypeScript codebase ships to iOS, Android, and optionally the web
• Expo SDK provides ready-to-use access to camera, location, notifications, biometrics, and 50+ device APIs — no native code required for the vast majority of apps
• EAS Build handles cloud-based native builds — no Mac required for iOS development
• EAS Submit automates App Store and Play Store submissions
• Your existing React and Next.js knowledge transfers directly — components, hooks, TypeScript, and state management patterns are identical
• Used in production by Shopify, Discord, Meta, and thousands of product companies

📚 Module Breakdown

---

Week 1 — Phase 0: Mobile Mindset & Environment Setup

Building for mobile is fundamentally different from building for the web. Screen sizes, touch interactions, offline behaviour, battery constraints, and app store review processes all demand a different way of thinking. This phase sets that foundation before writing a single component.

1. Mobile vs web development: key differences in UX, performance constraints, and platform conventions
2. iOS vs Android design language: Apple Human Interface Guidelines vs Material Design 3 — what developers need to know
3. Setting up the development environment: Node.js, Expo CLI, and EAS CLI
4. Expo Go: instant preview on physical devices without a build step
5. Android emulator setup (Android Studio AVD) and iOS simulator setup (Xcode — macOS only)
6. Project structure: understanding the Expo managed workflow and when to eject to bare workflow
7. TypeScript configuration for React Native: tsconfig, path aliases, and strict mode
8. ESLint, Prettier, and Husky pre-commit hooks for mobile projects
9. Expo Router: file-based routing for React Native (same mental model as Next.js App Router)

Week 1–2 — Phase 1: React Native Core & UI Fundamentals

React Native does not use HTML or CSS. This phase covers the native component model, layout engine, and styling system that replaces them — and how your React knowledge maps across.

1. Core components: View, Text, Image, ScrollView, FlatList, SectionList, TextInput, and Pressable
2. Flexbox in React Native: how it differs from web Flexbox and how to think in it
3. StyleSheet API: creating and composing styles, platform-specific styles, and dynamic theming
4. Dimensions API and useWindowDimensions: building layouts that adapt to any screen size
5. Safe area handling: status bar, notches, home indicators, and dynamic islands with react-native-safe-area-context
6. Platform-specific code: Platform.OS conditionals and .ios.tsx / .android.tsx file splitting
7. Custom fonts with Expo Fonts and icon libraries with Expo Vector Icons
8. Images: local assets, remote images, caching, and placeholders with expo-image
9. Building a reusable component library: buttons, cards, inputs, modals, and bottom sheets
10. NativeWind: using Tailwind CSS utility classes in React Native — bridging the web and mobile mental models
11. Dark mode and system colour schemes: useColorScheme and dynamic theming
12. Accessibility in mobile: accessible labels, roles, and screen reader support on iOS and Android

Week 2 — Phase 2: Navigation

Navigation in mobile apps is fundamentally different from web routing. Native stack navigation, tab bars, and drawers each have specific UX conventions on iOS and Android. This phase covers both Expo Router and React Navigation — the two dominant approaches.

1. Expo Router (file-based): layouts, dynamic routes, nested navigation, and route groups
2. Stack Navigator: native stack transitions, header customisation, and back gesture handling
3. Tab Navigator: bottom tab bars, badge counts, and custom tab icons
4. Drawer Navigator: side menus, gesture-based opening, and custom drawer content
5. Modal screens: full-screen modals, bottom sheet modals, and presentation styles
6. Deep linking: handling universal links (iOS) and App Links (Android) to open specific screens from URLs
7. Navigation state: passing params between screens, type-safe navigation with TypeScript generics
8. Authentication flows: navigating between onboarding, login, and main app stacks based on auth state
9. Linking API: opening phone calls, emails, maps, and external URLs from within the app

Week 2–3 — Phase 3: State Management & Data Fetching

Mobile apps have unique data challenges: offline support, background sync, optimistic updates, and cache invalidation across navigation. This phase covers the patterns and tools that handle them.

1. Local state with useState and useReducer — same as React, same patterns
2. Global state with Zustand: lightweight, TypeScript-first store management for mobile
3. TanStack Query (React Query) for mobile: fetching, caching, background refetch, and pagination
4. Infinite scroll with FlatList + TanStack Query: feed-style lists that load as the user scrolls
5. Optimistic updates: updating the UI before the server confirms, then reconciling
6. Persistent storage with AsyncStorage and MMKV (high-performance key-value store)
7. SQLite on-device with Expo SQLite: storing structured data locally for offline-capable apps
8. Offline-first patterns: detecting connectivity with NetInfo and queuing requests when offline
9. Background fetch and background sync with Expo Background Fetch
10. Secure storage: storing tokens and sensitive data with Expo SecureStore (Keychain on iOS, Keystore on Android)

Week 3 — Phase 4: Authentication & Backend Integration

Connecting your mobile app to a real backend API — with proper auth, token management, and error handling — is the core of any production app. This phase covers it end-to-end.

1. REST API integration: typed API clients with Axios and native fetch, response typing with TypeScript
2. JWT authentication: login flow, storing access and refresh tokens in SecureStore
3. Automatic token refresh: Axios interceptors that silently refresh expired tokens
4. OAuth 2.0 and social login: Google, Apple, and GitHub sign-in with Expo Auth Session
5. Apple Sign-In: mandatory for iOS apps that offer third-party login — implementation and review requirements
6. Biometric authentication: Face ID, Touch ID, and fingerprint unlock with Expo Local Authentication
7. GraphQL with Apollo Client or URQL in React Native
8. Real-time data with WebSockets and Supabase Realtime
9. File uploads: picking images and documents, uploading to S3-compatible storage with progress tracking
10. Error handling patterns: global error boundaries, API error normalisation, and user-facing error states

Week 3–4 — Phase 5: Device APIs & Native Features

What makes a mobile app feel like a mobile app — not just a website — is how it integrates with the device. This phase covers the Expo SDK modules that give you access to the hardware and OS features users expect.

1. Camera: taking photos and videos, front/rear switching, and flash control with Expo Camera
2. Image picker: selecting from gallery, cropping, and compressing with Expo Image Picker
3. Location services: foreground and background location, geofencing, and maps with Expo Location + React Native Maps
4. Push notifications end-to-end: Expo Notifications + FCM (Android) + APNs (iOS) setup, sending from your backend
5. Local notifications: scheduling reminders, badges, and notification actions
6. Haptic feedback: communicating state changes through vibration patterns with Expo Haptics
7. Sensors: accelerometer, gyroscope, barometer, and device motion with Expo Sensors
8. Barcode and QR code scanning with Expo Barcode Scanner
9. Contacts, calendar, and media library access with appropriate permission handling
10. In-app purchases: React Native IAP for subscription and one-time purchase flows
11. Permissions model: requesting, checking, and gracefully handling denied permissions on both platforms

Week 4 — Phase 6: Animations & Gestures

Native-feeling animations and gesture responses are what separate polished apps from average ones. React Native has a powerful animation and gesture system — this phase teaches you to use it.

1. Animated API: basic animations, interpolation, and parallel / sequence / stagger combinators
2. React Native Reanimated 3: worklet-based animations that run on the UI thread — 60/120fps guaranteed
3. Layout animations: animating component mount, unmount, and position changes with LayoutAnimationConfig
4. React Native Gesture Handler: pan, pinch, tap, long-press, and fling gesture recognisers
5. Swipeable list items: swipe-to-delete and swipe-to-action patterns
6. Shared element transitions: animating elements between screens (e.g. tapping a card to open a detail view)
7. Drag and drop: reorderable lists with React Native Draggable Flatlist
8. Skeleton loaders and shimmer effects: communicating loading state without spinners
9. Lottie animations: playing After Effects animations in React Native with Expo Lottie

Week 4–5 — Phase 7: Testing, Performance & App Store Deployment

The final phase takes your app from "working on my device" to "shipped to the App Store and Google Play" — covering testing, performance profiling, and the full EAS build and submission pipeline.

Testing:

1. Unit testing with Jest and React Native Testing Library: testing components, hooks, and utility functions
2. Mocking device APIs and native modules in tests
3. End-to-end testing with Maestro: writing declarative UI flow tests for iOS and Android
4. Detox (overview): native-level E2E testing for teams with complex interaction flows

Performance:

1. React Native DevTools and Flipper: inspecting network requests, state, and the component tree
2. JS thread vs UI thread: understanding the architecture and why it matters for performance
3. FlatList optimisation: getItemLayout, keyExtractor, removeClippedSubviews, and windowing
4. Avoiding re-renders: memo, useCallback, and useMemo patterns specific to mobile
5. Hermes engine: how it improves startup time and memory usage
6. Bundle size analysis: identifying and removing unused dependencies
7. App startup time: splash screens, pre-loading critical data, and deferred initialisation

EAS Build & Deployment:

1. EAS Build: configuring build profiles for development, preview, and production
2. Code signing: iOS provisioning profiles, certificates, and Android keystore management — handled automatically by EAS Credentials
3. Building for iOS without a Mac: EAS cloud builds on Apple's infrastructure
4. Internal distribution: sharing preview builds with testers via EAS and TestFlight
5. EAS Submit: automated submission to the App Store and Google Play from the CLI
6. App Store Connect setup: app metadata, screenshots, age ratings, and privacy labels
7. Google Play Console setup: app signing, release tracks (internal → closed → open → production)
8. OTA updates with EAS Update: pushing JavaScript fixes to users without waiting for store review
9. CI/CD for mobile: automating EAS builds and submissions with GitHub Actions
10. App versioning strategy: build numbers, semantic versioning, and coordinating releases across platforms

📅 Schedule & Timings

Choose one group only based on your availability. Max 5 candidates per group to ensure individual attention and hands-on support.

Weekday Groups:

• Group 1: Mon–Wed, 10 AM – 1 PM
• Group 2: Mon–Wed, 4 PM – 7 PM

Weekend Groups:

• Group 3: Sat & Sun, 10 AM – 2 PM
• Group 4: Sat & Sun, 4 PM – 8 PM

📍 Location: In-house training in Islamabad
📱 Online option may be arranged for out-of-city participants

🛠️ Tools & Technologies Covered

• Core: React Native, Expo SDK, TypeScript, Expo Router
• UI: NativeWind (Tailwind), React Native Reanimated, Gesture Handler, Lottie
• State & Data: Zustand, TanStack Query, AsyncStorage, MMKV, Expo SQLite
• Auth: Expo SecureStore, Expo Auth Session, Expo Local Authentication
• Device APIs: Expo Camera, Location, Notifications, Sensors, Haptics
• Testing: Jest, React Native Testing Library, Maestro
• Build & Deploy: EAS Build, EAS Submit, EAS Update, GitHub Actions
• Stores: App Store Connect, Google Play Console, TestFlight

✅ Prerequisites

• Solid understanding of React (components, hooks, props, state)
• Comfortable with TypeScript basics
• Familiarity with REST APIs and async/await
• No prior mobile development experience required
• No Mac required — iOS builds are handled via EAS cloud builds

🎯 Who This Is For

• React / Next.js developers expanding into mobile
• Full-stack developers who want to ship their own mobile apps or products
• Freelancers who want to offer mobile development to clients
• Engineers targeting remote mobile developer roles

💳 Course Fee & Booking

• ⌛ Duration: 5 Weeks
• 🔒 Seats: 5 only per group

👉 Click here to book via WhatsApp