- I used React Native, JavaScript and Expo.
- Variable and function names use camelCase.
- Component names are in PascalCase.
It follows a simple architecture with key components:
-
HomeScreen: The main component responsible for displaying weather information and forecasts. It handles data fetching, location access, and rendering the UI.
-
Styles: A separate module containing styling definitions for the components. It enhances code readability and maintainability.
-
Assets: Contains images and icons used in the application, organized based on weather conditions.
-
AsyncStorage: Used for storing weather data locally when there is no internet connection.
- The API key is stored as an environment variable for security.
- It checks for internet connectivity using the NetInfo library and retrieves data from local storage when offline.
- Location permission is requested using the Expo Location library to get the user's coordinates for weather data retrieval.
- Weather conditions are categorized, and appropriate background images and icons are displayed based on the weather condition.
- Temperature units are displayed in Celsius (°C).
- The application handles errors and provides feedback to the user.
The Weather App relies on the following third-party libraries and dependencies:
- React: The core library for building the user interface.
- React Native: A framework for building native mobile apps using React.
- @react-native-community/netinfo: Allows checking the device's internet connectivity status.
- @react-native-async-storage/async-storage: Provides an asynchronous storage system for storing weather data locally.
- expo-location: Enables access to device location information.
- OpenWeatherMap API: Used for fetching weather data based on the user's location.
To build and run the Weather App project, follow these steps:
- Clone the project repository.
- Install the project dependencies by running:
npm install
- Use your API key on
REACT_WEATHER_KEY
in.env.example
ad rename it to.env
. The url forREACT_BASE_URL
is already there. - Run the app on the device by executing:
npm start
- Follow the instructions in the terminal to open the app on your device or simulator.
- The application uses React hooks like
useState
anduseEffect
for state management and side effects. - It includes error handling using
try...catch
blocks to log errors. - The application includes a responsive design that adapts to different screen sizes.
- Forecast data is displayed for the next five days.
- Location access is requested explicitly to ensure proper functionality.
- Weather data is stored locally using AsyncStorage to improve user experience when offline.