Top 8 Recommended React Native Self-Study Materials! [December 2023]

Unlock the power of React Native and build impressive iOS and Android apps with this comprehensive course. Whether you're a beginner or an experienced developer, this course is designed to equip you with the skills and knowledge needed to create robust mobile applications using React Native.

In the "Getting Started" section, you'll dive into the fundamentals, exploring React Native's core concepts, understanding the difference between React Native CLI and Expo, and setting up your local development environment for both iOS and Android. You'll also get acquainted with important tools like code editors, ESLint, and Prettier.

Once you have a solid foundation, you'll move on to the essentials of React and React Native. Learn about components, stylesheets, props, event handling, and how to create basic UI elements such as buttons, text inputs, and icons. Take a deep dive into React Hooks and gain a solid understanding of useState, useEffect, useRef, useContext, and creating custom hooks.

To create visually appealing and responsive interfaces, the course covers styling techniques with borders, margins, paddings, and flexbox. You'll also explore advanced topics such as debugging, data management with Redux Toolkit, user authentication, building APIs with NodeJS and Express, integrating payment systems using Stripe, and deploying your applications to app stores.

With hands-on assignments and a practical project, you'll gain real-world experience as you apply your newfound knowledge. Whether you're looking to enhance your skills for career advancement or create your own mobile app, this course is the ultimate resource for mastering React Native in 2023.

Enroll now and join the learners who have already transformed their mobile app development skills with this comprehensive React Native course. Take the next step in your coding journey and unleash the potential of React Native today.

