A modern, feature-rich weather application built with React Native and Expo. This app provides current weather conditions, 5-day forecasts, and location-based weather data with a beautiful, intuitive interface.
- 📍 Location-based Weather: Automatic location detection with GPS fallback to IP-based location
- 🔍 Smart Search: Search for cities and addresses with autocomplete functionality
- 🌡️ Current Weather: Real-time weather conditions including temperature, humidity, wind speed, and more
- � 5-Day Forecast: Detailed weather forecast with hourly breakdowns
- 💾 Recent Locations: Quick access to recently searched locations
- 🎨 Beautiful UI: Modern design with gradients, glassmorphism effects, and smooth animations
- 📱 Cross-platform: Works on iOS, Android, and web
This application follows a modular, scalable architecture built with modern React Native and TypeScript patterns:
- React Native 0.79.6 - Cross-platform mobile framework
- Expo SDK 53 - Development platform and tooling
- TypeScript - Type safety and enhanced developer experience
- Redux Toolkit - State management with modern Redux patterns
- React Navigation 7 - Navigation and routing
- Expo Location - GPS and location services
- Expo Linear Gradient - Beautiful gradient effects
src/
├── components/ # Reusable UI components
│ ├── Loader/ # Loading indicators
│ └── index.ts # Component exports
├── hooks/ # Custom React hooks
│ └── redux.ts # Typed Redux hooks
├── navigation/ # Navigation configuration
│ └── index.tsx # Main navigation setup
├── screens/ # Screen components
│ ├── Location/ # Weather display screen
│ └── Search/ # Location search screen
├── services/ # External service integrations
│ ├── location/ # GPS and location services
│ └── network/ # API services
│ ├── autocomplete/ # Location search API
│ └── open-weather/ # Weather API integration
├── stores/ # Redux state management
│ ├── locations/ # Location and recent searches state
│ └── index.ts # Store configuration
├── types/ # TypeScript type definitions
│ ├── models.ts # Data models and interfaces
│ └── navigation.ts # Navigation type definitions
└── App.tsx # Root application component
-
Install dependencies
yarn install cd ios pod install cd ..
-
Configure environment variables (optional)
Create a
.envfile in the root directory and add your API keys:EXPO_PUBLIC_WEATHER_API_KEY=your_openweather_api_key EXPO_PUBLIC_SLPY_API_KEY=your_slpy_api_key
Note: The app includes some mock data and will work without API keys for development and testing.
-
Start the app
npx expo start
In the output, you'll find options to open the app in a
- development build
- Android emulator
- iOS simulator
- Expo Go, a limited sandbox for trying out app development with Expo
You can start developing by editing the files inside the src directory.
The application uses Redux Toolkit for centralized state management:
- Location State: Manages current selected location and recent location history
- Typed Hooks: Custom hooks (
useAppDispatch,useAppSelector) provide type safety - Persistence: Recent locations are automatically managed with a maximum of 10 entries
- Current Weather: Real-time weather conditions
- 5-Day Forecast: Detailed weather predictions with 3-hour intervals
- Fallback: Mock data for development when API key is not configured
- Error Handling: Graceful degradation with user-friendly error messages
- GPS Location: Primary location source using Expo Location
- IP Fallback: Secondary location detection using IP geolocation
- Search Autocomplete: SLPY API integration for location search with fallback to mock data
-
App Launch:
- Attempts to get user's current location
- Shows loading screen during location fetch
- Navigates to appropriate screen based on location availability
-
Screen Flow:
- Search Screen: Location selection and recent locations
- Location Screen: Weather display and forecast
- LocationScreen: Weather data display with current conditions and forecast
- SearchScreen: Location search with autocomplete and recent locations management
- Loader: Flexible loading indicators with customizable text and full-screen options
- Styled Components: Consistent styling with theme-based approach
The app uses strongly-typed interfaces for all data:
interface Location {
geoLocation: GeoLocation;
city?: string;
country?: string;
}
interface CurrentWeather {
location: WeatherLocation;
current: WeatherData;
}
interface WeatherForecast {
location: WeatherLocation;
forecast: ForecastData;
}- API Failures: Graceful fallback to mock data
- Location Permissions: IP-based location when GPS is denied
- Network Issues: User-friendly error messages and retry mechanisms
- Type Safety: Comprehensive TypeScript coverage prevents runtime errors
- Debounced Search: Prevents excessive API calls during user input
- Memoized Components: React.memo for navigation components
- Efficient State Updates: Redux Toolkit's immer-based state updates
- Image Optimization: Expo Image for efficient weather icon loading
- Mock Data: Complete mock data sets for development without API keys
- TypeScript: Full type coverage for enhanced developer experience
- ESLint: Code quality and consistency enforcement
- Hot Reload: Instant development feedback with Expo dev tools
npm start- Start the Expo development servernpm run android- Start on Android device/emulatornpm run ios- Start on iOS device/simulatornpm run web- Start web versionnpm run lint- Run ESLint for code quality checksnpm test- Run Jest test suitenpm run test:watch- Run tests in watch modenpm run test:coverage- Run tests with coverage report
This project includes comprehensive Jest tests with 100+ test cases covering:
- Component Testing: React Native component rendering and interactions
- Service Testing: API integrations with real and mock data
- State Management: Redux store and action testing
- Navigation: Screen navigation and routing
- Environment Variables: Tests use
process.envfor API keys (no hardcoded secrets) - Mock Fallbacks: Tests work without real API keys using mock data
- CI/CD Ready: Tests can run in CI environments with environment variable injection
- Git Safety:
.envfile is gitignored to prevent accidental key commits
# Run all tests
npm test
# Run specific test file
npm test -- open-weather.test.ts
# Run tests with coverage
npm run test:coverage
# Watch mode for development
npm run test:watch- Sign up at OpenWeather
- Get your free API key
- Add
EXPO_PUBLIC_WEATHER_API_KEY=your_key_hereto your.envfile
- Sign up at SLPY
- Get your API key for enhanced location search
- Add
EXPO_PUBLIC_SLPY_API_KEY=your_key_hereto your.envfile
Note: Both APIs have generous free tiers suitable for development and moderate usage.
- iOS: Use EAS Build for App Store deployment
- Android: Use EAS Build for Google Play Store deployment
- Static Export: Built-in support for static web deployment
- Hosting: Deploy to Vercel, Netlify, or any static hosting service
To learn more about developing your project with Expo, look at the following resources:
- Expo documentation: Learn fundamentals, or go into advanced topics with our guides.
- Learn Expo tutorial: Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
Join our community of developers creating universal apps.
- Expo on GitHub: View our open source platform and contribute.
- Discord community: Chat with Expo users and ask questions.