React Native Course - Android and iOS App Development

Master React Native with this comprehensive course, covering everything from the basics of setup and components to advanced topics like navigation and fetching API data. Learn to build a weather app from scratch, complete with a sleek user interface and real-time data integration, while exploring concepts like state management, hooks, and styling.
💻 Code: github.com/Em01/weather-app-demo
✏️ Course created by ‪@codecupdev‬
🔗 Instagram: / codecup_dev
🔗 Twitter: / codecupdev
⭐️ Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:01:25) What is React Native?
⌨️ (0:03:45) Expo
⌨️ (0:04:22) Setup with Expo
⌨️ (0:06:17) Setting up a custom app
⌨️ (0:10:17) Setting up Android Studio
⌨️ (0:12:03) The directory structure
⌨️ (0:12:42) Setting up linting
⌨️ (0:14:33) Setting up Prettier
⌨️ (0:16:35) Debugging
⌨️ (0:18:17) Native components
⌨️ (0:19:00) Core components
⌨️ (0:20:17) JSX
⌨️ (0:21:29) Working with components
⌨️ (0:21:57) What are components
⌨️ (0:23:08) Creating our first component
⌨️ (0:26:50) Styling basics
⌨️ (0:31:17) Layout props
⌨️ (0:32:37) The current weather screen
⌨️ (0:40:17) Adding icons to the screen
⌨️ (0:42:40) Components
⌨️ (0:46:01) Reviewing what we have learnt so far
⌨️ (0:48:52) Creating the upcoming weather component
⌨️ (0:52:17) Introducing lists
⌨️ (1:19:17) Implementing our list
⌨️ (1:09:10) Key extractors
⌨️ (1:11:41) Other FlatList props
⌨️ (1:15:01) Styling our FlatList
⌨️ (1:19:23) Images
⌨️ (1:22:31) Using an image in the upcoming weather component
⌨️ (1:24:10) ImageBackground
⌨️ (1:26:05) Props
⌨️ (1:35:17) Refactoring what we have done so far
⌨️ (1:43:04) Implementing the city screen
⌨️ (2:00:17) Refactoring the city screen
⌨️ (2:15:32) Refactoring the current weather screen
⌨️ (2:26:25) Introducing Navigation
⌨️ (2:34:37) Implementing tabs in our app
⌨️ (2:40:02) Styling our tabs
⌨️ (2:47:27) Extracting the tabs
⌨️ (3:06:55) State
⌨️ (3:15:07) The useState hook
⌨️ (3:19:24) Hooks
⌨️ (3:23:24) The useEffect hook
⌨️ (3:32:05) Adding a loading state
⌨️ (3:38:31) Using the open weather map api
⌨️ (3:39:31) Getting the users location
⌨️ (3:47:36) Seting up fetching the api data
⌨️ (3:52:38) Fetching the Api data
⌨️ (4:01:17) Making our own hook
⌨️ (4:05:17) Passing the data to our components
⌨️ (4:08:42) Updating current weather to use the data
⌨️ (4:14:32) Updating the upcoming weather to use the data
⌨️ (4:18:17) Installing Moment
⌨️ (4:21:17) Updating the city component
⌨️ (4:25:53) Creating the error screen
⌨️ (4:31:42) Some last refactoring
⌨️ (4:33:59) Bonus material
🎉 Thanks to our Champion and Sponsor supporters:
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Erdeniz Unvan
👾 Justin Hual
👾 Agustín Kussrow
👾 Otis Morgan
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@Avatar-Roku]

Are you kidding me!! Today I had an interview and I was asked if I can differentiate between React and react native and I answered I don't have a knowledge in react native...4 hours later you make a full course on that...thanks man

[@screenofmohar2860]

OMG!! 😂 So can you tell us which company it was and about the Job Role??

[@Avatar-Roku]

@@screenofmohar2860 it was a startup...for full stack developer

[@screenofmohar2860]

@@Avatar-Roku Understood, thanks bro for the response 🙃✌️

[@ashron4472]

Why people hiring fullstack developer for junior level? That's insane spec

