Introduction to React Native

What is React Native?

 React Native is a framework that allows you to build real native mobile apps for iOS and
Android.
 These apps can be distributed through App Stores and used on actual devices.
 It is based on React.js, hence the name “React Native”.

React.js Overview
 React.js is a JavaScript library for building user interfaces, mainly for web development.
 Originally built for the web environment.
 React.js alone is platform-agnostic (doesn't depend on a platform).
 For the web, you use React DOM, a separate library, which bridges React with the browser.
o React (core) = platform-independent logic (state, components)
o React DOM = platform-specific rendering for web (e.g., HTML elements)

How React Native Relates to React.js

 React Native is like React DOM, but instead of targeting browsers, it targets mobile
platforms (iOS and Android).
 Provides special React components specifically for mobile development.
 Uses JSX, like React.js, for creating component-based UIs.

How React Native Works

 Comes with built-in components (like <View>, <Text>, <Image>) which are used in JSX.
 These components are compiled into native UI elements for each platform.
 Compilation and bridging is handled automatically by React Native.
 Provides access to native device APIs (e.g., camera, location) via JavaScript.
Key Takeaways
 React Native is a bridge between JavaScript/React code and native mobile platforms.
 To use React Native effectively, you need a solid understanding of React.js.
 You write React code, enhanced with React Native-specific components and APIs, to build
cross-platform native apps.

How React Native Works – Under the Hood

🧠 React Native Code Structure

 In React Native, you write components in JavaScript/JSX, similar to how you'd write for the
web using React.js.
 Example: A React Component defined using an arrow function or the function keyword.
 You can also use class-based components, though functional components are more common
today.
🧩 JSX and Native Compilation

 JSX elements in your code (like <View> and <Text>) are React Native-specific components.
 These are not HTML tags (like <div>, <span>, etc. in the web).
 These components are compiled into native UI components for:
o Android (e.g., TextView, EditText)
o iOS (e.g., UILabel, UITextField)
📊 Component Mapping (Web vs Native)
Purpose Web (React DOM) Android (Native) iOS (Native) React Native Component
Text Input <input> EditText UITextField <TextInput />
Container Element <div> ViewGroup UIView <View />
Text Display <p> / <span> TextView UILabel <Text />

 React Native handles the mapping and compilation of these reusable components to their
respective native equivalents automatically.

⚙️What Gets Compiled and What Doesn’t?

 ✅ JSX Elements (UI Components like <View>, <TextInput>) are compiled to native UI code.
 ❌ JavaScript logic (functions, conditionals, state management, etc.) is not compiled.

🧵 How JavaScript Logic Works in React Native

 React Native runs a JavaScript thread inside the native app.

 This thread is managed by React Native and executes all the JS logic.
 The native app includes a JavaScript engine (e.g., Hermes or JavaScriptCore) to run this JS
code.
🔁 Bridge Communication

 React Native sets up a bridge between:

o The JavaScript thread (your app logic)
o The Native platform (Android/iOS APIs and UI elements)
 This bridge allows:
o JS logic to control native UI and device features (e.g., camera, sensors).
o React Native to update the native UI based on JS changes.

✅ Summary: React Native Workflow

1. Write UI using React Native components in JSX.

2. These components are compiled to platform-specific UI elements.
3. Business logic (JS) runs in a JavaScript thread inside the app.
4. A communication bridge connects JS logic to native platform code.

📝 Note: You don’t need to deeply understand the internals to start building apps, but having this
foundational knowledge helps in debugging and writing better React Native apps.

📘 Getting Started with React Native

✅ Step 1: Visit the Official Website

 Go to reactnative.dev, the official React Native documentation and resource hub.

 It's not only great for getting started but also useful for deep-diving into advanced topics
throughout your learning journey.

🧱 Development Environment Setup

 On the homepage, click “Get Started” to navigate to the Setup Environment guide.
 This page provides instructions on how to configure your computer to create and run React
Native apps.
⚙️Two Main Ways to Start a React Native Project

1️⃣ Expo CLI (Recommended)

 Expo CLI is the default and recommended way to start developing React Native apps.
 It offers a managed workflow, which simplifies everything:
o Project creation
o Development
o Access to native device features (like camera, location, sensors)
o Running on simulators and real devices
o Building apps for app stores
 Why use Expo?
o Beginner-friendly with less setup.
o Requires no Android Studio or Xcode installation at the start.
o Cross-platform tools make it easier to test and debug.
o Comes with many pre-built libraries and APIs (e.g., camera, notifications, location,
sensors).
o Free to use (with optional paid services).
o Can eject anytime: Switch to React Native CLI when more customization is needed.

🎯 Conclusion: Great for fast development, smaller teams, MVPs, and even full production apps.

2️⃣ React Native CLI

 This is the core toolchain maintained by the React Native team and community.
 Provides a barebones environment, giving full control and flexibility.
 Best suited when:
o You need to integrate custom native modules (Java, Kotlin, Objective-C, Swift).
o You are working in larger-scale apps with heavy platform-specific customizations.
 Challenges with React Native CLI:
o Requires manual configuration.
o Needs tools like Android Studio and Xcode.
o You must install and manage device simulators manually.
o Integrating features like camera or notifications requires writing and managing native
code manually.

🎯 Conclusion: Best for advanced use-cases, tight native integrations, or long-term scalable native app
projects.
🔄 Switching Between Expo and React Native CLI

 One of Expo's biggest advantages:

o You can eject (switch from Expo to React Native CLI) anytime.
o This allows you to start simple with Expo and move to advanced native code handling
when needed.

📌 Tip: Start with Expo → Eject if needed later → Get full native access

🚀 Why This Course Uses Expo

 Simpler and faster to set up
 Easier to follow along for beginners
 Includes essential APIs and components out-of-the-box
 Reduces unnecessary complexity for learning core React Native concepts

🧠 Expert Insight – CLI Tools Comparison

Feature Expo CLI React Native CLI
Ease of Setup ✅ Very easy ❌ Manual configuration required
Access to Native APIs ✅ Through Expo modules ✅ Full access, but more manual work
Build and Deploy Tools ✅ Provided via Expo ⚠️Requires extra tools
Flexibility ⚠️Slightly restricted (initially) ✅ Full native control
Eject Option ✅ Yes ❌ Not applicable (already native)
 Feature Expo CLI React Native CLI
Beginners, MVPs, rapid Advanced apps, full native
Best for
development customization
Required Dev Tools Just Node.js + Expo Go App Android Studio, Xcode, SDKs

🧑‍🏫 Key Takeaways

 Expo is the easiest and fastest way to start building React Native apps.
 React Native CLI offers more power but comes with more complexity.
 You only need one CLI tool—either Expo or React Native CLI.
 You can always start with Expo and switch later if your app requires more native-level
integration.
 This course follows the Expo-first approach to simplify your learning curve while keeping
options open for the future.

🧱 Setting Up a React Native App Using Expo

🔗 Step-by-Step Guide Based on Official Docs

React Native's official site (reactnative.dev) provides a section under the "Expo" tab that walks you
through the process of creating a new project using Expo CLI.

However, the instructor slightly adjusts this process to make it simpler and more beginner-friendly.
🔧 Installing Node.js – A Critical Prerequisite

❓ Why Do You Need Node.js?

 Node.js is a JavaScript runtime that runs JavaScript outside of the browser.

 You won’t directly write Node.js code in this course, but:
o Expo CLI relies on Node.js internally to function.
o It enables the use of the npx command (used to execute Node-based packages without
installing them globally).

📥 How to Install Node.js:

 Visit: https://nodejs.org
 Download the LTS version (Long-Term Support) for better stability.
 Install it like a regular application.

⚙️Creating a New React Native Project with Expo

🧑‍💻 Step 1: Open the Terminal (or Command Prompt)

Use your OS terminal (Command Prompt for Windows, Terminal for macOS/Linux).

📂 Step 2: Navigate to a Folder

Use the terminal to go to the folder where you want your new project to be created.

For example:

cd Desktop/projects

🛠️Step 3: Run the Project Creation Command

Here’s the full command:

npx create-expo-app --template blank rnCourse

📌 Explanation:

 npx: Executes the Expo project creation tool.

 create-expo-app: The Expo CLI command to create a new app.
  --template blank: Creates a minimal project with no extra complexity.
 rnCourse: The project name (can be anything; this becomes the folder name).

🚫 Why Use --template blank?

 Without it, the project defaults to TypeScript, which may be overwhelming if you're new.
 The blank template helps you learn React Native concepts from scratch, step by step.

🌐 Optional: Explore More on Expo

 Visit: https://expo.dev
 This is the official site by the Expo team.
 It includes:
o Expo documentation
o CLI commands
o SDK APIs (e.g., camera, push notifications)
o Build and publish tools

🔍 You’ll revisit this site often during development.

⏳ Project Creation Process

What Happens When You Run the Command?

 The CLI downloads and installs:

o All required dependencies
o Boilerplate project structure
 It sets up the folder with essential files and folders.

Note: It may take a few minutes depending on your internet speed and system performance.

📁 Next Step After Project Creation

Once the setup is complete, you'll see final instructions like:

 Navigate into the new folder:

  cd rnCourse

 Start the app:

 npx expo start

However, in this course:

 You’ll first explore the project structure and learn what each file does before running the
app.
 You will ignore the web platform and focus only on Android and iOS (since React Native is
primarily for mobile).

🎯 Instructor’s Focus for This Course

 Avoid web-specific development.
 Skip TypeScript for now.
 Focus on pure React Native + Expo setup.
 Learn each piece of the project setup before diving into app execution.

📘 Summary: What You’ve Learned So Far

Concept Description
Node.js Required for running JavaScript tooling like Expo CLI
npx Executes packages without installing globally
Expo CLI Tool to create/manage React Native apps easily
--template blank Starts with minimal setup for better learning
Project Name (e.g., rnCourse) Used to name both the app and the project folder
expo.dev Official Expo platform for tools, docs, and services
Folder Exploration Essential step before running your first app
Focus Platforms iOS & Android (Web development is excluded in this course)

🚀 Setting Up & Exploring Your React Native Project

🧰 Opening the Project in a Code Editor

Before running the newly created Expo-based React Native app, it’s important to open and
understand the codebase.

✅ Recommended Editor: Visual Studio Code (VS Code)

 A free, powerful, and customizable code editor.

 Available for all platforms: Windows, macOS, Linux.
 Offers:
o Syntax highlighting
o Extensions (React Native Tools, Prettier, ESLint)
o Built-in terminal
o Git integration

🔧 Setup Steps:

1. Download VS Code from: https://code.visualstudio.com

2. Install it on your system.
3. Open it, and close the welcome screen if it appears.
4. Go to:
o File > Open Folder (Windows)
o File > Open (macOS)
5. Navigate to your React Native project folder (e.g., rnCourse) and open it.

🎨 Customizing VS Code (Optional):

 Go to View > Appearance to show/hide panels (Sidebar, Status bar, etc.)

 Set theme via: Preferences > Color Theme (e.g., Dark+, Light+, etc.)

📁 Understanding the Project Structure

Once the project is open in VS Code, you'll see various files and folders. Here's what they are and why
they matter:

🗂️Top-Level Folders and Files:

1. .vscode/ – (Ignore)

 Stores editor settings like extensions or formatting rules.

  Not needed for the app logic.

2. expo-shared/ – (Ignore for now)

 Stores internal Expo metadata (e.g., preview configurations).

 Automatically managed by Expo.

3. assets/ – Important

 Used for storing images, icons, sounds, and fonts.

 For example:
o App icon
o Splash screen
o In-app images

4. node_modules/ – Important (internally)

 Auto-generated folder that holds all installed packages/libraries.

 Managed by npm install.
 Do not manually change anything here.

📄 Important Files:

1. package.json – 🔧 Project Manifest File

 Lists all dependencies (libraries) used in your project.

 Includes important packages like:
o expo
o react
o react-native
o react-dom
o react-native-web (used only for web builds)

🔎 Why is expo here?

 Expo is not just a CLI tool — it's also a JavaScript library that provides:
o Camera
o Location services
o Sensors
o Push notifications
o And more...

React Native Web & react-dom are only relevant if you build for web, which this course ignores.
2. package-lock.json – 📦

 Auto-generated by npm.
 Ensures that the same dependency versions are installed across machines.
 Don’t edit manually.

3. babel.config.js – ⚙️Transpiler Configuration

 Tells Babel how to transform modern JavaScript (like JSX, ES6) into older syntax compatible
with mobile devices.
 Only change it if you know how Babel works.
 Leave it as-is for now.

4. app.json – 🛠️Expo Configuration File

 This file is read by Expo when running or building the app.

 You can configure:
o App name
o Icon
o Background color
o Splash screen
o Permissions
o Build behavior (Android/iOS)

You’ll revisit this file throughout the course to make adjustments for publishing or tweaking app
behavior.

5. App.js – 🧠 Main Code Entry Point

 This is the main component where your app starts running.

 Contains:
o React component
o JSX syntax
o react-native components (e.g., <View>, <Text>)
o Styling logic
📦 Provided Code for Consistency:

 Since this file may vary depending on versions, the instructor provides a downloadable
version of App.js to ensure you and the instructor have identical starting code.
 Replace your App.js file with the one given to stay aligned.

🎨 A Note on Styling
 Styling in React Native is not the same as web CSS.
 You'll see a special object-based style syntax (like JavaScript objects).
 Example:
 const styles = StyleSheet.create({
 container: {
 flex: 1,
 backgroundColor: '#fff',
 alignItems: 'center',
 justifyContent: 'center',
 },
 });

 This will be explained in detail later in the course.

📱 Previewing Your React Native App using Expo

💡 Why Previewing is Important

In web development with React, we preview apps in a browser to see real-time changes as we code.

In React Native, we want the same workflow:

 Write code.
 Instantly preview it.
 Make changes and see them reflect live.

This is essential for fast development and debugging.

⚙️Expo Makes Previewing Easy

With Expo, you don’t need to set up emulators or Android Studio or Xcode (initially).

Instead, you can:

 Use a real Android or iOS device.

 Use the Expo Go app to preview your app live.

📲 Step-by-Step: How to Preview Your App on a Real Device

✅ Requirements:

 A smartphone (Android or iPhone).

 The Expo Go app installed on your device.
 The Expo project opened in a code editor like VS Code.

🔌 Step 1: Install Expo Go App

📍On iPhone or Android:

1. Open the App Store or Google Play Store.

2. Search for Expo Go.
3. Install the app developed by Expo (same creators of Expo CLI).

This app is like a lightweight mobile simulator that runs your Expo-powered apps.

🖥️Step 2: Start the Expo Development Server

Back in your computer (where the code lives):

1. Open VS Code (or your terminal).

2. Use the integrated terminal:
o Menu > Terminal > New Terminal
o Or use shortcut (Ctrl+` on Windows / Cmd+` on Mac)
3. Run the following command:

npm start
This starts the Metro Bundler, a development server provided by Expo.

🌐 Step 3: What Happens When You Run npm start

 Expo builds your app code into a JavaScript bundle.

 It generates a QR code in your terminal.
 A browser tab opens with the Expo developer tools, showing logs, QR code, and options.

📷 Step 4: Connect Your Phone

👇 Android:

 Open the Expo Go app.

 Tap “Scan QR Code” (built-in scanner).
 Point your camera at the QR code in terminal or browser.
 App will load almost instantly.

🍏 iPhone:

 Expo Go doesn't have a QR scanner built-in.

 Instead:
o Open your iPhone Camera app.
o Point it at the QR code.
o Tap the Safari link that appears.
o It will open in Expo Go (if installed).

💡 Remember to grant permissions if the app asks (e.g., access to camera or files).

📱 Step 5: App Runs on Your Phone!

 You’ll see your React Native app loaded inside the Expo Go app.
 It simulates how it would run natively.
🔁 Live Reload & Hot Reloading

Now comes the magic of React Native + Expo:

1. Make changes in your App.js, like:

<Text>Hello, World!</Text>

2. Save the file.

3. Instantly see the change reflected on your phone without restarting.

This is called Fast Refresh, and it:

 Speeds up development.
 Helps you test UI/UX immediately.
 Ensures a smooth coding workflow.

🧠 Key Concept: JavaScript Bundle

When Expo runs your app:

 It doesn’t send raw JS files to your phone.

 Instead, it compiles and sends a bundle of JavaScript code.
 The Expo Go app interprets and executes this bundle on your phone using a built-in
JavaScript engine.

This is why:

 The app doesn’t need to be rebuilt from scratch every time.

 You can make updates on-the-fly while the app is running.

✅ Summary – Why This Workflow is Awesome

Feature Benefit
Expo Go App Lets you preview apps on real devices without complex emulator setup
Live Preview See code changes instantly on your phone
QR Code Scanning Easy connection between computer and phone
Fast Refresh Updates UI live without restarting the app
Real Device Testing Lets you test on actual screen size, performance, and native feel
🔥 Pro Tips
 You can shake your phone to access the Expo Developer Menu (reset cache, enable hot
reloading).
 Use npm run android or npm run ios later if you decide to test with emulators.
 Enable auto-save in VS Code to speed up development further.
 Explore Expo Dev Tools in the browser — it shows logs, errors, and connection status.

🚀 Getting Started with React Native + Expo + Simulators

📦 Recap: Quick Start with Expo

 Expo is a framework and platform that streamlines React Native development.

 You can easily:
o Create a project (npx create-expo-app)
o Preview your app using the Expo Go app on your real device.
 This gives you fast feedback, similar to live reloading in the browser for React Web apps.

📱 Using a Real Device (iOS or Android)

Step-by-Step:

1. Install Expo Go app from App Store or Play Store.

2. Start your React Native app on your computer with:
3. npm start

4. A QR Code will appear in your terminal and browser.

5. Scan it with:
o Android: built-in scanner inside Expo Go.
o iPhone: use the Camera app, open the link via Safari.

Now your React Native app runs live on your phone. ✅

💻 Want More? Use Simulators!

❓Why Use Simulators?

 You may want to test your app on:

o Both iOS and Android.
o Different screen sizes or OS versions.
 Simulators are virtual devices that run on your computer and act like real phones.

🧰 Android Emulator Setup

✅ Prerequisites:

1. Go to: developer.android.com/studio
2. Download and install Android Studio (works on Windows, macOS, and Linux).

⚠️Android emulators work on all OS platforms, unlike iOS simulators (which are macOS only).

📱 Steps to Set Up Android Emulator:

1. Open Android Studio.

2. On the Welcome Screen, go to More Actions → Virtual Device Manager.
3. Click Create Device.
4. Choose a preset like Pixel 5.
5. Choose an Android version (preferably latest, e.g., API 32).
6. Keep default settings → Finish.

✅ This creates a virtual device (emulator).

7. Click the Play button ▶️to launch the emulator.

📝 This launches a fully functional Android phone environment.

⚠️Emulator Must Have Play Store!

 Expo needs the Play Store icon in the emulator template.

  It installs the Expo Go app automatically for you.
 If it’s missing, recreate the emulator using a template with Play Store support.

🍏 iOS Simulator Setup (macOS Only)

❗ Important Limitation:

 Xcode is macOS-only — no support for Windows or Linux.

 iOS emulators only run on Apple hardware (because of Apple’s policies).

🛠️Steps:

1. Open App Store on your Mac.

2. Search and install Xcode.
3. Open Xcode.
4. Go to: Xcode > Preferences > Locations tab.
5. Select the latest version under Command Line Tools.

This step is critical — if not done, the simulator won’t work correctly.

📱 Launch iOS Simulator

1. Go to /Applications/Xcode.app → Right Click → Show Package Contents.

2. Navigate to:
3. Contents > Developer > Applications

4. Open the Simulator.app from here.

5. Choose a device (e.g., iPhone 13).

✅ Now you have an iOS device simulator running on your Mac.

🚀 Run App on Emulator or Simulator via Terminal

Terminal Commands (from your Expo project):

 npm start → Start the Expo dev server.

  Press:
o A → Run on Android Emulator
o I → Run on iOS Simulator

Expo will detect the emulator or simulator and:

 Install Expo Go
 Launch your React Native app inside it automatically.

💡 Preview Multiple Devices at Once

 Run npm start once.
 Then press:
o A → Launch on Android
o I → Launch on iOS (macOS only)

You can now test and preview your app simultaneously on:

 Real device
 Android emulator
 iOS simulator (if on Mac)

🔁 Live Reloading and Manual Reloading

✅ Automatic (Fast Refresh):

 Change your code (e.g., edit App.js)

 Save → Changes reflect instantly on all connected devices.

🔄 Manual Reload:

 Press R in the terminal running npm start to reload manually.

🧠 Development Logic Recap

Step Description
npm start Starts Metro bundler + Expo Dev Server
 Step Description
Real Device (QR code) Use Expo Go app to scan and view app instantly
Android Emulator (A) Runs app on Android Emulator with Expo Go automatically
iOS Simulator (I) Runs app on iOS Simulator (macOS only)
This watches your code and updates builds — don't close unless
Keep terminal running
restarting
Emulators need Play Store Allows automatic Expo Go app installation

🧪 Troubleshooting Emulator Issues

 ❌ Emulator doesn’t show app or fails to run?
o Restart the emulator.
o Ensure Expo Go is installed (via Play Store).
o Try pressing A again after restarting npm start.
 ❌ Play Store not found?
o Create a new emulator template with the Play Store icon.
 🔁 App not updating?
o Check if the Metro server is still running.
o Use npm start again if needed.
o Ensure Fast Refresh is enabled (shake device > enable in developer menu).

🛠️Final Setup You Should Reach

You should now be able to:

 Run the React Native app:

o On Android Emulator
o On iOS Simulator (macOS)
o On real physical devices
 See instant changes with live reload.
 Debug and develop with full confidence.

🧭 Next Steps (Expert Path)

 Explore React Navigation (for multi-screen apps)
 Learn about Custom Components
 Understand State Management (Context API / Redux)
  Dive into APIs & Networking with fetch or axios
 Setup EAS Build to create .apk / .ipa files (for publishing apps)

Would you like help setting up any of the following?

 Android Studio on your machine?

 Xcode installation and first emulator?
 Fixing common Expo errors?

Just let me know, and I’ll walk you through it step-by-step.

🔰 React Native Course Overview (by Maximilian)

🎯 Course Structure & Goals

The course is designed to take you from zero to advanced React Native developer by progressively
covering:

1. React Native Basics & UI Building

2. Navigation Between Screens
3. State Management with Context API & Redux
4. User Input & HTTP Requests
5. Advanced Features (e.g., camera, location, maps, push notifications)
6. Publishing Apps to App Stores

🧱 1. Initial Setup – What You’ve Learned So Far

 Getting Started with Expo & React Native.
 Running the app on:
o Real devices via Expo Go.
o Emulators/simulators on local machines (Android Studio or Xcode).
 Keeping the dev server (npm start) running to enable live preview and auto reload.
📚 2. What’s Coming Next? Course Breakdown

✅ React Native Essentials

You will begin with:

 Building User Interfaces (UIs) with React Native components like:

o <View>, <Text>, <Button>, <ScrollView>, etc.
 Styling UIs using the StyleSheet API (React Native’s CSS-like styling).
 Creating responsive layouts using:
o Flexbox
o Percentage-based width/height
 All taught through real projects to reinforce learning.

✅ Navigation

 Implementing multi-screen navigation:

o Stack navigation (like pushing a screen onto a stack)
o Drawer navigation (side menus)
o Bottom tab navigation
 Understanding transitions and animations while switching screens.

🧠 3. Prerequisites You Need

This is not a beginner JavaScript or React.js course, so you must:

 Understand JavaScript basics (variables, functions, arrays, objects, ES6+ syntax)

 Be comfortable with React.js concepts:
o Components
o Props & State
o JSX
o Hooks (useState, useEffect)

🧩 If you need a refresher:

There are two optional refresher sections at the end of the course covering:

 JavaScript essentials
 React.js basics

These do not replace full courses, but they help if you’re rusty.
🚀 4. Advanced React Native Concepts
After mastering the fundamentals, you'll learn:

🔄 State Management

 Using Context API to manage global state

 Implementing Redux for scalable, robust state handling

📲 Native Features

You’ll build advanced apps that integrate:

 Device Storage
 Camera Access
 User Location & Maps
 Push Notifications

All of these require bridging between JavaScript code and the native device APIs (using libraries
like expo-camera, react-native-maps, etc.)

📦 5. Publishing Apps
You’ll learn how to:

 Build production-ready versions of your app.

 Publish them to:
o Google Play Store (Android)
o Apple App Store (iOS)

Also covers use of cloud build services if you're not on a Mac (since iOS builds require macOS due
to Apple limitations).

🧑‍💻 6. How to Learn Effectively (Pro Tips)

✅ Watch & Control Videos

 Use speed controls to learn at your pace.

  Pause and experiment with code as you go.
 Rewatch unclear parts or even full sections.

✅ Code Along!

 Don’t just watch, build the apps with the instructor.

 Try writing code before watching him do it.
 Add extra features to test your understanding.
 This kind of active learning helps you retain deeply.

✅ Use Course Resources

 You’ll get:
o Code snapshots for each lesson.
o Downloadable slides and materials.
 Use these to:
o Compare your code with the instructor’s.
o Replace parts if you're stuck and debug faster.

🤝 7. Q&A Section - For Doubts and Growth

Use it wisely:

 Ask for help when you're stuck.

 Help others — it boosts your own understanding!
o Explaining solutions reinforces your learning.
o Forces you to articulate and think deeply.

📌 Summary: Your Learning Path

Stage What You'll Learn
1️⃣ Basics of components, UI, styling
2️⃣ Navigation (stack, drawer, tabs)
3️⃣ State Management (Context API & Redux)
4️⃣ Handling input, forms, HTTP calls
5️⃣ Native device features (camera, GPS, notifications)
6️⃣ App publishing (App Store & Play Store)
🧠 Final Tips to Master React Native
 Be consistent with daily practice.
 Build side projects beyond the course.
 Explore React Native libraries on GitHub.
 Stay updated with the official docs: https://reactnative.dev