1. Getting Started
2. Welcome to This Course & What to Expect
3. What is React Native?
4. Quiz - What is React Native?
5. React Native CLI vs Expo
6. React Native CLI vs Expo Quiz
7. Resources for Every Lecture
8. Getting Started on macOS
9. (macOS) How to Setup Local Development Environment for iOS React Native Apps
10. (macOS) How to Setup Local Development Environment for Android React Native Apps
11. How to Reset Caches on macOS for any Project
12. Getting Started on Windows
13. (Windows) How to Setup Local Development Environment for Android
14. Important - Please watch till the end
15. IMPORTANT DOCUMENTATION FOR WINDOWS
16. Transitioning Your React Native Project from Windows to macOS for iOS
17. How to Reset Caches on Windows for any Project
18. Creating the First App
19. What is a Code Editor, ESLint & Prettier? (Optional)
20. ^^^ VSCode Prettier, ESLint Setup Update (Optional)
21. What is JSX? (Optional)
22. JSX Quiz (Optional)
23. Let's Create Hello World App!
24. Hello World App - Detailed Overview
25. Hello World App Quiz
26. Displaying Text in React Native
27. [Extra] Javascript Refresher (Optional)
28. Introduction
29. JavaScript Summary
30. Syntax Refresher
31. Syntax Quiz
32. Let & Const Variables
33. Let & Const Quiz
34. Arrow Functions
35. Arrow Function Quiz
36. Objects: Properties & Methods
37. Objects Quiz
38. Array & Array Methods
39. Array & Methods Quiz
40. Arrays, Objects & Reference Types
41. Reference Types Quiz
42. Spread Operator & Rest Operators
43. Spread Operator Quiz
44. Destructuring
45. Destructuring Quiz
46. Preface for APIs
47. Async, Await & Promises - Working with APIs
48. Async, Await Quiz
49. Summary
50. [Extra] Styling (Optional - Made for complete beginners)
51. Introduction
52. Borders
53. Borders Quiz
54. Margins
55. Margins Quiz
56. Paddings
57. Paddings Quiz
58. Position: Absolute & Relative & zIndex
59. Positioning Quiz
60. Text Styles
61. Text Styles Quiz
62. Summary
63. React & React Native Basics
64. Introduction
65. What is a Component?
66. What is a Component Quiz
67. What are Stylesheets?
68. Stylesheet Quiz
69. View Component
70. View Component Quiz
71. What are Props & Prop Types
72. Props Quiz
73. Event Handling
74. Event Handling Quiz
75. Summary
76. Props, Event Handling, Views & Stylesheet Assignment
77. [Extra] Deep Dive into React Hooks (Optional - Only for React beginners)
78. Introduction
79. What are React Hooks?
80. React Hooks Quiz
81. Getting Started with useState
82. useState Quiz
83. Understanding useEffect
84. useEffect Quiz
85. Working with refs and useRef
86. useRef Quiz
87. Working with useContext
88. useContext Quiz
89. Creating Custom Hooks
90. Custom Hooks Quiz
91. Summary
92. [Extra] Deep Dive into Class Based Components (Only for React Beginners)
93. Introduction
94. What is a Class Based Component?
95. Class Based Component Quiz
96. Working with State & Events
97. Working with State & Events Quiz
98. Component Lifecycle Methods in Action
99. Class Based Component Lifecycle Methods Quiz
100. Functional Components with Hooks VS Class Based Components with Lifecycle
101. Functional Components & Class Based Components Quiz
102. Function Components & Class Based Components Assignment
103. Summary
104. Building Basic Components
105. Introduction
106. Resources for Image Component
107. Image Component
108. Image Quiz
109. Text Input Component
110. Text Input Quiz
111. Resources for ScrollView
112. ScrollView Component
113. ScrollView Quiz
114. Button Component & Form Submission
115. Button Quiz
116. Switch Component
117. Switch Quiz
118. Icons with FontAwesome
119. Deep Dive in Flexbox
120. Flexbox Quiz
121. Summary
122. Section 3 Overview Assignment
123. Figma Design Resources (Optional)
124. What is Figma?
125. Figma Tutorial for our Upcoming Projects
126. [Practice] Getting Started on Social Media App
127. Social Media Feed Application Introduction
128. Installing a New Application
129. How to Install Custom Fonts
130. Custom Font Installation Quiz
131. Creating a Title Component
132. Installing FontAwesome Icons
133. What is a Flatlist?
134. Quiz - What is a Flatlist?
135. Setting Up For Flatlist
136. Using Flatlist & User Stories
137. User Profile Image in Flatlist
138. Infinite Scroll
139. Quiz - Infinite Scroll
140. Setting Up for User Posts
141. Resources for Creating User Post
142. Creating User Posts using Flatlist
143. Finishing Up Social Media App
144. Flatlist Quiz
145. Summary
146. Debugging Your Applications
147. Introduction to Debugging
148. Handling Errors
149. Logging to the Console
150. Documentation
151. Building Responsive UIs
152. Introduction
153. What is Dimensions API?
154. Dimensions API Quiz
155. [BEST TAKEAWAY] Responsive Scaling for Fonts, Vertical and Horizontal Sizings
156. Scaling Functions Quiz
157. Using Scaling Functions
158. How to Use Scaling Functions Quiz
159. Writing Platform-Specific Code with the Platform API
160. Platform Specific Code Quiz
161. Styling the Status Bar
162. Status Bar Styling Quiz
163. Summary
164. Basic Navigation
165. Introduction
166. Setting Up Navigation System
167. Introduction to Stack Navigation
168. Creating & Using Stack Navigator
169. How to Navigate to a Different Screen
170. Stack Navigator Quiz
171. Creating Main Menu with Drawer Navigator
172. Drawer Navigator Quiz
173. Getting Started with Profile UI
174. How to Create Tab Navigation on a Single Screen
175. Tabs Quiz
176. How to Style Tab Labels
177. Styling Tab Labels Quiz
178. Creating Components for Our Tab Contents
179. Summary
180. [Practice] Donation Application - Putting All Our Knowledge Together
181. Introduction
182. Creating Project & Setting Up
183. Installing Custom Fonts
184. [Please Watch] Custom Fonts - Part 2
185. Installing React Native Navigation
186. Setting Up Navigation, Styles & Home Page
187. Donation App Architectural Plan Discussion
188. Creating Header Component
189. Creating Button Component
190. Creating Tab Component using useRef
191. Creating Badge Component using useRef
192. Installing Font Awesome Icons
193. Creating Search Input Component
194. Resources for Single Donation Item Component
195. Creating a Single Donation Item Component
196. Styling a Single Donation Item Component
197. Summary
198. Data Management with Redux Toolkit
199. Introduction
200. Redux vs Redux Toolkit

If you're tired of spinning your wheels learning Swift or Android, this is the course for you.

Authentication? You will learn it.  Hooks? Included.  Navigation? Of course!

This course will get you up and running with React Native quickly, and teach you the core knowledge you need to deeply understand and build React components for mobile devices.

Both OSX and Windows supported - develop iOS or Android!

This course includes content on both v0.62.2 and the legacy v0.30.x, which is widely used in industry.

We'll start by mastering the fundamentals of React, including JSX, “props", “state", and event handling. Source code is provided for each lecture, so you will always stay up-to-date with the course pacing.  Special attention has been paid to creating reusable components that you'll be able to make use of on your own fantastic projects.

React Native is an excellent solution for developing apps on mobile in a fraction of the time it takes to make an equivalent iOS or Swift app.  You'll love seeing your changes instantly appear on your own device, rather than waiting for Swift/Java code to recompile!  This quick feedback loop, along with excellent cross platform support, is what has catapulted React Native to the top must-have skill for Javascript engineers.

If you are new to React, or if you've been working to learn it but sometimes feel like you still don't quite 'get it', this is the React course for you! To learn React you have to understand it.

• Learn how to use React's custom markup language, JSX, to clean up your Javascript code

• Master the process of breaking down a complex component into many smaller, interchangeable components

• Grasp the difference between “props" and “state" and when to use each

