Giter VIP home page Giter VIP logo

weather-app-react-native's Introduction

Weather-App-React-Native

An app that uses the device location to fetch the weather info using the Open Weather API and displays it on screen. The app is made with React Native, Styled-Components and Redux Toolkit.

Description

Geolocation:

The app uses the third party library react-native-get-location (https://www.npmjs.com/package/react-native-get-location) to get the device location and then stores it to the deviceLocationSlice.

IMG_4526

State Management

Redux-Toolkit is the most recent and less verbose version of the Redux library. It requires much less boilerplate code to configure the store and to write the slices. Our store contains only 3 slices (features). It even contains a loading slice to determine when to display an activity indicator for letting the user know when the app is fetching data from the API. It also disables the "Update Weather" button.

IMG_4531

Home Screen

The Home screen displays all the information presented by the app. In total, there are 2 view components and 1 button component that the screen should be able to know when to display. It uses the timestamp fetched from the api call to determine if the weather data was stored to the redux object and when to show either the data or the welcome view.

IMG_4525

API Call and Weather Data

The app makes a call to only one of OpenWeather's API endoints, the current weather endpoint (https://openweathermap.org/current). It displays simple weather info like the current temperature, min and max temperatures that day, the sunrise and sunset times as well as wind speed. It also shows the current weather condition and an icon provided by Open Weather.

IMG_4528

weather-app-react-native's People

Contributors

gr1mmd4n avatar dangr1mm avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.