Weather App 🌤️

A modern React Native weather application built with Expo Router, featuring real-time weather data and beautiful UI.

Features

• 🌍 City Search with Autocomplete - Smart city suggestions as you type
• 🌤️ Real-time Weather Data - Current weather conditions from WeatherAPI
• 📱 Modern UI - Clean, intuitive design with floating tab bar
• 🎨 Cross-platform Icons - SF Symbols on iOS, Material Icons on Android
• 📊 Detailed Weather Info - Temperature, humidity, wind, pressure, UV index, visibility
• 🚀 Smooth Navigation - Auto-redirect to weather details after city selection

Screenshots

Home Screen

• City search with live autocomplete
• Floating modern tab bar

Weather Details

• Comprehensive weather information
• Visual weather parameter cards with icons
• Responsive design for all screen sizes

Tech Stack

• React Native - Cross-platform mobile framework
• Expo Router - File-based navigation
• TypeScript - Type-safe development
• WeatherAPI - Real-time weather data
• Space Grotesk Font - Modern typography
• SF Symbols / Material Icons - Platform-specific icons

Installation

1. Clone the repository

   git clone <repository-url>
   cd rn-weather-app

2. Install dependencies

   npm install

3. Setup Environment Variables

   cp .env.example .env.local

   Edit .env.local and add your WeatherAPI key:

   API_URL=http://api.weatherapi.com/v1/current.json?
   API_KEY=your_api_key_here
   

4. Get WeatherAPI Key

   • Sign up at WeatherAPI.com
   • Get your free API key
   • Add it to .env.local

5. Start the development server

   npx expo start

Available Scripts

• npm start - Start Expo development server
• npm run android - Run on Android device/emulator
• npm run ios - Run on iOS device/simulator
• npm run web - Run in web browser
• npm run lint - Run ESLint

Project Structure

app/
├── (tabs)/
│   ├── index.tsx      # Home screen with city search
│   ├── weather.tsx    # Weather details screen
│   └── _layout.tsx    # Tab layout with floating bar
components/
├── ui/
│   ├── icon-symbol.tsx     # Cross-platform icons
│   └── icon-symbol.ios.tsx # iOS-specific icons
types/
└── env.d.ts          # Environment variables types

API Integration

WeatherAPI Endpoints Used

• search.json - City autocomplete suggestions
• current.json - Current weather data

Weather Data Displayed

• Current temperature (°C)
• Weather condition
• Feels like temperature
• Humidity percentage
• Wind speed and direction
• Atmospheric pressure
• Visibility distance
• UV index
• Cloud coverage

Deployment

Expo Build

# Build for production
eas build --platform all

# Preview build
eas build --platform all --profile preview

App Store Deployment

# Submit to app stores
eas submit --platform all

Environment Setup

Make sure to have:

• Node.js 18+
• Expo CLI
• Valid WeatherAPI key

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License.

Acknowledgments

• WeatherAPI for providing weather data
• Expo for the amazing development platform
• SF Symbols for iOS icons
• Material Icons for Android icons