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.

✏️ Course created by @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

--

[Adarshabinash]

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

[zeath_zolaries]

i wasted 5 hours in doing the setup, nothing was clear at all...jumping from here to there to here, should've sticked to explaining one setup completely instead of mixing them all up, i dont know how the course is but the setup part is total crap. I'm gonna watch a different video for the setup, i hope the actual course isnt like this

[nrmz]

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?

[alberttoo]

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🙏

[bentbent]

It's a fine course. But oh my god is it slow. I was watching this on 1.5x speed and still felt like i was constantly waiting for her to continue.

And in general she forgets to explain many of the setup steps in the beginning. Kinda just expects people to know better. So definitely not a beginner course. So don't understand why that is even part of it. Just send people to anintro course instead where they actually explain the concepts.

[Valeri.Yanev]

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.

[thatolebethe]

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.

[CamiSheep]

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

[JAlex-bnqi]

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!

[pepper_]

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

[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 💪

[danidev-dxsh]

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

[anashasan]

it's been three days and i'm still stuck in the basic configurations of eslint and prettier .
i get tons of errors....

[kite]

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

[haba_]

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

[davidq]

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

[SneakyNinja]

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!

[gruntythegreat]

The beginning of this video is so confusing. How exactly did you get all of the files set up in the weather app?

[dinhgialuu]

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 🥰.

[mattx]

I'm enjoying the course so far. However, I am having trouble with "SafeAreaView". After some research, it appears it is only available on IOS devices(v11 or later). Since I am using an Android (v10), I can not use this feature. I have not been able to find another way to fix my problem of the text being blocked by the top phone header. I could probably fix it by adjusting the padding, but as you said in the video, this is not a good idea. Since it will look different on different devices. It should be noted I am using the expo app on my phone (Instead of an emulator) to view the render from react native. Has anyone else found a work around for this? If I figure it out, I will be sure to update my comment with a solution for others.