[@soumadip_skyy_banerjee]

Good luck ❤

[@alberttoo5807]

I swear I was looking for a React Native tutorial today Thank You so much for this....I'M nine minutes in and I can already tell what a gem this ...What a great teacher🙏

[@salacupazven9119]

x2...

[@roiiroii9561]

Awesome tutorial. The best one actually. From typing everything from the scratch to intentionally leaving bugs so you can explain how to debug, amazing! I felt very confident after completing this tutorial!

[@Cami555555Sheep]

this is like the 5th tutorial i've tried for react native and finally one that's not outdated, thank god

[@JAlex-bn9qi]

You are a great teacher! I have never enjoyed an IT course as much as this one. Your teaching style is easy to understand and you simply concepts so well. I look forward to more content from you for freeCodeCamp. Thank you!

[@homosapien6031]

Compsci / programming. Not IT

[@pepper_101]

Thank you for always providing courses like these, you guys are treasures.

[@hectorrosario8355]

Loved every second of this React Native tutorial! completed it after some time due to some roadblocks but came back to it and nailed it. thanks!

[@rodrigoalarcon190]

You keep what you promise! many thanks I was expecting this one!

[@danidev-dx5sh]

Guys, you have no idea how you help tons of people. God bless you!

[@mauricioveron8127]

Thanks guys!!! I was expecting this course from you :D

[@AbiNephilim]

Fantastic course! Commited a day to complete it and very glad I did. Recently I've been working on a project using Flutter and I'm just not really enjoying working in the framework, however React Native seems clearer to use to me so I'll certainly be re-writing! Thank you for the thorough course, I've coded along so I'm going to use the knowedge to tweak my Weather App more and experiment 💪

[@tarakbelhiba3168]

mind if i ask which is harder between flutter/react native ?

[@thatolebethe8896]

​@@tarakbelhiba3168 depends ...if you know fundamentals both are pretty easy. Personaly I find flutter easier but react native is also easy to pick up

[@JonathanChaperuka]

thats the error m getting

[@user-cz8nc1el2t]

I never comment, but this is an outstanding course, very clear. To the instructor , keep making videos!

[@Valeri.Yanev98]

If you have problem with dotenv, dont use import statement. Access from process, like const api_key = process.env.expo_api_key, also in the .env add expo before the name, dont know if its requred like in vite for example, i added it because thats in the expo documentation.

[@Guetzer]

Accessing from process works, thanks!

[@michellebessa231]

The most amazing course EVER! Very well explained. learning Javascript has never been so easy! Thanks to this video I'm now able to create my first IOS app

[@emmanuelagyeikumi2481]

This is an amazing course. I finally got to learn react native in a day. I was hiding behind flutter, i am glad i watched this.

[@Gamerfan2000]

This is an excellent video, I really appreaciate your approach, even if it means having to type out every single word, but some of it after a while that can become a little daunting for the viewer. what I mean by that, there is a plugin in vs code called simple react snippets that lets us emmet some of our react code so that we can use shortcuts to type out some react code. For example: 'imr + tab' creates import React from 'react' 'sfc' + tab' creates const NameOFComponent =()=>{ return( ); } export default NameOfComponent; sfc - stateless functional component Aside from this little detail, your video is by far the best react native video I have ever seen. I have searched high and low for a very good comprehensive 'not banging my head against a wall' type of tutorial. I also have to commend your approach for how you break down your code in such a way to keep everything tidy and clean. That is the mark of a true developer.

[@SneakyNinja345]

Finally after many days of debugging, debugging and more debugging, I've finished the app! This is my first time using React Native, and actually React itself, but you made this course so easy to understand and follow along. It's very motivating to have a working app beyond all the frustrating lines of errors. Thank you, Emma!

[@hatty101]

whats the diff between react and react native?

[@dilmifernando9964]

@@hatty101 react native is for the front end of mobile applications while react is for web applications

[@archardor3392]

@@hatty101 One is for web browsers (chrome, mozilla, edge) and the other is for mobile devices (phone, tablet).

