React Native Applications
Create a Professional Weather App
What you'll learn
- Create a React Native project
- Get the user location
- Sign up on the weather data server
- Fetch data from the server
- Understand the unit of measurement and change it
- Display the basic weather data
- Add an option to reload the data
- Display the rest of the weather data
About this course
This course explains how to create an app that shows temperatures and weather conditions using React Native, step by step from the idea to the finished app. You begin with an introduction to the course and then create the project. After that you get the location, meaning the position of the user, and sign up on the server that provides weather data, then fetch the data from the server and display the basic data. Next you learn about the unit of measurement and how to change it, you add an option to reload the data, then you display the rest of the data and reach the final stage. This course is useful for anyone who wants to learn mobile apps through a small practical project, whether you are a beginner in React Native or a programmer looking for a practical example. Although the app is small, it brings together many skills every programmer needs, and it is best to know the basics of programming before you start. In the end you will be able to build a weather app that connects to a server, finds the location and shows temperatures. The teaching is in Arabic with a complete practical app that helps you understand every step easily.
Expected outcomes
- Create a simple app using React Native.
- Understand how to connect to the server and fetch data.
- Add interactive features to the app like reload.
- Essential skills for future React Native app development.
Learner reviews
Course content
1React Native Applications
11 lectures
- Course IntroductionIntroduces the hands-on weather app in React Native, which fetches data from an external server through an API and key, and shows its components: location info, a unit picker, a reload icon, and weather details.3:18
- Create ProjectCreates the React Native weather app project from the Terminal after confirming Node.js is installed, then runs it with npx expo start on an Android emulator and tests that code edits appear immediately.4:33
- Get LocationGets the user's location in the weather app using the expo-location library: it requests location permission, handles a denial with an error message, then reads the longitude and latitude.15:34
- Register on ServerExplains using longitude and latitude with an API and CRUD operations on a server, then signs up with OpenWeatherMap to get an API key and stores it in an object inside the project.5:17
- Get Data from ServerFetches weather data from OpenWeatherMap with the fetch function using the coordinates and key, reads the JSON result, handles a failed connection with the error message, and displays the temperature.15:48
- Unit of MeasurementRuns the weather app on a real device through Expo Go and a QR code, then adds a units parameter to the API URL with a state value to switch between Celsius and Fahrenheit.7:55
- Display Basic DataSets up the app's layout in the App component and displays the basic data from the JSON response, namely the icon, description, and temperature, inside the weather info component with an image and text.20:23
- Change Unit of MeasurementCreates the WeatherDetails and UnitsPicker components, installs a dropdown library, and sets the picker's position and options so the user can switch between Celsius and Fahrenheit.13:00
- Add Data Reload OptionBuilds the ReloadIcon component that shows a refresh icon from the Ionicons package and receives the load function as a prop to refetch data when pressed, with its position and color set.4:59
- Display Remaining DataBuilds the WeatherDetails component to show the remaining data, rounding values with Math.round and adding units, and displaying feels-like temperature, humidity, pressure, and wind speed with MaterialCommunityIcons icons and merged styles.18:30
- Final StageAssembles all weather app components in App.js by importing them and passing props, resets values to null on each load, shows errors, and wires up the unit switch and the reload icon.14:09
Instructor
Eng. Amr Abdel Fattah