• Render interactive, media-rich components in beautifully styled apps

• Develop apps that are unique, fun, and responsive

• Build on both Android and iOS platforms

• Master integration with Firebase for user authentication

• Learn the core principles of navigation with React Native

I've built the course that I would have wanted to take when I was learning React Native. A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.

1. Getting Started
2. How to Get Help
3. Course Resources
4. Join Our Community!
5. Course Overview
6. Installing Node.js and Prerequisite Info
7. Boilerplate Download and Startup
8. App Setup
9. Making Changes
10. Expo for Web Browser - Do Not Skip
11. Using iOS and Android Simulators
12. Working with Content
13. Overview of React Components
14. Showing a Custom Component
15. Common Questions and Answers
16. Rules of JSX
17. One Common Error
18. JSX Exercise Overview
19. JSX Solution
20. List Building - With Style!
21. Building Lists
22. The FlatList Element
23. Rendering a FlatList
24. Why a Key Property?
25. Solving the Key Issue
26. A Few Props Around FlatList
27. Exercise Overview
28. Exercise Solution
29. Navigating Users Between Screens
30. Button Types
31. Buttons in Action
32. Touchable Opacity in Action
33. Navigating with React Navigation
34. Destructuring Props
35. Building Reusable Components
36. Component Reuse with Props
37. Exercise Solution
38. Parent-Child Relationships
39. Communicating from Parent to Child
40. Images Download
41. Showing Images
42. Passing Images as Props
43. Exercise Outline
44. Exercise Solution
45. State Management in React Components
46. State in Components
47. Screen Boilerplate
48. State in Action
49. Notes on State
50. App Overview
51. Generating Random Colors
52. Adding Random Colors
53. Showing Colors with a FlatList
54. App Overview
55. Reusable Color Adjusters
56. Coordinating State
57. Passing Callbacks to Children
58. Tying State Values Together
59. Validating State Changes
60. Reusable State Updates
61. Introduction to Reducers
62. Creating a Reducer
63. Applying State with a Reducer
64. Restoring Validation
65. Community Convention in Reducers
66. Exercise Outline
67. Exercise Solution
68. Handling Text Input
69. Showing a Text Input
70. Two Important Props
71. Weird Things with Text and State
72. Updating State
73. Exercise Outline
74. Exercise Solution
75. How to Handle Screen Layout
76. Layout with React Native
77. Basics of Box Object Model
78. AlignItems with Flex
79. Flex Direction
80. Justify Content
81. Flex Values
82. Align Self on Children
83. The Position Property
84. Top, Bottom, Left, Right
85. Absolute Fill Objects
86. Applying Layout Systems
87. Exercise Overview
88. Exercise Solution
89. Putting It All Together - Restaurant Search App
90. App Overview
91. Important Note About Project Generation
92. Project Generation
93. Yelp API Workarounds
94. Yelp Signup
95. Yelp Walkthrough
96. React Navigation
97. Required React Navigation Installation Update
98. Assembling a Navigator
99. Architecture Approach
100. Starting the SearchBar
101. Displaying Icons
102. Search Bar Styling
103. A Touch More Styling
104. Managing State
105. Detecting Editing Completion
106. Using Outside API's
107. Configuring Axios
108. Making the Request
109. Error Handling
110. Running an Initial Search
111. Making Hooks Reusable
112. Incorrect Hook Name in Slide
113. The UseEffect Hook
114. Extracting Hook Logic
115. Showing Search Results
116. Grouping Results
117. FlatList Rendering
118. Navigation with Parameters
119. Showing a Single Result
120. Showing Additional Info
121. A Few More Styling Issues
122. Hiding Scroll Bars
123. Constraining View Elements
124. Empty Elements
125. Spacing on the Search Bar
126. Reminder on Navigation
127. Navigating from a Child Component
128. The WithNavigation Helper
129. Communicating Between Screens
130. Fetching a Single Restaurant
131. Showing a List of Images
132. One Last Fix
133. Upgrading the Restaurant app to use React Navigation v6
134. Advanced State Management with Context
135. Important Note About Project Generation
136. App Overview
137. Issues with Data
138. Required React Navigation Installation Update
139. Initial Setup
140. Wrapping the Navigator
141. Introduction to Context
142. Adding Context
143. Moving Data with Context
144. Rendering a List of Posts
145. Adding State in Context
146. It Works!
147. Opportunity for Improvement
148. Updating with UseReducer
149. Automating Context Creation
150. More Automatic Context Creation
151. A Bit of Styling
152. Deleting Posts
153. Updating the Reducer
154. Navigation on Tap
155. Retrieving Single Posts
156. Adding a Creation Screen
157. headerRight Deprecation in 'navigationOptions'
158. Header Navigation
159. Displaying a Form
160. Saving a New Post
161. Navigation on Save
162. headerRight Deprecation in 'navigationOptions'
163. The Edit Icon Link
164. Communicating Info to Edit
165. Initializing State from Context
166. Extracting Form Logic
167. Customizing OnSubmit
168. Initial Form Values
169. Default Props
170. Editing Action Function
171. Editing in a Reducer
172. Navigating Backwards
173. Data API Sync
174. Outside Data API
175. Issues with Servers + React Native
176. Important - Required Ngrok Setup Steps
177. JSON Server and Ngrok Setup
178. JSON Server REST Conventions
179. Making a Request
180. Remote Fetch of Posts
181. Creating Posts with Post Requests
182. Refetching on Navigate
183. Deleting a Post
184. Editing Posts
185. App Wrapup
186. Upgrading the Blog app to use React Navigation v6
187. Building a Custom Express API
188. App Overview
189. Dependencies Setup
190. The Basics of Express
191. MongoDB Setup
192. Connecting to MongoDB
193. Nodemon for Automatic Restarts
194. Understanding the Signup Process
195. Using Postman
196. Handling JSON Data
197. Defining a User Schema
198. Creating and Saving a User
199. Error Handling
200. JSON Web Tokens

