Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pierreamgabriel/react-native-weather-api
Real-time weather information for any location on Earth, including over 200,000 cities.
https://github.com/pierreamgabriel/react-native-weather-api
react-native weather-api
Last synced: 2 months ago
JSON representation
Real-time weather information for any location on Earth, including over 200,000 cities.
- Host: GitHub
- URL: https://github.com/pierreamgabriel/react-native-weather-api
- Owner: pierreamgabriel
- License: mit
- Created: 2018-09-10T17:18:30.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-07-12T16:16:05.000Z (over 1 year ago)
- Last Synced: 2024-11-06T10:04:49.762Z (2 months ago)
- Topics: react-native, weather-api
- Language: TypeScript
- Homepage:
- Size: 628 KB
- Stars: 13
- Watchers: 2
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Weather API
Real-time weather information for any location on Earth, including over 200,000 cities.
## Installation
```bash
npm install react-native-weather-api
```
You must also install @react-native-community/geolocation:
```bash
npm install @react-native-community/geolocation
```
## Permission
**Android**
To request access to location, you need to add the following line to your app's AndroidManifest.xml:
```xml
```
**iOS**
You need to include the `NSLocationWhenInUseUsageDescription` key in Info.plist to enable geolocation when using the app. Geolocation is enabled by default when you create a project with `react-native init`.
## Usage
This plugin uses the OpenWeather API to show weather information, so you need to create an account on https://openweathermap.org and get your key. Free accounts are allowed to perform 1,000,000 calls/month and 60 calls/minute.
### Import the plugin
```javascript
import { getWeather, dailyForecast, showWeather, getLocation } from 'react-native-weather-api';
```
### API calls
**By geographic coordinates**
When using coordinates, you can't pass the city and ZIP code parameters.
```javascript
let temp;
let wind;
getLocation().then((location) => {
getWeather({
key: "your_key",
lat: location.coords.latitude,
lon: location.coords.longitude,
unit: "metric"
}).then(() => {
let data = new showWeather();
temp = data.temp;
wind = data.wind;
});
});
```
**By city name**
When calling by city name, you can't pass the latitude, longitude, and ZIP code parameters.
```javascript
let temp;
let wind;
getWeather({
key: "your_key",
city: "London",
country: "GB"
}).then(() => {
let data = new showWeather();
temp = data.temp;
wind = data.wind;
});
```
**By ZIP code**
This method doesn't seem to work with all countries. For example, the API didn't recognize ZIP codes from Brazil during my tests.
Don't pass the latitude, longitude, and city parameters.
```javascript
let temp;
let wind;
getWeather({
key: "your_key",
zip_code: "90001",
country: "US"
}).then(() => {
let data = new showWeather();
temp = data.temp;
wind = data.wind;
});
```
## Parameters
`key` - Your OpenWeather key.
`lat` - Latitude.
`lon` - Longitude.
`city` - City name, e.g., Los Angeles.
`country` - Country code, e.g., US, CA, GB.
`zip_code` - Numeric or alphanumeric codes, e.g., 90001.
`unit` - If you set it to `metric`, the temperature will be in Celsius and wind speed in meter/s. If you choose `imperial`, the temperature will be in Fahrenheit and wind speed in miles/h. If you don't set this parameter, Kelvin and meter/s are the standards.
`lang` - The output language for the city name and description fields, e.g., en, pt_br, fr, es.
## Identifiers
`name` - Location name.
`country` - Country name.
`temp` - Temperature.
`temp_min` - Minimum temperature.
`temp_max` - Maximum temperature.
`feels_like` - Feels like temperature.
`wind` - Wind speed.
`pressure` - Pressure.
`humidity` - Humidity.
`description` - Weather description, e.g., clear sky.
`icon` - Weather icon URL.
## Daily forecast for 7 days
With only one call, you can get weather information for 7 days plus the current day.
```javascript
let temp_min;
let temp_max;
let description;
getLocation().then((location) => {
dailyForecast({
key: "your_key",
lat: location.coords.latitude,
lon: location.coords.longitude,
unit: "metric"
}).then((data) => {
temp_min = data.daily[0].temp.min;
temp_max = data.daily[0].temp.max;
description = data.daily[0].weather[0].description;
});
});
```
The `dailyForecast` function only accepts latitude and longitude to determine the location. In the example, we retrieved the minimum and maximum temperature and the weather description for the current day. If we wanted information for the following day, we'd change `daily[0]` to `daily[1]`, and so on up to `daily[7]`. To see all the fields available besides the ones we used in this section, create an `alert(JSON.stringify(data, null, 4))`, but don't forget to remove it before building for production.
## 5 day / 3 hour forecast data
Forecast for 5 days with data every 3 hours.
```javascript
let temp;
let description;
getLocation().then((location) => {
fiveDaysForecast({
key: "your_key",
lat: location.coords.latitude,
lon: location.coords.longitude,
unit: "metric"
}).then((data) => {
temp = data.list[0].main.temp;
description = data.list[0].weather[0].description;
});
});
```