React Native is a great framework to develop cross-platform mobile applications for the platforms iOS and Android. In this, I am going to take you through the process of building a “minimalist” weather application using React Native by fetching real-time data. If you have never worked with React Native, you can use this walkthrough as kickstart in your journey of becoming a mobile application developer and will be a cool project for your portfolio.
Getting Started: Requirements
I will be using Expo which is described as “the fastest way to build an app”. It is an open-source set of tools and services that come in handy, especially if you are getting started in the React Native world. The development tool I am going to use for Expo is Expo XDE.
Familiar with React
Nodejs installed on your local machine
That’s all. Let us get started with the development process.
Getting Started: In real this time
Open the Expo XDE after its installation and click on the “Create New Project”.
Enter the name of your application and click on “Create”. The name of the application will be in lowercase, I don’t know why Expo XDE UI does not support uppercase characters.
Expo, behind the scenes using React Native Package manager to simulate the application and the load dependencies from the app’s
package.json file. The benefit of using Expo XDE is that you do not have to open multiple terminal windows and you can test the app while still developing on a real device. Once it is done with the process of generating a source code of our app, we can start it in a simulator on our local machine to see the default app it comes with.
If you are on Mac, make sure, you have Xcode installed. If you are using Windows, please follow the instructions to install Android Studio to run the simulator.
If you want to skip simulating the app and run it on an actual device without generating any
.ipa, install the Expo client and scan the QR code generated by default by Expo XDE.
Once, bundling of the source code is done you will be prompt with a success message on the Expo XDE terminal:
And you will be able to see that our default app is running on the device:
The message displayed here is the same code that is rendered by
App.js in the root of our app.
and you will see the output being rendered and the app is reloaded live. You don’t have to refresh it to see the changes.
This completes our first getting started step. In the next step, we will build a static prototype of what our app is going to look like.
In this step, we will be developing our first screen, that is going to be a loading screen.
App.js, define a local state:
The above code states that when our local state object
isLoading is false, we will show the name of the application. This is what we are going to render. Later on, instead of displaying the name of application we will be showing the weather here once our API has successfully fetched the data. For now, I am sticking to this message because first, we are going to work on, what if our app is in the state of loading? Let's add a text message to indicate that the app is fetching the data.
When our app is done loading the data from the API, we will set the state of
isLoading to false.
We will define a new Weather component at
./components/Weather.js. The boilerplate code for every weather condition screen is going to be the same. It will be divided into two views, a header, and a body. The header will show the weather condition icon and temperature and the body will display the text associated with the weather condition.
In Weather.js, we will start by defining two containers inside the main container:
bodyContainer. Do note that we are defining Weather component not as a class but a function in order to receive props and since it will not be managing a state.
We will be using
MatericalCommunityIcons that comes with expo (one of the perks) as a sub-library of a humongous library called
This how our app looks after the prototypal stage is complete.
Fetching The Data
To fetch real-time weather data I found Open Weather Map API to be highly useful and consistent. To communicate with the API you are going to need an API key. Register yourself as a user on the site, and get your API key. Please note that it takes at least 10 minutes for Open Weather API to activate the API key. Once it is available, tag along.
Go to the API section and you will see that our need is satisfied by the Current Weather data. I am going to store my API key in
./utils/WeatherAPIKey.jsfile. I know not the best name for a file.
The way the Open Weather API works is that we need to provide it coordinates using device’s location in terms of longitude and latitude. It will then fetch the data from its server which will be a JSON object. From the server, right now we need two things, the temperature, and the weather condition. We should have temperature and the weather condition stored in our local state in
We start by importing the API key we just defined and then updating our state with
fetchWeather where the API of Open Weather Map is called.
The result we get is in JSON format, and if you console log it, you will be able to see the result as a JSON object in Expo terminal where there are a lot of values. We only need the value of temperature and the weather condition. We then update local state with the new values obtained.
&units=metric at the end of our API call converts the temperature from Kelvin to Celsius.
Now, all we have to do is pass the value two of our local state as props to the
Weather Component and then update it such that it can receive those props.
Since we have done the hard part of fetching the real-time data, we must make
Weather component behave dynamically to the values it is getting. All this dynamic part is going to be associated with one thing which we are getting from our local state,
weatherCondition we can define the background changes, title, subtitle and weather icon changes. Let's start by pre-defining weather conditions in a file
These weather conditions are provided from Open Weather API here. Then, let’s import this file in our
Weather.js. We will also define PropTypes now for the two props we are receiving from
App.js. Take a look below, it is simple.
Most of the source code is same. We are now just making some additions by using available props with weather conditions and to dynamically change the background, icon, weather name, and the subtitle. You can play around with the styling to make it look more minimalistic or more exquisite, it is up to you.
Note: Before running the application on your actual device make sure you have internet access and location “on” the device for this app to work. We haven’t talked about App Permissions in this article and it is a bit out of the scope too.
The whole code for this application is available at this Github Repo. I have also published the application on Expo Store here for you to test out. Just scan the QR code and run the application to see what you will be working on this tutorial.