Weather API — React Native. This is a brief description on the…
By: Alisha Vineeth
Tags: Weather Api, React Native, Weather, Openweathermap Api

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;

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!