Edumall Preloader
WP Tutorials

React Native Course – Android and iOS App Development

React Native Course – Android and iOS App Development

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: 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)

  1. 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 ❤

  2. wow very useful, i think 2025 could be a good year for react native.

  3. Great tutorial! I'm working on recreating it but with my own touch of style and fully in TypeScript.

  4. is this course enough to land a jab?

  5. 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?

  6. 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=)

  7. thi is already outdates with latest expo versions using expo-router which by default comes with all tabs, stack and what not

  8. 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!!

  9. It’s hard to find a course on rn

  10. 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!

  11. when I start with Visual Code there was no file name with App.js so how can I get that

  12. bruh, her voice feels soo dull, i dont even feel like studying this language because of it

  13. I am getting Rnsscreen error, please help to resolve

  14. Great course ! Thank you !

  15. How to setup android emulator

  16. There should be Update at 26:59 as we need react-native-safe-area-context module to implement it in latest.

  17. One of the best YouTube tutorials I have ever watched

  18. is there any content for expo?

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

  20. How to join this course (react Native)

  21. 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)

  22. 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! 👍📱

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

  24. Has he done any proejct?

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

  26. Why install prettier with –save-exact but not eslint?

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

  28. I am not able to install eslink , it keeps telling me error

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

Leave your thought here

Your email address will not be published. Required fields are marked *

Enable Notifications OK No thanks