Mobile apps are one of the best ways to engage with users - no wonder everyone wants to build one!

But wouldn't it be amazing if you could use your web development knowledge, combined with your React knowledge, to build mobile apps with that?

That's exactly what React Native allows you to do!

No need to learn Java, Android, Swift, ObjectiveC or anything of that - React and JavaScript is all you need to create awesome native mobile apps that work on both Android and iOS. That's probably the reason why Instagram, AirBnB, Skype and many other global companies are using it to build their mobile apps!

With this course, you can join this league. I'll teach you all you need to create your own React Native apps, publish them to the Google Play Store and Apple App Store and dive really deep into the React Native ecosystem.

You'll learn all about the theory behind React Native, its core concepts, how to build responsive designs that work on different device sizes, how to navigate around, use maps and the camera and so much more!

And which better way to learn than by building a real app? We'll build the "Favorite Places" app in this course, an app where users can share amazing pictures and the location where they took them. This app will allow you to see things like using maps, the camera, user authentication, connecting to a server and much more in action.

By the end of the course, we'll of course also go through all steps required to get it into an app store.

Here's a detailed look at what you'll get:

• The core concepts and theory

• How to use React, JavaScript and native components

• Understand how to navigate in React Native apps

• A closer look at styling and animating React Native apps

• Instructions on how to use third-party libraries in your React Native app

• Detailed examples on how to use maps or an image picker

• A full user authentication flow

• How to connect to a backend server from your app

• Debugging instructions

• And so much more!

What will you need to succeed in this course?

• NO Android, Java, Swift or ObjectiveC knowledge is required!

• JavaScript and React (for the web) knowledge is required though - you don't need to be an expert but the basics need to be set (though there are refresher sections in this course!)

I'd be very happy to welcome you in the course!

Max

