react-native-weather provides a React Native <WeatherWidget /> component that takes in props and generates a widget containing the current weather conditions & temperature.
In order to use this widget, you will need a WeatherUnderground API key. Click here to sign up for a Weather Underground API key.
npm i --save react-native-weather
To use the WeatherWidget, import the WeatherWidget from 'react-native-weather', placing curly braces around WeatherWidget in your import statement:
...
import { WeatherWidget } from 'react-native-weather';
...Then place the <WeatherWidget /> component in your render(){ return(); } method, passing your DarkSky.net API key, your latitude (lat), and your longitude(lng) through it as props:
...
render() {
return(
<WeatherWidget
api={"your-api-key-here"}
lat={"lat"}
lng={"lng"}
/>
);
}<WeatherWidget /> should have a parent view with a style prop of Flex: 1.
Northern latitudes and eastern longitudes are positive values, while southern latitudes and western longitudes are negative(-) values.
i.e.: If the location you are passing through the widget is in the northwestern hemisphere, you will pass it through as: lat={"val"} lng={"-val"}.
<WeatherWidget /> also accepts the optional prop location={"location"}, which will render a string in the left title area of the widget.
If you do not pass a location prop through WeatherWidget, the default text for the widget title area will read "Current Weather".
react-native-weather was coded by Nick West
Like this kind of thing? Buy Nick a coffee via Patreon support!