A React Native application to show current weather info

About project   |    Technologies   |   Install   |   Config   |   Run   

📝 About

This project consists of an application in React Native using TypeScript to display climatic data based on geo-location.

Two screens were created, the first being a Welcome screen with an access button for the screen with climatic data. It is possible to view information such as the city, temperature, humidity, in addition to having the temperature every hour.

With this development, it was possible to put into practice the use of geo location access with @ react-native-community / geolocation, in addition to using the OpenWeather API to load data based on latitude and longitude, as well as applying styled- components to isolate styles.

🚀 Technologies

The main technologies used were:

• React Native
• TypeScript
• Axios
• OpenWeatherAPI
• React-Native-Maps
• styled-components
• Vector-Icons
• Google-Fonts
• Yarn
• VS Code

💾 Install

To install this application we can use:

$ git clone https://github.com/LucasBBueno/weatherapp
$ cd weatherApp
$ yarn

🔧 Config

In order to consume the OpenWeather API data and use the location of react-native-maps, it is necessary to change the API key for each one respectively.

#####OpenWeather To generate the API key for open weather you must follow the following tutorial. After being generated, we will change the file openWeatherApiKey.ts

export const apiKey = 'apy key here';

#####GoogleMaps In the case of Google Maps, we can follow this tutorial. With that, we must change the file AndroidManifest.xml.

<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="Put Here you API key"/>;

💿 Run

With the apis keys configured, we can execute the project through:

$ yarn android

---

This project allowed to put into practice some of the main concepts when talking about a mobile application.

I am available for any questions.

Made with ❤️ by Lucas Bueno 👋 Get in touch!.