React Native Mobile Development – Complete Masterclass Notes

📱 React Native Mobile App Masterclass

Cross-Platform iOS & Android Development, New Architecture (Fabric & TurboModules), JSX Primitives, React Navigation, State Management aur Native Hardware APIs ka complete guide.

Module 01

1️⃣ How React Native Works & The New Architecture

Definition: React Native Meta dwara create kiya gaya ek open-source framework hai jo JavaScript aur React ka use karke 100% native iOS (Swift/Objective-C) aur Android (Kotlin/Java) apps build karne deta hai.

Architecture Layer	Old Architecture (Bridge)	New Architecture (Modern RN)
Communication	Asynchronous JSON Bridge (Serialization bottleneck).	JSI (JavaScript Interface): C++ memory direct reference.
Rendering Engine	Legacy Shadow Tree	Fabric: Direct native UI threading with concurrent rendering.
Native Modules	Eagerly loaded at startup (Slow boot time).	TurboModules: Lazily initialized on-demand.

Module 02

2️⃣ Expo vs React Native CLI

Feature	Expo (Managed Workflow)	React Native CLI (Bare Workflow)
Development Setup	Zero setup. QR code scan karke physical phone me live run hota hai.	Requires Xcode, Android Studio, SDKs aur local build tools.
Custom Native Code	Config Plugins (EAS Build) ke zariye support karta hai.	Direct Swift/Kotlin code likhne ki 100% freedom.
Best For	Rapid prototyping, 90% modern startups aur MVP releases.	Deep hardware integration, custom C++ audio/video drivers.

Module 03

3️⃣ Core Native Primitives vs Web HTML

React Native me HTML tags (<div>, <p>, <button>) exist nahi karte. Inki jagah native platform UI widgets map hote hain:

Web HTML Tag	React Native Primitive	Underlying Native Android / iOS Widget
`<div>`	`<View>`	`android.view.ViewGroup` / `UIView`
`<p>, <span>`	`<Text>`	`android.widget.TextView` / `UITextView`
`<img>`	`<Image>`	`android.widget.ImageView` / `UIImageView`
`<button>`	`<TouchableOpacity> / <Pressable>`	Native Touch Event Dispatcher with feedback

Module 04

4️⃣ Flexbox Layout Engine & StyleSheet API

React Native Yoga C++ layout engine use karta hai. Web ke opposite, default flexDirection 'column' hoti hai:

import React from 'react';
import { StyleSheet, View, Text, Pressable } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>FresherJobsAlert Mobile</Text>
      <Pressable style={styles.button} onPress={() => alert('Pressed!')}>
        <Text style={styles.btnText}>Apply Now</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8fafc',
    justifyContent: 'center', // Along Main Axis (Vertical)
    alignItems: 'center',     // Along Cross Axis (Horizontal)
  },
  heading: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#0f172a',
    marginBottom: 16,
  },
  button: {
    backgroundColor: '#0284c7',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
  },
  btnText: {
    color: '#ffffff',
    fontWeight: '600',
  }
});

Module 05

5️⃣ React Navigation (Stack & Tabs)

Standard routing library jo mobile screens ke transitions animate karti hai:

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';

const Stack = createNativeStackNavigator();

function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="JobDetails" component={JobDetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Live Mobile Viewport & Stack Navigation Simulator

[Mobile Runtime]: Screen: HomeScreen (Active) | Stack Depth: 1 | Memory: 32MB

Module 06

6️⃣ High-Performance Lists: FlatList vs ScrollView

Agar aapke paas 5,000 items hain, toh ScrollView sabhi ko ek sath render karke mobile ko crash kar dega. FlatList sirf viewport me dikhne wale items ko memory me render karta hai (Virtualization):

<FlatList
  data={jobListings}
  keyExtractor={(item) => item.id.toString()}
  renderItem={({ item }) => (
    <View style={styles.card}>
      <Text style={styles.title}>{item.title}</Text>
      <Text style={styles.salary}>{item.salary}</Text>
    </View>
  )}
  initialNumToRender={10}
  maxToRenderPerBatch={10}
  windowSize={5}
/>

Module 07

7️⃣ Native Storage & Device APIs

// 1. Persistent Offline Key-Value Storage
import AsyncStorage from '@react-native-async-storage/async-storage';

const saveAuthToken = async (token) => {
  await AsyncStorage.setItem('@auth_token', token);
};

// 2. Hardware GPS Geolocation (Expo Location)
import * as Location from 'expo-location';

const getCurrentCoordinates = async () => {
  let { status } = await Location.requestForegroundPermissionsAsync();
  if (status === 'granted') {
    let loc = await Location.getCurrentPositionAsync({});
    console.log(loc.coords.latitude, loc.coords.longitude);
  }
};

KJA Career Matrix