1. Getting Started
2. Welcome To This Course & What To Expect!
3. What Is React Native?
4. Join our Online Learning Community
5. A Glance Under The Hood Of React Native
6. Creating React Native Projects: Expo CLI vs React Native CLI
7. Creating React Native Projects
8. Creating a New React Native Project
9. Analyzing The Created Project
10. Running Our First App On A Real Device!
11. Setting Up A Local Development Environment
12. About This Course
13. Course Resources, Code Snapshots & How To Use
14. React Native Basics [COURSE GOALS APP]
15. Module Introduction
16. Exploring Core Components & Component Styling
17. Working With Core Components
18. Styling React Native Apps
19. React Native: Core Components, Styling & Colors - More Information
20. Exploring Layouts & Flexbox
21. React Native & Flexbox
22. Using Flexbox To Create Layouts
23. Flexbox - A Deep Dive
24. Components, Styles, Layouts
25. Improving The Layout
26. Handling Events
27. Managing A List Of Course Goals (in our Demo App)
28. iOS & Android Styling Differences
29. Making Content Scrollable with ScrollView
30. Optimizing Lists with FlatList
31. More Components & Lists
32. Splitting Components Into Smaller Components
33. Utilizing Props
34. Working on the "Goal Input" Component
35. Handling Taps with the Pressable Component
36. Making Items Deletable & Using IDs
37. Adding an Android Ripple Effect & an iOS Alternative
38. Adding a Modal Screen
39. Styling the Modal Overlay
40. Opening & Closing the Modal
41. Working with Images & Changing Colors
42. App Finishing Touches
43. Module Summary
44. Debugging React Native Apps (Introduction)
45. Module Introduction
46. Handling Errors
47. Logging to the Console
48. Debugging JavaScript Remotely
49. Using the React DevTools
50. Using the Documentation
51. Diving Deeper into Components, Layouts & Styling - Building a Mini-Game App
52. Module Introduction & What We'll Build
53. Starting Setup & Analyzing the Target App
54. Setting Up our Screen Components
55. Creating Custom Buttons
56. Styling for Android & iOS
57. Styling the "Number Input" Element
58. Configuring the TextInput Field
59. Adding Visual Feedback to the Buttons
60. Improving the Buttons
61. Coloring the Components & The Overall App
62. Adding a Linear Gradient
63. Adding a Background Image
64. Getting Started with the Game Logic
65. Handling User Input & Showing an Alert Dialog
66. Switching Screens Programmatically
67. Starting Work on the Game Screen
68. Respecting Device Screen Restrictions with the SafeAreaView
69. Creating a Title Component
70. Managing Colors Globally
71. Creating, Using & Displaying Random Numbers
72. Adding Game Control Buttons ("+" & "-") to the App
73. Checking for "Game Over"
74. Improving the Game Screen Visuals
75. Using "Cascading Styles"
76. Working with Icons (Button Icons)
77. Adding & Using Custom Fonts with React Native Apps
78. Adding a (Foreground) Image
79. Using & Styling Nested Text
80. Adding Logic to (Re-)Start Games & Displaying a Summary Screen
81. Logging Game Rounds
82. Outputting Log Data with FlatList
83. Styling the Game Round Logs
84. Finishing Touches
85. Module Summary
86. Building Adaptive User Interfaces (Adapt to Platform & Device Sizes)
87. Module Introduction
88. Setting Dynamic Widths
89. Introducing the Dimensions API
90. Adjusting Image Sizes with the Dimensions API
91. Understanding Screen Orientation Problems
92. Setting Sizes Dynamically (for different Orientations)
93. Managing Screen Content with KeyboardAvoidingView
94. Improving the Landscape Mode UI
95. The Dimensions API & Responsive UIs
96. Further Improvements with useWindowDimensions
97. Writing Platform-specific Code with the Platform API
98. Styling the Status Bar
99. React Native Navigation with React Navigation [MEALS APP]
100. Module Introduction
101. What Is Navigation?
102. Getting Started with the App & Outputting Meal Categories
103. Displaying Items in a Grid
104. Getting Started with the React Navigation Package
105. Implementing Navigation Between Two Screens
106. Setting the Default Screen
107. Understanding the useNavigation Hook
108. Working with Route Parameters To Pass Data Between Screens
109. Displaying Meals
110. Adding Images & Styling
111. Styling Screen Headers & Backgrounds
112. Setting Navigation Options Dynamically
113. Adding & Configuring the Meal Details Screen
114. Outputting Content in the Meal Detail Screen
115. Finishing the Meal Detail Screen
116. Adding Header Buttons
117. Adding an Icon Button to a Header
118. Adding Drawer Navigation & Creating a Drawer
119. Configuring the Drawer Navigator & The Drawer
120. Adding, Configuring & Using Bottom Tabs
121. Nesting Navigators
122. Bottom Tabs & App Finishing Touches
123. Module Summary
124. App-wide State Management with Redux & Context API
125. Module Introduction
126. Getting Started with React's Context API
127. Managing App-wide State with Context
128. Using the Created Context with useContext
129. Managing Favorite Meals with the Context API
130. Getting Started with Redux & Redux Toolkit
131. Working with Redux Slices
132. Managing Redux State & Dispatching Actions
133. Using Redux State in Components
134. Module Summary
135. Time To Practice - The Expense Tracker App
136. Module Introduction & What We'll Build
137. The Starting Setup
138. Adding Navigation (with React Navigation) & Configuring Navigation
139. Adding Global Colors & Editing Navigation Configuration
140. Creating Key App Components to Display Expenses
141. Continuing Work on the Expense-related Components
142. Adding Dummy Expense Data
143. Outputting a List of Expenses
144. Improving App Layout & Styling
145. Working on Expense List Items
146. Formatting Dates
147. Adding a Header Button & Making Expense Items Tappable
148. Navigating Programmatically Between Screens
149. Styling The Expense Management Screen
150. Supporting Different Editing Modes & Using Route Parameters
151. Adding a "Delete" Button
152. Adding Custom Buttons
153. Closing A Modal Programmatically
154. Managing App-wide State With Context
155. Using Context From Inside Components
156. Deleting & Updating Expenses
157. Finishing Touches
158. Handling User Input
159. Module Introduction
160. Building a Custom Input Component
161. Creating an Overall Form
162. Configuring the Form Input Elements
163. Adding Styling
164. Setting the Form Layout
165. Handling User Input in a Generic Way
166. Managing Form State & Submission
167. Working with Entered Data
168. Setting & Using Default Values
169. Adding Validation
170. Providing Visual Validation Feedback
171. Adding Error Styling
172. Module Summary
173. Sending Http Requests
174. Module Introduction
175. Backend Setup (Firebase)
176. Installing Axios
177. Sending POST Http Requests
178. Fetching Backend Data (GET Requests)
179. Transforming & Using Fetched Data
180. Using Response Data from POST Requests
181. Updating & Deleting Backend Data (UPDATE & DELETE Requests)
182. Managing the Loading State
183. Handling Request Errors
184. Module Summary
185. User Authentication
186. Module Introduction
187. Demo App Walkthrough
188. How Does Authentication Work?
189. Backend Setup
190. Controlling Signup & Login Screens
191. Sending Authentication Requests to the Backend
192. Creating New Users
193. Logging Users In
194. Authentication Error Handling
195. Storing & Managing the User Authentication State (with Context)
196. Extracting the Authentication Token
197. Protecting Screens
198. Adding a Logout Functionality
199. Accessing Protected Resources
200. Storing Auth Tokens on the Device & Logging Users In Automatically

