Weather API — React Native
This is a brief description on the Weather API provided by OpenWeatherMap. The Weather API is free, you only need to sign up and get your API key from https://openweathermap.org/api. You will need to pass the key with all the API calls. Data is available in JSON, XML, or HTML format.
There are various APIs for getting weather and forecast data like Current Weather Data, Minute, Hourly and Daily Forecast, 5 day 3 hours forecast where we get the weather data updated every 3 hours for 5 days etc,. We can get the historical weather data collection and also bulk download them. We can also view the Forecast, Historical and Current Weather Maps by calling the maps API.
Current Weather Data
With the weather API, we can get the weather data of different locations.Weather data of a specific location can be obtained by
- City Name
- City ID
- Geographical Cordinates
- Zipcode
The parameters, request urls and response samples are available on the official documentation. We can also get the current weather data for several cities by grouping them in a rectangular or circular area based on the geographic cordinates provided. For several cities together, data will be available only in JSON format.
Example
A sample app that fetches the current weather data of a location(city) by taking City Name as input.
Source Code :
import React, {Component, useEffect, useState} from 'react';
import {View, Text, TouchableOpacity, TextInput} from 'react-native';function Weather() {const [placeName, setPlaceName] = useState('');
const [weatherData, setWeatherData] = useState({});function weatherRequest() {
return new Promise(function (resolve, reject) {
setTimeout(() => {
reject('Request failed.Please try again');
}, 40000);let url ='https://api.openweathermap.org/data/2.5/weather?q=' +placeName +'&APPID={YOURAPIKEY}';fetch(url).then((response) => {
return Promise.all([response.status, response.json()]);
}).then((responseJson) => {
// console.log('response json', responseJson);
resolve({
statusCode: responseJson[0],
data: responseJson[1],
});
})
.catch((error) => {
console.log('error', error);
reject(error);
});
});
}return (
<View style={{flex: 1}}>
<View
style={{
marginTop: '30%',
alignSelf: 'center',
alignItems: 'center',
justifyContent: 'center',
width: '80%',
}}><Text
style={{
alignSelf: 'flex-start',
color: '#48a7c7',
padding: 8,
fontSize: 18,
}}> Place Name : </Text><TextInput
style={{
borderWidth: 0.5,
borderRadius: 10,
width: '100%',
fontSize: 18,
}}
placeholder="Enter Place Name"
placeholderTextColor="grey"
underlineColorAndroid="transparent"
autoCapitalize="words"
onChangeText={(text) => setPlaceName(text)}/>
</View><TouchableOpacity
style={{
padding: 10,
backgroundColor: '#48a7c7',
width: '70%',
alignSelf: 'center',
alignItems: 'center',
margin: 10,
marginTop: '6%',
borderRadius: 10,
}}onPress={() => {
weatherRequest().then((res) => {
setWeatherData(res.data);
});
}}>
<Text style={{color: 'white', fontSize: 20}}> WEATHER</Text></TouchableOpacity>
{Object.keys(weatherData).length !== 0 && (
<View
style={{
alignItems: 'center',
width: '60%',
alignSelf: 'center',
elevation: 5,
backgroundColor: '#a4d4e4',
borderRadius: 10,
padding: 10,
marginTop: '5%',
}}><Text style={{fontSize: 35, color: '#48a7c7'}}>
{weatherData.name}
</Text><Text style={{color: 'white', fontSize: 20, marginTop: '3%'}}>
{weatherData.main.temp - 273.15} °C
</Text><Text style={{color: 'white', fontSize: 22}}>{weatherData.weather[0].main}
</Text><Text style={{color: 'white', fontSize: 22}}>{weatherData.weather[0].description}
</Text><Text style={{color: 'white', fontSize: 22}}>Humidity : {weatherData.main.humidity}
</Text><Text style={{color: 'white', fontSize: 22}}>
Pressure : {weatherData.main.pressure}
</Text>
</View>
)}
</View>
);
}export default Weather;
Similarly, forecasts on minute, hour and daily basis can be obtained for the location provided. In case of bulk downloading, current weather and forecasts files can be obtained. They also provide multilingual support where you can use the lang parameter to get the output in your language. Translation is applied for the city name and description fields.
Apart from these free APIs and features, they also provide additional set of features on subscription. Details on the different plans, subscriptions and pricing can be found here https://openweathermap.org/price.
References
Thank You!