Location Notifier

Location Notifier is a simple cross-platform mobile app that uses React Native framework. The app will notify a user whenever he/she is about to reach a set destination. Moreover, this app supports organizing a favorite list and searching for nearby gas stations or local ATMs. There are also settings to control the alarm. This is useful for those who travel a lot, especially students that don't know if they are close to the destination or may oversleep on the bus.

See more previews here.

Table of Content

1. Functionality
2. Getting started
3. Addtional tools
4. Open source libraries
5. Related docs

Functionality

1. Location notifying: notifies when user is near a selected destination using GPS.
2. Map viewing: provides a Google map to look around with markers and route directions.
3. Location searching: allows looking for an address using Google API.
4. Detailed searching: provides visual map with nearby places to choose from.
5. Get nearby Gas stations or local ATMs: allows locating nearby stations with buttons for easy access.
6. Manage a favorite list: provides a list to save, label, copy, and edit an address.
7. Control the alarm settings: lets user change ringtone, vibration, and notifying range.
8. Supports online/offline usage

Getting Started

Go to store for released app.

Set up environment

1. NodeJS (use latest version)

2. Yarn package.

   You can download and use the installer from their homepage or install via npm.

   npm install -g yarn

   Then add to PATH environment:

   %USERPROFILE%\AppData\Local\Yarn\bin
   

3. Expo client

   yarn global add expo-cli

4. Clone project

   git clone https://github.com/manhquynh-github/React-Native-Project.git

5. Install package

   git clone https://github.com/manhquynh-github/React-Native-Project.git
   cd React-Native-Project
   yarn install

Run app in dev mode

1. Connect your android device or turn on Android Emulator
2. Open a terminal and run expo start --localhost
3. Open another terminal and run react-native run-android --variant DevMinSdkDevKernelDebug

Additional tools

You can use any text editor to edit source code and any command line program to start the project. These are the recommended development tools.

IDE

• Visual Studio Code

VSCode extensions

• Auto Import – automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.
• Auto Import - ES6, TS, JSX, TSX – automatically finds, parses and provides code actions and code completion for all available imports. Works with JavaScript and TypeScript.
• JavaScript (ES6) code snippets – code snippets for JavaScript in ES6 syntax.
• Node.js Modules Intellisense – autocompletes Node.js modules in import statements.
• Path Intellisense Visual Studio Code plugin that autocompletes filenames.
• Prettier - Code formatter – VS Code package to format your JavaScript/TypeScript/CSS using Prettier.
• React Native Tools – provides a development environment for React Native projects. Using this extension, you can debug your code and quickly run react-native commands from the command palette.
• Version Lens – shows the latest version for each package using code lens.

Open source libraries

• React Native – a JavaScript mobile framework developed by Facebook which allows developers to build Android and iOS mobile apps using JavaScript and reuse code across web and mobile applications.
• Expo – a set of tools, libraries, and services that let you build native iOS and Android apps by writing JavaScript.
• Native Base – essential cross-platform UI components for React Native.
• React Native Alarm Notification – scheduled alarm and local notification in React Native (Android only).
• React Native Firebase 🔥 – a well tested feature rich modular Firebase implementation for React Native.
• react-native-google-places – iOS/Android Google Places Widgets (Autocomplete, Place Picker) and API Services for React Native Apps.
• react-native-maps-directions – Directions Component for react-native-maps.
• react-native-mauron85-background-geolocation – background and foreground geolocation plugin for React Native and tracks user when app is running in background. Demo & Fork.
• React Navigation – routing and navigation for your React Native apps
• React Redux – official React bindings for Redux.
• Redux – predictable state container for JavaScript apps.
• Redux Persist – persist and rehydrate a redux store.
• MapView (from Expo) – a map component that uses Apple Maps or Google Maps on iOS and Google Maps on Android from react-native-maps.

Related docs

• Redux (eng/vie)
• PropTypes (eng/vie)
• FlatList
• Expo SDK
• Common fixes