In this new edition of React Native, learn how to quickly build ultra-modern , cross-platform mobile applications (working on both Android and IOS) !

React Native is like React's little brother. It is developed by Facebook, with a "Learn once, write everywhere" policy.

React Native will allow you to develop native mobile applications running on IOS and Android with the same code, a real revolution!

This technology is exploding and is in high demand in the job market.

React Native uses the React library which allows web developers to get started quickly.
You will discover that developing a mobile app with React Native is a lot like web development.

We are going to use Expo, the most used tool to create apps in 2 steps 3 moves.

With it, we will be able to code have live updates on a real smartphone on an emulator.

Also we will be able to share our app in a snap.

Goodbye mobile development with endless compilation times!

We will start together from the beginning and discover ReactJS and ReactNative in this course, so don't worry if you don't know React. The course will be progressive and we will develop several apps together.

Summary :

- The basic concepts of React

- Create a React Native application with Expo

- Styling

- The flexbox system

- Navigate between pages and send parameters using react-navigation

- Permissions

- Geolocation

- Push-notifications

- Access the smartphone gallery

- Create a notification server

- Communicate with an API

- Learn to use ES6 functions (map, find ...)

- Animations


See you soon!

​​Codiku.

1. Introduction
2. Introduction
3. React Native ?
4. Expo GO ?
5. React ?
6. Installation
7. Environment
8. Mobile, Emulator, Simulator what to choose ?
9. Using a real device
10. Android Emulator - Mac and Linux
11. Android Emulator - Windows
12. Simulator IOS - Mac
13. Get some help
14. Github Codiku
15. VS code theme and plugins
16. The core concepts
17. Project quick tour
18. Creating your first component
19. Formating my code
20. Styling
21. Flex-box system
22. Practicing : Creating a profil card part 1
23. Practicing : Creating a porfil card part 2
24. Props
25. Children props
26. Conditionnal rendering
27. States
28. Unexpected useState behaviours
29. Callback functions
30. Using callbacks into our Profile Card
31. Detect the platform
32. Our first real App ! Temperature converter
33. Introducing the app + starter
34. Layout
35. Text input
36. Component DisplayTemperature
37. Converting the temperature
38. Button : Toggle units
39. Core concept : useEffect hook
40. Changing the background programmatically
41. New App : Task list !
42. Introducing the app
43. Creating the app
44. Layout
45. Header and Splash screen
46. Card component
47. ES6 map function
48. Scrollable list of card
49. ES6 spread operator
50. Updating the status of a card
51. Tab bottom menu - Selecting a tab
52. ES6 filter function
53. ES6 reduce function
54. Filter notes
55. Delete a todo
56. Add a todo
57. Javascript handling errors - Try,Catch, Throw and Finally
58. AsyncStorage : Persisting our data
59. Discovering the hook : useRef
60. Using useRef to scroll at the bottom of the list
61. App : Real Time Weather and Forecast
62. Introducing the project
63. Creating the app
64. Layout and Background
65. Open Weather API
66. [ANDROID EMULATOR ONLY] : GPS settings
67. [IOS SIMULATOR ONLY] : GPS settings
68. ES6 - Destructuring assignment
69. ES6 - Async / Await and promises
70. Ask for permissions and get the user coordinates
71. Fetch the weather data
72. Expo debugger is now built in !
73. Debugger
74. Using custom fonts
75. MeteoBasic layout
76. Weather interpretations
77. Responsive texts
78. Info about next video
79. Understanding useEffect cleanup function
80. Digital clock
81. Fetching the city using reverse geocoding
82. MeteoAdvanced layout
83. Filling MeteoAdvanced with data
84. React Navigation : setup
85. Navigate and send parameters to a Screen
86. Header and navigate to previous page
87. Forecast list item
88. Render multiples ForecastListItem
89. Search bar component
90. Prevent keyboard from pushing the content
91. Searching by city and errors handling
92. Push notifications
93. Push notification flow explained
94. Preparing our server to send notifications
95. Note about projectId
96. Ask Permissions and get a token
97. Getting data from a notification
98. Accessing the photo gallery
99. Photo gallery
100. Publish and Build
101. Publish to Expo
102. Generate an official Build
103. Contexts
104. What are contexts ?
105. Using contexts
106. Performances
107. memo, useMemo and useCallback
108. Animations
109. Animations introductions
110. Trying to animate with states
111. Creating an animation
112. Animations callbacks
113. Using your fingers : Gesture handler
114. First exercice
115. Understanding Interpolations
116. Clamping
117. Project : Awesome List
118. Solving the crash from the next video
119. Awesome List : Creating a simple list
120. Solving the crash
121. Awesome List : interpolation values
122. Awesome List : Animating the list
123. Awesome List : Fixing the missing space at the bottom
124. Awesome List : Displaying texts and backdrop
125. Awesome List : Animating texts, and snaping effect

