Make a Weather Forecasting App using React Native Expo and OpenWeatherMap
With the 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.
Video Tutorial
In part 2, you can use the search feature to fetch the weather data of the different cities.
Set-up up 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 for 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 copying the API Key. We are going to use this API key to fetch the weather data.
Code of Weather App
Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad
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 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 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 with 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 for 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 be 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