[@TalhaversePlays]

Just Completed the complete course and hand down this is one of the best reactnative courses out there , your explanation was on point and the amazing coding techniques were a cherry on the top , loved every bit of it

[@humansareretarded]

what kind of apps can you build now that you have completed this course? can you code figma level design after this course?

[@PizzoLab]

Do you need any basics of other languages (like JS or ReactJS) to follow the course?

[@yyyd6559]

​@@PizzoLab You need to know js first

[@PizzoLab]

@@yyyd6559 Yeah, I learned JS and currently practicing with React in the meanwhile. I discovered that React was the right choice for my purpose. Thank you!

[@nazakli]

Absolutely phenomenal course! The instructor's clarity and depth of knowledge in React Native made complex concepts easy to grasp. Each tutorial was well-structured, with practical examples that really helped solidify the learning. Highly recommend this course to anyone looking to dive deep into mobile app development with React Native. Great job! 👍📱

[@adrian110288]

That was a great introduction to RN! Thank you guys!

[@bandarkhawaji]

Thanks, i was looking for a short and good react native 😊

[@agunkpa]

Amazing course Thank you so much guys❤

[@ihateorangecat]

Finally most awaited course!

[@dinhgialuu02]

Wow, this course comes at the right time when I'm learning about React Native. I am a 3rd year university student and am planning to do an internship in mobile software development, really thanks to FCC and author Emma Williams. Big thanks from Vietnam 🥰.

[@buiducphat]

2k2 đúng hong bạn?

[@dinhgialuu02]

@@buiducphat Hi bạn, mình 2k2 😁

[@subodhtiwari9949]

One of the best KZbin tutorials I have ever watched

[@harshitachaurasia5759]

Just finished the course, great material

[@soumadip_skyy_banerjee]

Perfect Timing! ❤

[@cdac1645]

This was a great tutorial! 😁 Please consider a follow up intermediate and advanced series 🤞on this or some other platform. You have a good teacher style and nice cadence. Thanks

[@ananjohar8248]

I was looking react native course with last update and now you posted this wow😮

[@hegde421201]

Great teaching by the great lady!! Awesome lecture.Thank you from the bottom of my heart!!

[@chams2385]

damn ... the react native and react js are so much fun to use , thanks for your help

[@zemanel1284]

I've done other YT tutorials and courses on codecademy and this is by far the best! Well done!

[@itsamschel]

Excellent! Watching this after getting a React native junior role!

[@shakil_ahmed98]

Thank you so much, Need More & More React Native Advanced Project

[@thatolebethe8069]

Good course , but I think you should have developed with the emulator side by side so we can see the changes in style etc in real time. This way you take advantage of hot reload.

[@abdulbasitsalah2918]

thank you 🙏, really awesome course for beginners

[@anuradharanasinghe9512]

This was a great introduction to React Native! I'm excited to learn more and more

[@davidq307]

mi cerebro explotó cuando escuché el acento británico jaja, me encantó el curso!

[@harishpatel5019]

Excellent course for beginners Great explanation with examples ❤❤❤❤❤

[@jimmymedellin]

Looking forward to this course

[@gabrielgomesmabiala6707]

Very helpful thank you for your work

[@rekahorvath3759]

Thank you for the free to use pictures! 😊

[@cwcfunclock2709]

This tutorial is worth mora than $100. Thank you. and may god bless you for everything.

[@kanishkjha7621]

Thanks, Emma Ma'am and the freeCodeCamp to provide this superb React Native tutorial, I have watched many videos but none helped but this one did. Thank you so much.

[@idany1994]

perfect timing !

[@raphaelgaldino3129]

thank u Guys! Perfect time

[@thompsonterna3749]

Right on time👏🏾

[@thanyaniinnocent940]

Patiently waiting for Ionic Tutorial Nice tutorial by the way

[@gotosleepqueen7959]

