Navigator App

A simple React Native App that harnesses the power of the expo-location library in 3 different ways

Description

The Navigator App is a mobile application that utilizes navigation features to provide users with a seamless experience. It incorporates three main functionalities: user login, location permission, and three major pages

  • Card Page,
  • Weather Page
  • Map Page.

Summary

The Navigator App employs navigation techniques to enhance user interaction and provide convenient access to various features. With user login and location permission, it ensures personalized experiences and utilizes the user’s location for relevant functionalities. The Card Page displays the user’s details, including information entered during login, along with their longitude and latitude. The Weather Page presents the user with their current weather conditions and allows them to search for weather information in other cities. Lastly, the Map Page displays a map interface for users to explore and navigate.

Running This Application

  1. This is a simple repository and doesnt need much contributions hence there is no need to fork this repository

  2. Clone this repository to your local environment

git clone https://github.com/Secure-Mobile-App-Development/expo-location.git
  1. Enter the projects directory
cd expo-location
  1. Install all the dependencies required for this project
npm install
  1. Create a .env file in the root directory and initialize two variables with the following names

MAPS_API_KEY="YOUR TOMTOM MAP API KEY" 
// get the key from here https://developer.tomtom.com/user/register?destination=/how-to-get-tomtom-api-key#
WEATHER_API_KEY="YOUR OPEN WEATHER API KEY" 
// get the key from here https://openweathermap.org/api
  1. Start the expo development server using the following command
npx expo start

Output

The Navigator App delivers a visually appealing and user-friendly interface, providing the following outputs:

Card Page Description
The Card Page displays the user’s details, including information entered during login, along with their longitude and latitude. User details and location information displayed on the Card Page. The Card Page displays the details provided by the user during the registration process. This data includes the Users

  • userName
  • Phone Number
  • Email

On this page itself, his Longitude and Latitude is displayed so that the user can verify it. The display is made simply in a card-like fashion for better readability.

Weather Page Description
This component has two major features: Current Location Weather: The Weather Page automatically fetches and displays the weather details of the user’s current location. Users can quickly glance at the temperature, humidity, wind speed, and other relevant data. City-based Weather Search: Users have the option to input a city name and retrieve weather information for that specific location. This feature allows users to stay informed about weather conditions in different cities worldwide. It provides details of

  • Current Temperature
  • Min and Max temperature
  • Humidity
  • Density
Map Page Description
The Map Page displays a map interface that allows users to visually explore various locations. It provides an intuitive and interactive experience for users to interact with the map and perform the following actions:

  • Zoom In/Out: Users can zoom in or out on the map to get a closer look at specific areas or have a broader view of the surrounding regions.
  • Pan and Navigate: Users can pan and navigate across the map by dragging and swiping to explore different regions and locations.
  • Markers and Pins: The Map Page supports the display of markers or pins on the map to mark specific points of interest or locations. These markers can be customized to represent different categories or types of places.
  • Info Windows: When users interact with a marker or pin on the map, an info window can be displayed to provide additional details or information about that specific location.
  • Geolocation: The Map Page can utilize the user’s device’s geolocation capabilities to center the map on their current location, providing a more personalized and relevant experience.
  • Search Functionality: Users may have the option to search for specific addresses, landmarks, or points of interest on the map. The search functionality can help users find and navigate to desired locations quickly.
  • Custom Overlays: In addition to markers and pins, the Map Page may support custom overlays, such as polygons, polylines, or circles, to visually represent areas, routes, or boundaries on the map.

The Map Page offers a seamless and engaging experience for users to explore and navigate different locations. It provides various interactive features and customization options to enhance the usability and functionality of the map component within your application.

Current weather conditions displayed on the Weather Page, including temperature, humidity, wind speed, and other relevant data. Weather information for other cities accessible through search functionality on the Weather Page. A dynamic map interface displayed on the Map Page, allowing users to interact and explore various locations.

Use Cases

The Navigator App can be utilized in several scenarios, including:

Navigation and travel applications: Users can access real-time weather data, view their location details, and explore maps for navigation purposes. Personalized experiences: By requiring user login and permission, the app ensures customized experiences based on user preferences and location. Weather information retrieval: Users can easily obtain weather details for their current location and search for weather forecasts in other cities of interest.

The Navigator App offers flexibility for customization, allowing developers to extend its functionality or integrate additional features as per specific project requirements.

Learning Outcome

Developing the Navigator App will enable you to acquire knowledge and experience in the following areas:

  • React Native navigation: Understand the implementation of navigation features in React Native applications, such as handling page transitions and managing navigation stacks.
  • User authentication: Learn how to incorporate user login functionality to provide personalized experiences and secure access to app features.
  • Location services: Gain insights into utilizing location permissions to access and utilize the user’s geographical coordinates for various functionalities.
  • API integration : Explore the integration of weather APIs to fetch and display real-time weather data in the app.
  • Map integration : Familiarize yourself with incorporating map interfaces into mobile applications, allowing users to interact with and explore various locations.

Conclusion

The Navigator App offers a robust foundation for building a mobile application that employs navigation features efficiently. By incorporating user login, location permission, and three major pages—Card, Weather, and Map—the app ensures a personalized experience for users. The app provides relevant information, including user details, weather conditions, and maps, enhancing its usability and value. Feel free to customize and expand upon this app to suit your specific project requirements. Happy coding!

(PS. this app uses the Registration Page from here )

GitHub

View Github