React Weather App

This is a simple weather application built with React Native and Expo. It fetches weather data from the WeatherAPI.

Features

• Display current weather information
• Show weather forecast for the next 7 days
• Include weather icons and temperature details

Installation

To run this project locally, follow these steps:

Step 1: Install Node.js and npm

First, you need to install Node.js and npm. Download the prebuilt installer from the Node.js website and follow the installation instructions.

Step 2: Create a New Expo App

Open your terminal and run the following command to create a new Expo app using the template:

npx create-expo-app --template

Step 3: Navigate to Your App Directory

Change to your app directory with the following command:

cd yourAppName

Step 4: Install React Native Heroicons and React Native SVG

To use Heroicons in your app, install react-native-heroicons and react-native-svg:

npm install react-native-heroicons react-native-svg

Step 5: Install React Native Progress

Next, install react-native-progress to display progress indicators in your app:

npm install react-native-progress

Step 6: Install Axios

Install axios to make HTTP requests to fetch weather data:

npm install axios

Step 7: Set Up TailwindCSS with NativeWind

a. Install NativeWind

npm install nativewind

b. Install TailwindCSS

Install TailwindCSS as a development dependency:

npm install --save-dev [email protected]

c. Initialize TailwindCSS

Run the following command to create a TailwindCSS configuration file:

npx tailwindcss init

d. Configure TailwindCSS

Replace the contents of tailwind.config.js with the following configuration:

// tailwind.config.js
module.exports = {
  content: ["./App.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

e. Configure Babel

Replace the contents of babel.config.js with the following configuration:

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["nativewind/babel"],
  };
};

Step 8: Start the Expo Development Server

Finally, start the Expo development server with the following command:

npx expo start

If you need to use the tunnel option, use:

npx expo start --tunnel

Usage

After starting the development server, you can run the app on a physical device using the Expo Go app.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• WeatherAPI for providing the weather data
• React Native and Expo for the development framework