if your getting an error that says location is null, then add a check like: if(location){ //rest of code } just so the fetch weather function doesn't get ran when location hasn't been set yet

[@nathantum8463]

Much needed change. Must watch.

[@haba_01]

When adding the location functionality to the app at 3:43:50, don't forget to add the parenthesis after requestForegroundPermissionsAsync.

[@Cami555555Sheep]

thank you so much, saved me

[@mahendranath2504]

Thank you so much for the awesome content 🙌🙌👌👌😍😍👍👍

[@nrmz5728]

The setup for this is brutal. You go through so many prompts without saying WHY we are using the defaults and you do not explain what certain components are. You also say in the very begging that you aren't using Code and then all of a sudden you are?

[@christosbazios52]

Excellent!

[@thisisemarkios]

Perfect timing

[@edoris9021]

Took me along time to get the ract native CLI app up and running, realised I had to download java and get java and android into my envrionmental variables! Hope it pays off and its not all just on the expo app

[@EngAlperDemir]

Excellent tutorial.

[@benphamvan3456]

Thank you so much!🥰🥰🥰🥰🥰

[@grsjohn1178]

Thank you very much!

[@nupecartoontv]

Nice tutorial 😍

[@anotheranimefan]

Thanks a lot for this

[@telur_ramen]

🔥🔥🔥 thanks

[@thimothy1213]

Need more videos related to Reactnative ❤

[@heldermarcos2883]

Hello, I really liked your method, it is very educational.

[@sachinbhujel909]

Thanks guys 😊

[@TundeEszlari]

Great video.

[@reactnative4]

The course seems to be pretty good

[@kroogy888]

Nice vid!

[@TheAaditya007]

Nice React Native Course ❤.

[@marcinzale]

Great!

[@rukonuzzamanbd]

Thanks a lot ❤

[@rafaelfonseca7942]

Very good content Much appreciate it! But what about this sunrise and sunset timing? :>

[@be_calm2372]

Thank you ❤

[@sehrishwaheed7953]

Please make a detailed course on graphql Apollo server and client

[@uditmehra1234]

great ,thanks

[@tripstergaming8435]

upload an updated flutter course also pls. it would be great if you do that.

Thanks for the course. Looking for a more complete one like the Flutter course that have 37 hours ç_ç

[@kushalkamra3803]

Thank you 🙏

[@whoispasindu]

Thanks❤❤

[@b.s.rathore4306]

best react native tutorial for begginers😇

[@naveengali]

Excellent content and it would have been super great if done with bare react native without expo 🎉

[@dasinduhewagamage5949]

Thank u miss ❤

[@razdingz]

love this , best ladies

[@blueProgrammer]

Excellent superrrrrr

[@heroplayz1862]

Thank you sir

[@blacksunshine5892]

Thanku so much

[@kite8680]

Can we get a newer flutter course too, please? 🙏

[@jousufjacob8251]

nice tutorial

[@usmanmarkaz]

Sir thanka for this

[@wog4299]

Hey freecodechamp bring out more tutorials on react native with nodejs and all ❤.

[@aymenbachiri-yh2hd]

thank you

[@abc_cba]

Can someone provide tips for Android based phones instead of X-Code and iPhone based iOS ?? One thing I know of is Expo for sure, what else ?

[@firewatermoonsun]

It might be good to have a tutorial on RN CLI not just expo.

[@webdevlounge]

Thanks

[@vladislavgorovenko]

Nice tutorial, many thanks. Is it necessary to import React, if we just add .tsx extension to files? Is it common to use Typescript instead of JS with React Native?

[@EngAlperDemir]

Recent versions of RN does not need React to be explicitly imported, also use TS wherever possible, if you get to the habit of using TS instead of JS you're gonna catch bugs earlier and quicker.

[@EngAlperDemir]

However, hooks need to be imported from React.

I had to debug like 5 things until i got the virtual android development to work :D

[@harshjaiswal1634]

Heavyyy

[@Parselinho]

DO I need to master REACT, or its ok that i know basic react before this course? thanks in advance

[@hew3999]

I'm waiting for SwiftUI course., please🎉

[@mishenthakshana3407]

Please do a react native animation course