React Native Course – Android and iOS App Development
January 11, 2025 2025-01-11 8:51React 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: https://github.com/Em01/weather-app-demo
✏️ Course created by @codecupdev
🔗 Instagram: https://www.instagram.com/codecup_dev/
🔗 Twitter: https://twitter.com/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: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
source
Comments (31)
@Yazoon_S
One of the greatest tutorials I have ever seen, the way she teaches slowly and calmly, with examples, and explains every steps
Hats off to this great british lady tutor, if you are reading this, I want to thank you from the bottom of my heart for your patience and your clear explanation ❤
@ataru-music
wow very useful, i think 2025 could be a good year for react native.
@Adoniss99
4:00
@dawidziomalify
Great tutorial! I'm working on recreating it but with my own touch of style and fully in TypeScript.
@AnikPal-rx2dr
is this course enough to land a jab?
@MacGuini
Nodejs seems to change drastically and fast. This was one of the latest tutorials I found and it already seems outdated. Multiple steps resulted in errors. Initial setup did not produce an eslintrc.js file like in the tutorial. Instead it produced an eslint.config.mjs file. After creating the prettier.js file, I filled it in and I'm getting an undefined error with the module.exports = {…} you instructed to create. I am trying to figure out what version you are using. Your browser says 18.12 but your terminal says 18.19. I am using 18.19 and everything is all weird. Nothing makes sense. I've been hopping from tutorial to tutorial for days trying to learn React Native. Why is this so hard?
@wx_life2000
hi everyone I am new to react native, I would like to ask is open js debugger in expo go not working anymore? I clicked it but it doesn't pop up in my browser. Anyone could help me please? Thank you=)
@nikolaimakarov3034
thi is already outdates with latest expo versions using expo-router which by default comes with all tabs, stack and what not
@LISA-dw8wn
I have been a developer for 3 years, there was not a single tutorial where i didnt encounter a bug until this one, this is so perfectly done THANK YOU!!
@NSA.
It’s hard to find a course on rn
@whitesites
I just watched a few minutes, and can already tell this is IT! I am starting to learn Apps, and didn't want anything to do with webview due to performance reasons, but at the same time I didn't want to go full native, and have to develop separate apps for Android and IOS. This seems like the perfect solution. Code makes sense too. And finally a presenter that speaks ENGLISH! I am IN!
@muhammadhammad332
when I start with Visual Code there was no file name with App.js so how can I get that
@WarmQuilt
bruh, her voice feels soo dull, i dont even feel like studying this language because of it
@cs16shorts
I am getting Rnsscreen error, please help to resolve
@Lysiak.Yevhenii
Great course ! Thank you !
@cs16shorts
How to setup android emulator
@harsh_pathak27
There should be Update at 26:59 as we need react-native-safe-area-context module to implement it in latest.
@subodhtiwari9949
One of the best YouTube tutorials I have ever watched
@curiosityoftheunknown
is there any content for expo?
@davidq307
mi cerebro explotó cuando escuché el acento británico jaja, me encantó el curso!
@AnilGupta-tc6ys
How to join this course (react Native)
@avishkarkotkar2095
I got this error can anybody have a solution for this java.io.UncheckedIOException: Could not move temporary workspace (C:UsersAvishkarDesktopRNfirstandroid.gradle8.6dependencies-accessors423f0288fa7dffe069445ffa4b72952b4629a15a-0781729c-93d4-4276-9d61-d38ecb6021c6) to immutable location (C:UsersAvishkarDesktopRNfirstandroid.gradle8.6dependencies-accessors423f0288fa7dffe069445ffa4b72952b4629a15a)
> Could not move temporary workspace (C:UsersAvishkarDesktopRNfirstandroid.gradle8.6dependencies-accessors423f0288fa7dffe069445ffa4b72952b4629a15a-0781729c-93d4-4276-9d61-d38ecb6021c6) to immutable location (C:UsersAvishkarDesktopRNfirstandroid.gradle8.6dependencies-accessors423f0288fa7dffe069445ffa4b72952b4629a15a)
@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! 👍📱
@parthgohel5116
Good content 👌 and explanation, but very hard to keep up as a newb. I've seen some other teaching styles which first show a result screen and then explain how to get there which gives some insight into the thought process of how to build something you can imagine, here it feels like I'm only following some script which ends up with something??, can't really tell if the result is expected or just how it looks without any styling, does it need more tweaking?. In short does not leave enough room for me to pause and explore the solution on my own.
Had to spend 4+ hours for the first 40 mins.
To people who feels this is a complaint, no it's not, just some feedback that i hope helps.
@wedxop2956
Has he done any proejct?
@anuradharanasinghe9512
This was a great introduction to React Native! I'm excited to learn more and more
@harrisongreeves8561
Why install prettier with –save-exact but not eslint?
@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.
@emmanuelaigbefo5576
I am not able to install eslink , it keeps telling me error
@danielkim5178
5:45
@heldermarcos2883
Hello, I really liked your method, it is very educational.