Build a Stunning Weather App with React Native: A Step-by-Step Beginner’s Guide

📘 Chapter 3: Connecting to the Weather API

🧭 What You’ll Learn

By the end of this chapter, you will be able to:

• Understand how APIs work in the context of a mobile app
• Get and configure your OpenWeatherMap API key
• Make GET requests using fetch or axios
• Handle loading states and errors
• Parse and display weather data
• Structure your code to separate logic and UI

🌍 What Is an API and How Do We Use It?

An API (Application Programming Interface) lets your app talk to external services—like OpenWeatherMap, which provides real-time weather data.

In our weather app, we’ll make a GET request to OpenWeatherMap, send a city name, and receive a JSON object with:

• Temperature
• Weather condition
• Humidity
• Wind speed
• Weather icon reference

🔑 Step 1: Get Your OpenWeatherMap API Key

1. Go to https://openweathermap.org/
2. Sign up and verify your email
3. Navigate to the API keys section in your account
4. Copy your default key (you’ll use it in your app)

🔧 Step 2: Install Axios (optional)

You can use the built-in fetch() or install axios for cleaner code.

bash

npm install axios

🔗 Step 3: Build the API Call

Here’s a sample API endpoint (replace with your key):

bash

https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY&units=metric

🔹 Breakdown:

📄 Sample Function Using Axios

jsx

import axios from 'axios';

const API_KEY = 'YOUR_API_KEY_HERE';

export const getWeatherByCity = async (city) => {

  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;

  try {

    const response = await axios.get(url);

    return {

      temp: response.data.main.temp,

      description: response.data.weather[0].description,

      humidity: response.data.main.humidity,

      wind: response.data.wind.speed,

      icon: response.data.weather[0].icon,

    };

  } catch (error) {

    throw error;

  }

};

🧩 Integrate API into Your React Native App

📄 In App.js

jsx

import React, { useState } from 'react';

import {

  View, Text, TextInput, Image, StyleSheet, TouchableOpacity

} from 'react-native';

import { getWeatherByCity } from './api/weatherService';

export default function App() {

  const [city, setCity] = useState('');

  const [weather, setWeather] = useState(null);

  const [loading, setLoading] = useState(false);

  const [error, setError] = useState('');

  const fetchWeather = async () => {

    setLoading(true);

    setError('');

    try {

      const data = await getWeatherByCity(city);

      setWeather(data);

    } catch (e) {

      setError('City not found or API error.');

    } finally {

      setLoading(false);

    }

  };

  return (

    <View style={styles.container}>

      <Text style={styles.title}>☀️ WeatherNow</Text>

      <TextInput

        style={styles.input}

        placeholder="Enter city name"

        value={city}

        onChangeText={setCity}

      />

      <TouchableOpacity onPress={fetchWeather} style={styles.button}>

        <Text style={styles.buttonText}>Get Weather</Text>

      </TouchableOpacity>

      {loading && <Text style={styles.loading}>Loading...</Text>}

      {error ? <Text style={styles.error}>{error}</Text> : null}

      {weather && (

        <View style={styles.resultBox}>

          <Text style={styles.temp}>{weather.temp}°C</Text>

          <Image

            style={styles.icon}

            source={{

              uri: `http://openweathermap.org/img/wn/${weather.icon}@2x.png`,

            }}

          />

          <Text style={styles.description}>{weather.description}</Text>

          <Text>Humidity: {weather.humidity}%</Text>

          <Text>Wind: {weather.wind} km/h</Text>

        </View>

      )}

    </View>

  );

}

🎨 Sample Styles

jsx

const styles = StyleSheet.create({

  container: {

    padding: 20,

    marginTop: 50,

  },

  title: {

    fontSize: 28,

    textAlign: 'center',

    marginBottom: 20,

  },

  input: {

    borderWidth: 1,

    padding: 10,

    borderRadius: 8,

    marginBottom: 10,

  },

  button: {

    backgroundColor: '#0a84ff',

    padding: 12,

    borderRadius: 8,

    alignItems: 'center',

    marginBottom: 20,

  },

  buttonText: {

    color: '#fff',

    fontWeight: 'bold',

  },

  loading: {

    textAlign: 'center',

    marginVertical: 10,

  },

  error: {

    color: 'red',

    textAlign: 'center',

  },

  resultBox: {

    alignItems: 'center',

    marginTop: 20,

  },

  temp: {

    fontSize: 48,

    fontWeight: 'bold',

  },

  icon: {

    width: 100,

    height: 100,

  },

  description: {

    fontSize: 20,

    fontStyle: 'italic',

    marginBottom: 10,

  },

});

🔁 Optional: Using fetch() Instead of Axios

jsx

const getWeatherByCity = async (city) => {

  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;

  const response = await fetch(url);

  if (!response.ok) {

    throw new Error('Error fetching weather');

  }

  const data = await response.json();

  return {

    temp: data.main.temp,

    description: data.weather[0].description,

    humidity: data.main.humidity,

    wind: data.wind.speed,

    icon: data.weather[0].icon,

  };

};

📊 Table: API Response Fields You’ll Use

🔐 Handling API Errors and Edge Cases

❗ Common Issues

🔒 Securing API Keys in React Native (Bonus Tip)

You can use dotenv to avoid hardcoding the API key:

1. Install:

bash

npm install react-native-dotenv

2. Create .env file:

env

WEATHER_API_KEY=your_api_key_here

3. Use it:

jsx

import { WEATHER_API_KEY } from '@env';

Make sure to configure Metro bundler to support react-native-dotenv.

✅ Summary

You now know how to:

• Sign up and use OpenWeatherMap
• Fetch and display real-time weather data in React Native
• Use axios or fetch() for API calls
• Handle user input, loading, and errors

Display weather icon, temperature, humidity, and wind speed