🔴 Build Weather App Using React Native | React Native Projects | Beginners

Introduction

In this tutorial, you'll learn how to build a fully functional weather app using React Native. This project is beginner-friendly and a great addition to your portfolio. You will gain hands-on experience in using APIs, creating user interfaces, and managing state in a React Native application.

Step 1: Set Up the Development Environment

• Install Node.js if you haven't already.
• Install Expo CLI by running the following command in your terminal:

  npm install -g expo-cli
  

• Create a new React Native project:

  expo init WeatherApp
  

• Navigate into your project directory:

  cd WeatherApp
  

• Start the development server:

  expo start
  

Step 2: Install Necessary Packages

• Install Axios for API requests:

  npm install axios
  

• Install Tailwind CSS for styling: Follow the instructions in the video link to apply Tailwind CSS in your project.

Step 3: Get Weather API Key

• Sign up at WeatherAPI to get your API key.
• Once you have your key, keep it handy as you will need it to fetch weather data.

Step 4: Create the App Structure

• Create the necessary components in your project:
  • HomeScreen.js: Main screen for displaying weather information.
  • WeatherCard.js: Component to show individual weather data.
• Organize your files in a logical structure, for example:

  /components
      WeatherCard.js
  /screens
      HomeScreen.js
  

Step 5: Fetch Weather Data

• Use Axios to fetch data from the Weather API in your HomeScreen component. Here’s a sample code snippet:

  import axios from 'axios';
  
  const fetchWeather = async (city) => {
      const apiKey = 'YOUR_API_KEY';
      const url = `http://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${city}`;
      try {
          const response = await axios.get(url);
          return response.data;
      } catch (error) {
          console.error(error);
      }
  };
  

Step 6: Build the User Interface

• Design your HomeScreen using Tailwind CSS classes for a clean and responsive layout. Include:
  • Input field for the city name.
  • Button to fetch weather data.
  • Display area for the weather information.
• Example JSX for the HomeScreen:

  return (
      <View className="flex-1 items-center justify-center">
          <TextInput placeholder="Enter city" className="border p-2" onChangeText={setCity} />
          <Button title="Get Weather" onPress={() => fetchWeather(city)} />
          {weatherData && <WeatherCard data={weatherData} />}
      </View>
  );
  

Step 7: Implement WeatherCard Component

• In the WeatherCard component, display the weather data received from the API, such as:
  • Temperature
  • Condition
  • Location
• Example JSX for WeatherCard:

  const WeatherCard = ({ data }) => {
      return (
          <View className="border p-4 rounded">
              <Text>{data.location.name}</Text>
              <Text>{data.current.temp_c} °C</Text>
              <Text>{data.current.condition.text}</Text>
          </View>
      );
  };
  

Step 8: Test the Application

• Use Expo Go on your mobile device to scan the QR code generated by the Expo server.
• Test the functionality of your weather app by entering different city names.

Conclusion

You have successfully built a weather app using React Native! You've learned how to set up a project, fetch data from an API, and create an interactive user interface. As next steps, consider adding features like:

• A favorites list for cities.
• Enhanced error handling for API requests.
• Styling improvements using Tailwind CSS.

Feel free to explore the source code provided in the video for additional details and enhancements. Happy coding!