Do you want to become an expert in building mobile apps using React Native/JavaScript? And how about Firebase as a database system? Do you want to build an instant messenger just like WhatsApp?

If so, you’re in the right place! This course will guide you step by step in creating your own WhatsApp clone COMPLETELY from scratch.

We’re talking the kind of app that will amaze anybody that sees it. The kind of app that will get you hired in no time!

Why let me teach you?

I work as a Software Engineer at Microsoft where I build products used by millions of people all over the world! I want to take the skills I’ve gained through years of working with some of the best developers in the world and transfer them directly to you!

I’ve taught tens of thousands of students here on Udemy and created some of the most popular development courses available!

Okay so what’s the course about?

I will personally guide you, step by step, in creating your own social network site just like WhatsApp complete with:

• Instant messaging in real time

• Sending image messages

• Group chat support

• Profile pictures

• Group chat photos

• Message replies

• A full user search

• Settings pages

• and much more!

Whether you are a beginner* or an experienced programmer, this course will be massively beneficial to you.

Why should I take the course?

In the programming world, the “big 4” often consists of Google, Microsoft, Facebook and Amazon. To get a job at any of these companies, you absolutely MUST know the essentials like JavaScript. In addition to this, React Native is incredibly hot right now so learning this will be a huge deal to an employer.

If you take this course, you will have nothing to worry about because we use all of these skills extensively!

Support: 

By enrolling in this course, you will have the COMPLETE support of a Microsoft Software Engineer (me). I'm always ready to answer any question you may have. Programming issues, errors, feature requests, general programming advice - it doesn't matter, I'm always happy to help! I always aim to respond to questions within a few hours and it's also worth noting that I've answered EVERY SINGLE question asked so far.

Future course discounts:

By enrolling in this course, you will get access to ALL of my current and future courses for the lowest possible discount we as instructors are capable of offering on Udemy - FOREVER. 

Project portfolio:

The site you create in this course will be the highlight of your project portfolio! Any potential employer who see's this project on your resume will want to hear all about it. The reason? They know that a project like this means you're familiar with the wide range of technical skills they need their employees to know.  

Fun!

Finally, this project is a lot of fun and I know you'll have a great time implementing your own unique ideas as well as the ones we implement together. What are you waiting for? 

* Although this course is suitable for beginners, it is not an introduction to development course. I won't go into much detail when explaining the basic programming concepts but I'm here to help if you want more of an explanation - just let me know!

