Make a Weather Forecasting App using React Native Expo and OpenWeatherMap

With Search option and live location weather information feature

Hello, Native Developers..!!

This going to be quick. I made an app “Skyedge — Weather Forecasting App” and published it in the Google play store. As a beginner, you push yourself to make simple projects with cool UI. Weather Application is one such app for beginners. You should try it. We are going to use openweathermap.org’s API, it has awesome features and it’s easy to implement. Also, we are going to make this application on a native platform. So that you can use this application on both IOS and Android devices.

Take a cup of coffee and let’s begin the hack.

Photo by Esteban Benites on Unsplash

The outcome of this project

The Github code of this project is here.

Set-up of the weather app

start your project using the command: expo init Forecast

Select the blank template and let the downloads complete.

navigate to the “Forecast” folder and install some packages using the command:

npm install @react-navigation/native

npm install @react-navigation/material-bottom-tabs

npm install expo-location

npm install react-native-paper

npm install react-native-vector-icons

We are done with the package installation here. In the project, we are going to make 2 screens. On our first screen, users can get information about the current weather of their current location. On the other screen, users can search the weather information of different cities around the world.

So, Make a folder “Screens” in the same directory. In this folder, we are going to place the code of both the screens we discussed above. We are going to use different components of react-native as well as we are going to make a few components of our own. So, make another folder “Components” which contains the different components of this project, which we are going to use.

Components
|-- Header.js
|-- Search.js
`-- Weather.js
Screens
|-- CityWise.js
|-- Current.js

Add these files inside the directory as stated above.

Make your account on Openweathermap.org. It’s very simple. Activate your account by verifying your email and copy the API Key. We are going to use this API key to fetch the weather data.

Code of weather App

App.js

export default function App() {
return (
<NavigationContainer>
<Tab.Navigator labeled={false} barStyle={{ backgroundColor: '#3399FF' }} activeColor="black" >
<Tab.Screen name="Current" component={CurrentScreen}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={26}/>
),
}}/>
<Tab.Screen name="CityWise" component={CityWiseScreen}
options={{
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="city" color={color} size={26}/>
),
}}/>
</Tab.Navigator>
</NavigationContainer>
);
}

Just create two bottom tab screens in App.js and put them inside a navigation container. You can add Material community icons, it has no copyright issue. The app looks cool with icons.

Header.js

import React from 'react'
import { Appbar, Text} from 'react-native-paper';
function Header() {const _handleMore = () => console.log('Shown more');return (
<Appbar.Header style={{backgroundColor:'#57abff', height:'5%'}}>

<Appbar.Content title={<Text style={{fontSize:30, fontWeight:'bold'}}> Wayu </Text>} style={{width:'100%'}}/>

<Appbar.Action icon="dots-vertical" onPress={_handleMore} />
</Appbar.Header>
);
}export default Header

Make a simple Header and add a title as per your choice. I made the header using react-native-paper.

Search.js

When you want to fetch the weather information of different cities around the world. You need to add a search option for that, where you enter the city name. Here I set the initial cityName as empty and after the user gives the input then the changed state of the cityName is set to “setCityName”. It’s a react hook concept. Set the props of Search as “fetchWeatherData”. The code of search.js is here.

Weather.js

When you look at the API docs of openweathermap.org then you see that the different components are set in different parameters. Like from the main parameter you will get humidity, feels_like, temp, and so on.

Here we are using 2 parameters, weatherData and fetchWeatherData (both from cityWise.js). Below the header, we set the Search Component. After that, we call the component we want to display on our screen from weatherData. It’s basically a UI screen. So, arrange the components as per your choice. The code of my UI of Weather.js is here.

We are done with our components. Now start work in our Screens folder.

CityWise.js

In this file, first, add your API key.

In the function fetchWeatherData, we have set a parameter cityName. Initially, we have set the loaded state to false. Because the data isn’t loaded yet. Then we call the API and pass the parameter of cityName and API_KEY. We know that if the fetch request is successful then the request-response status shows 200. We uses this concept and fetched the data in JSON response. Now store the data in setWeatherData. The initial state “weatherData” is set to null. But after the successful fetch of data the state changes to setWeatherData, and we set the state to setWeatherData. The same goes for the other hook too. We set initially setLoaded to be false but after the successful fetch of data, the state has changed to true. It’s a react-hook concept.

In the useEffect hook, we push the fetchWeatherData and set the cityName parameter as “Madhubani”(My hometown city).

if(!loaded) {
return (
<View style={styles.container}>
<ActivityIndicator color='gray' size={36} />
</View>
)
}

If the data isn’t loaded then our screen will render a loading screen. The same goes for weatherData fetch too. If you misspell the city name or input some unusual name, the screen will render: city not found.

Then Simply fetch the weather data. The code of CityWise.js is here.

Current.js

This one is the same as cityWise.js. But here we fetch data based on the user’s location. First, we ask the user for the Location permission, If they deny it then the screen will show an alert message: “Permission to access location was denied”. If the user allows the location permission then the expo app will fetch the location at high accuracy. Based on the coordinates of the location. We fetch the weather data and convert it into JSON and store them in an array.

Do you know why we used an array? Because we want the data to fetch once. If you don’t store them into an array then with each change in the state the request-response is sent to the server and in this case, you might lose your free service or the server may block you. For example, if we search a city, then the data will be stored in an array of that city. if you change your screen, still you see the data of the searched city. Because you stored it in the array. But if you don’t set any array then with each response, data fetch request-response will be sent to the server.

The rest is UI, and you know UI very well. The code of Current.js is here.

Why I used 2 different API Key

According to Openweathermap.org the limit of request data is 60 per minute. So, If I used the same API at both places then the user may out of request very soon. To overcome this problem you can either purchase or use 2 different API keys for 2 different screens.

Yeahhh…

We are done with this project here. Open your terminal or command prompt and run the command: npm start. Scan the QR code with your device and see this weather app in action.

Thanks for Reading !!, and Clap until your hands bleed