A simple weather app for demonstrating react-native skills.
This application uses OpenWeather API to get weather data. You need to register yourself in OpenWeather and put your access token on the enviroment variable WEATHER_API_KEY
in the .env
file.
Warning: If you do not have an account in OpenWeather and need to register a new account, your access token may have a delay to be accessible.
Metro Server is the resource responsibly to starts your application on your phone or on a Android/iOS simulator. You can start this server using the command below.
$ yarn start
You can start this application on your phone using the Expo application. Search on your Play Store(Android) or App Store(iOS) and install Expo.
After installing Expo, open your Camera app or a QR code reader on your phone. Read the QR code shown on your PC.
Firstly, you need to open your Android/iOS simulator. After your Android/iOS simulator is started, you need to start this application interacting with the Expo terminal or Expo Developer Tools on your browser.
- Start Metro Server
$ yarn start
yarn run v1.22.10
Starting project at /home/rmello/Works/weather-app
Developer tools running on http://localhost:19002
Opening developer tools in the browser...
Starting Metro Bundler
› Waiting on exp://192.168.0.11:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
› Press a │ open Android
› Press w │ open web
› Press r │ reload app
› Press m │ toggle menu
› Press d │ show developer tools
› shift+d │ toggle auto opening developer tools on startup (enabled)
› Press ? │ show all commands
Logs for your project will appear below. Press Ctrl+C to exit.
- Press
a
to open this application on your Android emulator.
- Start Metro Server
$ yarn start
- Press
Run on Android device / emulator
orRun on iOS simulator
button to open this application on your Android/iOS simulator.
- React
- React-native
- Expo
- Styled Components
- Multiple pages (although this application has only one page)
- Locate watcher
- i18n localization
- Single responsibility file structure
- Componentes by reusability
- Show on the screen another weather data(like humidity, pressure, feels like, wind speed, etc..);
- Be able to show weather for specific regions and not only for current position;
- Local weather data persist using AsyncStorage and mobx-persist to show the last weather if the device does not have internet access;