React Native

You can write modern ES6+ JavaScript and build component-driven user interfaces using React Hooks like useState and useEffect.

1. Modern JavaScript: ES6+, arrow functions and modules90 min
   • let and const scoping
   • arrow functions
   • ES modules import/export syntax
2. Asynchronous JavaScript: promises and async/await90 min
   • Promise constructor
   • async/await syntax
   • try/catch error handling
3. React fundamentals: components and JSX120 min
   • JSX syntax rules
   • functional components
   • rendering elements
4. Props, state and the component lifecycle120 min
   • passing props
   • component state
   • lifecycle phases
5. React Hooks: useState and useEffect120 min
   • useState hook
   • useEffect dependency arrays
   • cleanup functions

Hands-on project: Build an asynchronous weather widget using fetch, promises, and React Hooks with proper error handling states.

You can set up an Expo development environment and render native mobile UI elements using core React Native components.

1. What React Native is and how it works90 min
   • bridge architecture
   • native UI threads
   • JavaScriptCore engine
2. Setting up Expo and the development environment120 min
   • expo-cli
   • Expo Go app
   • Metro bundler
3. Your first app and the project structure90 min
   • app.json configuration
   • App.js entry point
   • directory layout
4. Core components: View, Text, Image and ScrollView120 min
   • View container
   • Text typography
   • Image component
   • ScrollView container
5. Fast Refresh and debugging90 min
   • React DevTools
   • console logging
   • error overlays

Hands-on project: Initialise a multi-screen mobile layout using View, Text, Image, and ScrollView with Fast Refresh enabled.

You can style mobile applications using StyleSheet and build responsive layouts across varied screen sizes using Flexbox.

1. Styling with StyleSheet90 min
   • StyleSheet.create
   • style inheritance
   • Platform-specific styles
2. Flexbox layout in React Native120 min
   • flexDirection
   • justifyContent
   • alignItems
3. Responsive and adaptive design90 min
   • Dimensions API
   • PixelRatio
   • percentage dimensions
4. Handling different screen sizes and platforms90 min
   • Platform.OS checks
   • Platform.select
   • safe area insets
5. Custom components and reusable UI120 min
   • component composition
   • props validation
   • reusable wrappers

Hands-on project: Build a responsive dashboard layout using Flexbox that adapts cleanly to both phone and tablet aspect ratios.

You can render performant long lists, capture user input through forms, and manage modals and touch interactions.

1. Rendering lists with FlatList and SectionList120 min
   • FlatList optimization
   • keyExtractor
   • SectionList grouping
2. Handling user input with TextInput90 min
   • controlled inputs
   • keyboard types
   • secureTextEntry
3. Buttons, Pressable and touch handling90 min
   • Pressable component
   • TouchableHighlight
   • gestures
4. Forms and validation120 min
   • input state management
   • error states
   • onSubmitEditing
5. Modals, alerts and platform-specific UI90 min
   • Modal component
   • Alert.alert
   • ActionSheetIOS

Hands-on project: Build a searchable contact list using FlatList and TextInput with form validation and modal alerts.

You can implement complex app routing including stack, tab, and drawer navigators alongside secure authentication flows.

1. React Navigation setup90 min
   • @react-navigation/native
   • NavigationContainer
   • native dependencies
2. Stack navigation and passing params120 min
   • createNativeStackNavigator
   • navigation.navigate
   • route.params
3. Tab and drawer navigation120 min
   • createBottomTabNavigator
   • createDrawerNavigator
   • tab bar styling
4. Nested navigators and deep linking90 min
   • navigator nesting
   • linking configuration
   • URL schemes
5. Authentication flows90 min
   • conditional navigation
   • token persistence
   • auth guard screens

Hands-on project: Implement a protected routing flow using React Navigation with stack, bottom-tabs, and deep linking.

You can manage global application state efficiently using Redux Toolkit, Zustand, and React's Context API.

1. Lifting state and the Context API90 min
   • prop drilling
   • React.createContext
   • useContext hook
2. Custom hooks for shared logic90 min
   • extracting hooks
   • reusable logic
   • encapsulation
3. Redux Toolkit fundamentals120 min
   • configureStore
   • createSlice
   • useDispatch and useSelector
4. Zustand for lightweight state90 min
   • create store
   • hook consumption
   • middleware support
5. Choosing the right approach90 min
   • state scope
   • performance overhead
   • complexity trade-offs

Hands-on project: Migrate a multi-screen shopping cart app from Context API to Redux Toolkit with persistent slices.

You can consume external REST APIs, handle pagination and loading states, and parse JSON data securely in mobile apps.

1. Fetching data with fetch and Axios90 min
   • fetch API
   • Axios instances
   • request interceptors
2. Consuming REST APIs90 min
   • GET/POST requests
   • header configuration
   • error handling
3. Handling loading, errors and pagination90 min
   • loading spinners
   • pull-to-refresh
   • pagination offsets
