Create a Weather App with Forecast using React-Native

React-Native is an open-source framework used to develop cross-platform applications i.e., you can write code in React-Native and publish it as an Android or IOS app. In this article, we will build a weather app using React-Native.

The app contains two features:

• Getting the current weather of a given city
• Getting the weather forecast for the next few hours.

Preview of the Final Output: Let us have a look at how the final application will look like.

Weather App

Prerequisites

• Basics of Javascript
• React Basic
• React Native Basics
• Node.js and npm
• Expo CLI
• A Basic idea of API calls

Approach to create Weather App:

The app contains two buttons Get Weather button and Get Forecast button. When the Get Weather button clicked, the current weather of input city is given. When the Get Forecast button is clicked, the weather forecast for next few hours is given. We use Open Weather Map API to get the weather information. You can also get your API key from their website for free.

Steps to create our Weather Forecast App

Step 1: Create a React Native app by using this command:

npx create-expo-app WeatherApp

Step 2: Navigate to our project through this command:

cd WeatherApp

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "react-native-paper": "4.9.2",
    "@expo/vector-icons": "^13.0.0"
}

Example: Write the following code in the respective file.

Javascript

// Weather.js

import React, { useState } from 'react';
import { View, Text, Pressable, TextInput } from 'react-native';
import { styles } from './styles';
import { getWeather, getForecast } from './api';

const Weather = () => {
    const [city, setCity] = useState("");
    const [weatherData, setWeatherData] = useState(null);
    const [forecastData, setForecastData] = useState(null);

    const handleGetWeather = () => {
        getWeather(city, setWeatherData, setForecastData);
    };

    const handleGetForecast = () => {
        getForecast(city, setWeatherData, setForecastData);
    };

    return (
        <View style={styles.centeredContent}>
            <Text style={styles.title}>GeeksForGeeks</Text>
            <Text style={styles.title}>Weather App</Text>
            <TextInput
                style={styles.input}
                placeholder="Enter city name"
                value={city}
                onChangeText={setCity}
            />

            <Pressable
                onPress={handleGetWeather}
                style={({ pressed }) => [
                    styles.button,
                    {
                        backgroundColor: pressed ? '#1e8449' : '#2ecc71',
                    },
                ]}
            >
                <Text style={styles.buttonText}>Get Weather</Text>
            </Pressable>
            <Text> </Text>
            <Pressable
                onPress={handleGetForecast}
                style={({ pressed }) => [
                    styles.button,
                    {
                        backgroundColor: pressed ? '#1e8449' : '#2ecc71',
                    },
                ]}
            >
                <Text style={styles.buttonText}>Get Forecast</Text>
            </Pressable>

            {weatherData && (
                <View style={styles.weatherInfo}>
                    <Text style={styles.weatherText}>
                        <Text style={styles.heading}>
                            Temperature:
                        </Text> {weatherData.temperature} °C
                    </Text>
                    <Text style={styles.weatherText}>
                        <Text style={styles.heading}>
                            Description:
                        </Text> {weatherData.description}
                    </Text>
                </View>
            )}

            {forecastData && (
                <View style={styles.weatherInfo}>
                    <Text style={styles.heading}>
                        Forecast for the next few hours: {'\n'}
                    </Text>
                    {forecastData.map((forecastItem, index) => (
                        <Text key={index} style={styles.weatherText}>
                            <Text style={styles.subheading}>Time:</Text>{' '}
                            {new Date(forecastItem.dt * 1000).toLocaleTimeString()},{' '}
                            <Text style={styles.subheading}>Temperature:</Text>{' '}
                            {(forecastItem.main.temp - 273.15).toFixed(2)} °C,{' '}
                            <Text style={styles.subheading}>Description:</Text>{' '}
                            {forecastItem.weather[0].description}
                        </Text>
                    ))}
                </View>
            )}
        </View>
    );
};

export default Weather;

Javascript

// api.js

import { Alert } from "react-native";
export const getWeather = async (city, setWeatherData, setForecastData) => {
    try {
        const apiKey = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key
        const apiUrl =
`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;
        const response = await fetch(apiUrl);
        const data = await response.json();

        // Check if the response contains an error message
        if (data.cod && data.cod !== 200) {
            throw new Error(data.message || 'Failed to fetch weather data');
        }

        // Extract temperature and weather description from the API response
        const temperatureKelvin = data.main.temp;

        // Convert to Celsius
        const temperatureCelsius = (temperatureKelvin - 273.15).toFixed(2);
        const description = data.weather[0].description;

        setForecastData(null);
        setWeatherData({ temperature: temperatureCelsius, description });
    } catch (error) {
        console.error('Error fetching weather data:', error.message);
        Alert.alert('Error', 'Failed to fetch weather data. Please try again.');
    }
};

export const getForecast = async (city, setWeatherData, setForecastData) => {
    try {
        const apiKey = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key
        const apiUrl =
`https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${apiKey}`;
        const response = await fetch(apiUrl);
        const data = await response.json();

        // Check if the response contains an error message
        if (data.cod && data.cod !== '200') {
            throw new Error(data.message || 'Failed to fetch forecast data');
        }

        // Extract relevant forecast information from the API response
        const forecast = data.list.slice(0, 3); // Get forecast for the next few hours

        setWeatherData(null);
        setForecastData(forecast);
    } catch (error) {
        console.error('Error fetching forecast data:', error.message);
        Alert.alert('Error', 'Failed to fetch forecast data. Please try again.');
    }
};

Javascript

// App.js

import React from 'react';
import { View } from 'react-native';
import Weather from './Weather';
import { styles } from './styles';

const App = () => {
    return (
        <View style={styles.container}>
            <Weather />
        </View>
    );
};

export default App;

Javascript

// styles.js

import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({

    container: {
        flex: 1,
        justifyContent: 'center',
    },
    centeredContent: {
        alignItems: 'center',
    },
    title: {
        fontSize: 24,
        fontWeight: 'bold',
        color: '#228B22',
        marginBottom: 20,
    },
    input: {
        height: 40,
        width: '80%',
        borderColor: '#228B22',
        borderWidth: 1,
        borderRadius: 5,
        paddingHorizontal: 10,
        marginBottom: 20,
        color: '#228B22',
    },
    button: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#228B22',
        padding: 10,
        borderRadius: 5,
    },
    buttonText: {
        color: 'white',
        marginLeft: 10,
    },
    weatherInfo: {
        marginTop: 20,
        alignItems: 'center',
    },
    heading: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#228B22',
        marginTop: 10,
    },
    subheading: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#228B22',
        marginTop: 10,
    },
    weatherText: {
        color: '#228B22',
        fontSize: 16,
        marginBottom: 8,
    },
});

Steps to run the application:

Step 1: Type the following command in terminal

npx expo start

Step 2: Depending on your operating system, type the following command

• To run on Android:

npx react-native run-android

• To run on Ios:

npx react-native run-ios

Output:

Weather Forecast App

Note: You can also download the Expo Go app from the Apple App Store (For iOS) or Google Play Store (For Android) to run the app.