Skip to content

This repository demonstrates how to use React Native Maps to create interactive map-based applications. It includes features like user location tracking, custom polygon rendering from fake database data, and interactive map markers. The goal is to provide a simple foundation for building location-based apps with React Native.

Notifications You must be signed in to change notification settings

Ariffansyah/ReactNativeMaps

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native Maps Demo

This repository demonstrates how to use React Native Maps to create interactive map-based applications. It includes features like user location tracking, custom polygon rendering from fake database data, and interactive map markers. The goal is to provide a simple foundation for building location-based apps with React Native.

Features

  • User Location Tracking: Track and display the user's current location on the map.
  • Custom Polygon Rendering: Render custom polygons on the map using data from a fake database.
  • Interactive Map Markers: Add interactive markers to the map that respond to user actions.

Getting Started

Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

  • Node.js: Ensure you have Node.js installed. You can download it from nodejs.org.
  • React Native CLI: Install the React Native CLI globally using npm:
    npm install -g react-native-cli
  • Android Studio/Xcode: Set up your development environment for React Native as per the React Native documentation.

Installation

  1. Clone the repository:

    git clone https://github.com/Ariffansyah/ReactNativeMaps/tree/main
    cd ReactNativeMaps
  2. Install dependencies:

    npm install
  3. Link React Native Maps:

    npx react-native link react-native-maps

Running the App

Android

  1. Start the Metro Bundler:

    npx react-native start
  2. Run the app on an Android emulator or device:

    npx react-native run-android

iOS

  1. Install CocoaPods dependencies:

    cd ios
    pod install
    cd ..
  2. Start the Metro Bundler:

    npx react-native start
  3. Run the app on an iOS simulator or device:

    npx react-native run-ios

Usage

User Location Tracking

The app tracks and displays the user's current location on the map using the react-native-maps library. Make sure to request the necessary location permissions from the user.

Custom Polygon Rendering

Custom polygons are rendered on the map using data fetched from a fake database. This demonstrates how to visualize complex shapes and regions on the map.

Interactive Map Markers

Interactive map markers are added to the map, allowing users to interact with specific points of interest. Customize the markers to display additional information or trigger actions.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.

License

This project is for learning purposes and does not have a license.


About

This repository demonstrates how to use React Native Maps to create interactive map-based applications. It includes features like user location tracking, custom polygon rendering from fake database data, and interactive map markers. The goal is to provide a simple foundation for building location-based apps with React Native.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors