I. Overview:

React Native is an open-source framework for building cross-platform applications (apps) using React and the platform’s native capabilities. In this course, you will move from the basics of React to a more advanced implementation using React Native. You’ll review a wide range of different React components and ways of styling them. And you’ll get to practice using different mobile methods of interactivity with React Native.

II. Duration:

60 hours

III. Intended Audience:

• Anyone who wants to use React to build native mobile apps
• Every mobile developer who wishes to learn only one language to write cross-platform mobile apps

IV. Prerequisites:

• Basic JavaScript and React knowledge.
• NO Android/ Java or iOS (Swift, Objective-C) development experience is required.

V. Objectives:

• Learn how to use React Native to build real native mobile apps for iOS and Android
• Develop cross-platform (iOS and Android) mobile apps without knowing Swift, Objective-C or Java/ Android
• Explore React Native basics and advanced features.

VI. Course outlines:

1. Module 1: JavaScript

• Core Syntax
• let and const
• Arrow Functions
• Objects: Properties and Methods
• Arrays and Array Methods
• Arrays, Objects, and Reference Types
• Spread Operator and Rest Parameters
• Destructuring
• Async Code and Promises

2. Module 2: React.js

• What is React?
• Understanding JSX
• Understanding Components
• Working with Multiple Components
• Working with Props
• Rendering Lists of Data
• Handling Events
• Parent-Child Communication
• Managing State
• More on State
• User Input and Two-Way Binding

3. Module 3: Getting Started with React Native

• What Is React Native?
• Creating React Native Projects: Expo CLI Versus React Native CLI
• Creating a New React Native Project
• Analyzing the Created Project
• Running Our First App on a Real Device!
• Setting Up a Local Development Environment

4. Module 4: React Native Basics

• Exploring Core Components and Component Styling
• Working with Core Components
• Styling React Native Apps
• Exploring Layouts and Flexbox
• React Native and Flexbox
• Using Flexbox to Create Layouts
• Improving the Layout
• Handling Events
• iOS and Android Styling Differences
• Making Content Scrollable with ScrollView
• Optimizing Lists with FlatList
• Splitting Components into Smaller Components
• Utilizing Props
• Handling Taps with the Pressable Component
• Adding an Android Ripple Effect and an iOS Alternative
• Adding and working with a Modal Screen
• Working with Images and Changing Colors

5. Module 5: Debugging React Native Apps

• Handling Errors
• Logging to the Console
• Debugging JavaScript Remotely
• Using the React DevTools
• Using the Documentation

6. Module 6: Advanced Components, Layouts, and Styling

• Starting Setup and Analyzing the Target App
• Setting Up Screen Components
• Creating Custom Buttons
• Styling for Android and iOS
• Configuring the TextInput Field
• Handling User Input and Showing an Alert Dialog

7. Module 7: Building Adaptive User Interfaces (Adapt to Platform and Device Sizes)

• Setting Dynamic Widths
• Introducing the Dimensions API
• Adjusting Image Sizes with the Dimensions API
• Understanding Screen Orientation Problems
• Setting Sizes Dynamically (for Different Orientations)
• Managing Screen Content with KeyboardAvoidingView
• Improving the Landscape Mode UI
• Further Improvements with useWindowDimensions
• Writing Platform-Specific Code with the Platform API
• Styling the Status Bar

8. Module 8: React Native Navigation with React Navigation

• What Is Navigation?
• Displaying Items in a Grid
• The React Navigation Package
• Implementing Navigation Between Two Screens
• Understanding the use of Navigation Hook
• Working with Route Parameters to Pass Data Between Screens
• Styling Screen Headers and Backgrounds
• Setting Navigation Options Dynamically
• Adding Header Buttons
• Adding an Icon Button to a Header
• Adding Drawer Navigation and Creating a Drawer
• Configuring the Drawer Navigator and the Drawer
• Adding, Configuring, and Using Bottom Tabs

9. Module 9: App-wide State Management with Redux & Context API

• Nesting NavigatorsGetting Started with React's Context API
• Managing App-Wide State with Context
• Using the Created Context with useContext
• Getting Started with Redux and Redux Toolkit
• Working with Redux Slices
• Managing Redux State and Dispatching Actions
• Using Redux State in Components

10. Module 10: Sending Http Requests

• Sending POST Http Requests
• Fetching Backend Data (GET Requests)
• Transforming and Using Fetched Data
• Using Response Data from POST Requests
• Updating and Deleting Backend Data (UPDATE and DELETE Requests)
• Managing the Loading State
• Handling Request Errors

11. Module 11: Using Native Device Features (Camera, Location, and More)

• Working with Camera package
• Working with ImagePicker package
• Working with Map
• Working with SQLite

12. Module 12: Push Notifications

• What is Notification?
• Handle Local Notification
• Setup Push Notification
• Handle Push Notification

13. Module 13: Publishing React Native Apps

• Configuring App Names and Versions
• A Quick Note About Environment Variables
• Adding Icons and a Splash Screen
• Building for iOS
• Building for Android

14. Module 14: Project

• Planning, developing, and presenting a final project.