https://github.com/rit3zh/react-native-weather-app
React Native Weather App provides real-time weather updates using the OpenWeather API and Firebase. It offers location-based forecasts, search functionality, and a weather history feature, all in a clean and user-friendly interface.
https://github.com/rit3zh/react-native-weather-app
open-weather-api react react-native react-native-weather typescript weather
Last synced: 4 months ago
JSON representation
React Native Weather App provides real-time weather updates using the OpenWeather API and Firebase. It offers location-based forecasts, search functionality, and a weather history feature, all in a clean and user-friendly interface.
- Host: GitHub
- URL: https://github.com/rit3zh/react-native-weather-app
- Owner: rit3zh
- Created: 2024-11-27T19:30:30.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-12-01T20:30:46.000Z (5 months ago)
- Last Synced: 2024-12-16T05:45:46.561Z (4 months ago)
- Topics: open-weather-api, react, react-native, react-native-weather, typescript, weather
- Language: TypeScript
- Homepage:
- Size: 2.56 MB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Weather App
**React Native Weather** is an open-source, feature-rich weather application designed to provide accurate and up-to-date weather forecasts. With a clean and intuitive user interface, it ensures you always stay informed about the weather conditions in your area and beyond.
## Features 🚀
- **Fetch Default Location**: Automatically detects and displays weather for your current location.
- **Real-Time Weather Data**: Fetches weather updates in real time using the OpenWeather API.
- **Firebase Integration**: Leverages Firebase for real-time data synchronization, including history and search.
- **Search Locations**: Search for weather details of any city or location with instant results.
- **Real-Time History**: Automatically updates your weather search history in real time.
- **User-Friendly Interface**: Minimalistic and responsive design for a seamless experience.
## Screenshots
| | | |
| :-------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------: |
| 
| 
| 
|
| 
| 
| 
|
## How to Use the App 🚀
To get started with the WeatherApp, follow these steps:
1. **Clone the Repository**
```bash
git clone https://github.com/rit3zh/react-native-weather-app
cd react-native-weather-app
```
2. **Set Up Environment Variables**
Create a `.env` file in the project root with the following content:
```env
EXPO_PUBLIC_USER_SECRET_KEY= #anything unique
EXPO_PUBLIC_WEATHER_API_KEY= #https://openweathermap.org/
EXPO_PUBLIC_WEATHER_CURRENT_API_KEY= #Not required
EXPO_PUBLIC_IP_KEY= #https://ipinfo.io
```
Replace ``, ``, ``, and `` with your own keys.
3. **Configure Firebase**
Set up Firebase by creating a `db/index.ts` file and adding the following code:
```typescript
import { initializeApp, FirebaseOptions } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig: FirebaseOptions = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: "",
};
export const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
```
Replace placeholders like `` with your Firebase configuration.
4. **Install Dependencies**
Install all required packages:
```bash
npm install
```
5. **Run the Application**:
```bash
yarn start --reset-cache
```
6. **Explore the App**
- Access real-time weather updates.
- Search for weather in other cities.
- Check your weather search history.
---
### ⭐ Consider leaving a Star if you like this repository. ⭐