4. JSON, async/await and data modelling90 min
   • JSON parsing
   • data sanitization
   • TypeScript interfaces
5. React Query overview60 min
   • caching server state
   • background refetching
   • useQuery hook

Hands-on project: Build an infinite-scroll news reader app fetching paginated data from a public REST API using Axios.

You can persist user data locally using AsyncStorage, MMKV, and SQLite, and store sensitive credentials securely.

1. AsyncStorage for key-value data90 min
   • setItem
   • getItem
   • JSON serialization
2. MMKV for fast storage90 min
   • react-native-mmkv
   • synchronous reads
   • performance benchmarks
3. SQLite for structured data90 min
   • expo-sqlite
   • SQL queries
   • database migrations
4. Caching and offline-first patterns60 min
   • NetInfo monitoring
   • local cache sync
   • queueing writes
5. Securely storing tokens60 min
   • SecureStore API
   • encrypted storage
   • credential management

Hands-on project: Implement an offline-first notes app using MMKV and secure token storage with Expo SecureStore.

You can integrate Firebase Authentication, Cloud Firestore, Cloud Storage, and push notifications into React Native apps.

1. Connecting Firebase to a React Native app90 min
   • @react-native-firebase/app
   • google-services.json
   • GoogleService-Info.plist
2. Authentication: email, Google and phone120 min
   • signInWithEmailAndPassword
   • Google Sign-In
   • auth state listener
3. Cloud Firestore: real-time data120 min
   • collection references
   • onSnapshot listeners
   • document queries
4. Cloud Storage for files and images90 min
   • uploadBytesResumable
   • getDownloadURL
   • storage references
5. Push notifications with Firebase Cloud Messaging90 min
   • FCM tokens
   • background handlers
   • local notifications

Hands-on project: Build a real-time chat application with Firebase Auth, Cloud Firestore synchronization, and Cloud Messaging notifications.

You can access native device hardware like cameras and location services, and build fluid animations with Reanimated.

1. Using Expo modules and native APIs90 min
   • expo modules API
   • linking native modules
   • config plugins
2. Camera, image picker and permissions90 min
   • expo-camera
   • expo-image-picker
   • permission requests
3. Location and maps90 min
   • expo-location
   • react-native-maps
   • marker coordinates
4. Animations with the Animated API and Reanimated60 min
   • Animated library
   • react-native-reanimated
   • worklets on UI thread
5. Gestures and micro-interactions60 min
   • react-native-gesture-handler
   • pan gesture
   • spring physics

Hands-on project: Build a geotagged photo capture app utilizing device camera permissions, location services, and shared element transitions.

You can add static typing with TypeScript, test components with Jest, and build production apps using Expo EAS Build.

1. Adding TypeScript to React Native90 min
   • tsconfig.json
   • typing component props
   • navigation types
2. Project structure and clean architecture90 min
   • feature-based folder structure
   • separation of concerns
   • service layers
3. Testing with Jest and React Native Testing Library120 min
   • jest configuration
   • render hook testing
   • fireEvent simulations
4. Building with Expo EAS Build120 min
   • eas.json profiles
   • cloud builds
   • credentials management
5. Publishing to the App Store and Play Store90 min
   • App Store Connect submission
   • Google Play Console upload
   • OTA updates with EAS Update

Hands-on project: Configure TypeScript, write unit tests for custom hooks with Jest, and generate production binaries via EAS Build.

You can diagnose a slow React Native screen and ship a fix without an app-store round trip.

1. Finding the bottleneck90 min
   • Flipper and the profiler
   • JS vs UI thread
   • Re-render tracing
2. Fixing common slowness90 min
   • FlatList virtualisation
   • memo and useCallback
   • Image caching
3. Startup and engine90 min
   • Hermes bytecode
   • Bundle splitting
   • Measuring cold start
4. Crash reporting and OTA90 min
   • Symbolicated stack traces
   • Source map upload
   • Staged OTA rollout

Hands-on project: Profile a janky list in the capstone and fix it with correct list virtualisation and memoisation, enable Hermes and report the startup improvement, wire crash reporting with source maps, and ship an OTA update to a staged rollout.

You can design, build, test, and publish a complete production-ready cross-platform mobile application to both app stores.

1. Plan and design a full-featured cross-platform app90 min
   • wireframing in Figma
   • feature scoping
   • architecture planning
2. Build it: UI, navigation, state, APIs and Firebase180 min
   • scaffolding project
   • integrating state and navigation
   • connecting backend services
3. Add native features, animations and polish120 min
   • camera and location integration
   • reanimated transitions
   • performance profiling
4. Build with EAS and publish to both stores120 min
   • final testing
   • EAS production build
   • store listing assets
5. Portfolio, GitHub, mock interviews and career prep90 min
   • GitHub README polish
   • mobile developer interview questions
   • mock interview practice

Hands-on project: Ship a fully functional e-commerce or utility app integrating authentication, local storage, REST APIs, push notifications, and store deployment.