1. Introduction
2. Intro video (from course landing page)
3. How to ask questions
4. What is Expo?
5. Creating our project!
6. A quick rundown of the project structure
7. Where do I find the source code?
8. Some useful VS Code extensions
9. Running the app on a real device
10. Running the app on an Android emulator
11. Running the app on an iOS emulator
12. React Native basics - quick overview
13. Styling elements
14. Buttons
15. SafeArea
16. Hooks - useState
17. Hooks useEffect
18. Hooks - useCallback
19. Fonts and splashscreens
20. Picking a custom font
21. Showing a splash screen while loading
22. Adding a custom splash screen
23. Setting custom fonts
24. Adding the navigation system
25. Installing React Navigation
26. Creating the stack navigator
27. Fixing the screen display
28. Navigating to a screen on button press
29. Configuring the navigation options
30. Adding bottom tabs
31. Configuring the titles of our navigators
32. Displaying icons on our bottom tabs
33. Separating our navigator into its own file
34. Separating the 'logged in' navigator
35. Chat screen UI
36. Creating the chat screen
37. Setting the background image
38. Handling the chat safe area
39. Buttons with icons
40. Styling the textbox and buttons
41. Showing a send button as the user types
42. Styling the send button
43. Handing a message being submitted
44. Fixing the textbox being hidden behind the keyboard
45. Sign up screen
46. Creating the sign up screen
47. Adding a page container component
48. Creating a custom input component
49. Adding an icon to the input
50. Styling the label
51. Styling the textbox
52. Displaying error text
53. Creating a custom submit button
54. Submit button title, onPress and remaining style
55. Switching between sign up and sign in forms
56. Setting the form image
57. Prevent keyboard from hiding the form
58. Form validation
59. Handling text changed
60. Validation demo
61. First name and last name validation
62. Refactoring the validation functionality
63. Improving the return value
64. Validating emails and passwords
65. Improving our textboxes
66. Validating the sign in form values
67. Managing form state with useReducer
68. Evaluating the whole form's validity
69. Evaluating the whole sign in form validity
70. Displaying the error messages
71. Creating the user's account (signing up)
72. Getting the form values
73. Creating our Firebase project
74. Firebase helper file
75. Authenticating a user with Firebase
76. Handing 'email already in use' errors
77. Displaying errors
78. Adding a loading spinner
79. Sending user data to the database
80. Using Redux toolkit to manage app state
81. Configuring out auth slice
82. Saving auth info to the state
83. Accessing data from the state
84. Going to the main page when they sign up
85. Saving sign in data to storage
86. Creating the start up screen
87. Handling when storage is empty
88. Handling an expired token
89. Auto logging in if a token exists
90. Clearing the storage - forcing the log out
91. Signing in
92. Handling sign in errors
93. Fixing error: "Can't perform a React state update on an unmounted component"
94. Logout timer
95. Loading spinner for the sign in form
96. 'test mode' for quick sign in
97. Settings page
98. Adding a custom page title element
99. Fixing the margin of the settings page
100. Adding the input fields
101. Setting the initial values of the input fields
102. Adding the save button
103. Updating the user in the database
104. Logout button
105. Updating the state with the new data
106. Hiding the submit button when there are no changes
107. Outputting the default user profile image
108. Styling the user image
109. Adding an 'edit' icon
110. Requesting permission to access the user's images
111. Opening the image picker
112. Updating the page to show the new image
113. Getting the image blob data
114. Uploading images using Firebase Storage
115. Saving the uploaded image to the user's database data
116. Updating the state data with the new profile picture
117. Image upload loading spinner
118. Searching for users to chat with
119. Adding the 'create chat' header button
120. Opening the new chat page
121. Creating our user search box
122. Showing a message when no results were found
123. Searching after the user stops typing
124. Searching for users
125. Outputting search results
126. Adding fake users
127. Creating our search result component
128. Styling the search results
129. Hiding the profile image edit button
130. Creating a new chat
131. Selecting the user we want to chat with
132. Storing found users in the state
133. Getting the user data from the stored users
134. Showing a message when it's a new chat
135. Styling the new chat message bubble
136. Creating the chat when a message is sent
137. Retrieving chats
138. Getting the user chats when the app starts
139. Unsubscribing the firebase listeners
140. Getting the data for each of the user's chats
141. Saving the chat data to state
142. Showing a loading spinner while we load the chats
143. Iterating the chat list
144. Setting the stored users on login
145. Outputting the user data
146. Navigating to the chats on press
147. Sending messages
148. Sending text based messages
149. Updating chat data when message is sent
150. Adding messages to app state when the app loads
151. Displaying the latest message text underneath the chat
152. Outputting chat messages
153. Showing an error message when messages fail to send
154. Only retrieving messages for the chat we're looking at
155. Styling message that we sent
156. Styling the messages sent by others
157. Message context menu (additional message actions)
158. Reacting to long presses on the messages
159. Opening the context menu on long press
160. Copy to clipboard menu option
161. Customising the menu item components
162. Starring messages
163. Calling the star message function
164. Adding starred messages to the database
165. Adding and removing starred messages in the app state
166. Setting the initial starred messages state
167. Updating the menu option for star and unstar
168. Showing a star icon next to the message
169. Outputting the date next to the message
170. Replying to messages
171. Selecting a message to reply to
172. Creating our reply component
173. Styling the reply section
174. Cancelling the reply
175. Sending the reply to the database
176. Showing the message we're replying to
177. Finishing touches to the replies
178. Sending image messages
179. Opening the image picker
180. Showing the popup image confirmation
181. Uploading chat images
182. Sending the image message
183. Outputting uploaded images
184. Bug fix: Creating a new chat by sending a message
185. Sending pictures from your camera
186. Scrolling the chat to the bottom on new message
187. Creating group chats
188. Creating a 'new group' button
189. Creating the chat name textbox
190. Adding the 'create' button
191. Creating the user checkboxes
192. Selecting users for our group chat
193. Outputting the selected users
194. Removing a selected user when pressed
195. Styling the selected users list items
196. Scrolling the selected users list to the end
197. Handling the 'create' button press
198. Opening an existing chat if one with that user exists
199. [Bug fix]: Fixing space at bottom of screen when on a new chat
200. Some small UI updates when it's a group chat