dionarodrigues/openweathermap-reactnative

Weather, everybody wants to know how it is going to be during the week. Will it be rainy, windy, or sunny? Luckily for us, in the information age, there are open APIs to retrieve information about it.

React Native OpenWeather App

OpenWeather is a project created by Lucas Montano initially as an One-Day-Challange, then he decided to create an Open Source project to help his followers and everyone getting started with Open Source world building a basic but very strategic application!

---

Table of Contents

• Getting Started
• Features
• Contributing
• Support
• License
• Other Platforms

---

🚀 Getting Started

Prerequisites

• To run any React Native application you need to configure the environment on your machine.

• Setting the environment is a complex process, so it's recommended to follow the Rocketseat guide which is currently the most complete and detailed to make the settings:

Rocketseat Guide

Clone

• Clone this repo to your local machine using:

https://github.com/lucasmontano/openweathermap-reactnative

Setup

Android

• Configure the Google Maps API Key, follow the instructions in: https://developers.google.com/maps/documentation/android-sdk/get-api-key to generate a new api key.

• Rename the file 'android/local.properties.example' to 'android/local.properties' and change the string with your api key.

• $ react-native run-android

iOS - MAC Only

• cd ios && pod install && cd ..

• react-native run-ios

---

📋 Features

Documentation

• Explore the Earth Weather forecast (Real Time)
• Check detailed information about the weather by coordinates (lat, lon)
• Bookmark a location
• Visualize all bookmarked locations in the map
• Remove a bookmark
• Data Cache
• Theme Switcher (Light/Dark Mode)
• One way data flow (implement a state reducer)
• Unique source of truth, implementing a centralized repository
• Search functionality
• Five+ days forecast
• Write some tests (of course)

Build with

• Core
  • React Native - A framework for building native apps with React
• Navigation
  • React Navigation - Routing and navigation for your React Native apps
• Debugging
  • Reactotron - Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and React Native apps
• Styling
  • Styled Components - Use the best bits of ES6 and CSS to style your apps without stress
• HTTP Comunication
  • Axios - Promise based HTTP client for the browser and node.js
• Type Checking
  • prop-types - Runtime type checking for React props and similar objects
• Linting
  • ESLint - Find and fix problems in your JavaScript code
  • Prettier - Prettier is an opinionated code formatter
• Extra
  • react-native-gesture-handler - Declarative API exposing platform native touch and gesture system to React Native
  • babel-plugin-root-import - Babel plugin to add the opportunity to use import and require with root based paths
  • eslint-config-airbnb - A mostly reasonable approach to JavaScript

---

🤔 Contributing

To get started...

Step 1

• 🍴 Fork this repo!

Step 2

• 👯 Clone this repo to your local machine using https://github.com/lucasmontano/openweathermap-reactnative.git

Step 3

• 🎋 Create your feature branch using git checkout -b my-feature

Step 4

• ✅ Commit your changes using git commit -m 'feat: My new feature';

Step 5

• 📌 Push to the branch using git push origin my-feature;

Step 6

• 🔃 Create a new pull request

After your Pull Request is merged, can you delete your feature branch.

---

📌 Support

Reach out to me at one of the following places!

• Twitter at @lucas_montano
• Instagram at @lucasmontano
• Linkedin at Lucas Montano
• Youtube at Lucas Montano

---

📝 License

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

---

⚒ Other Platforms

Open Weather on Other Platforms:

• Android: https://github.com/lucasmontano/openweathermap
• iOS: https://github.com/lucasmontano/openweathermap-ios
• Flutter: https://github.com/lucasmontano/openweathermap-flutter

---

Made with ♥ Enjoy it!