fleetbase / navigator-app

GPS and Order Management Mobile App for Drivers built with React Native

Open source navigation and fleetbase order management for drivers/agents.

fleetbase.io | @fleetbase_io | Discord

Table of Contents

• About
• Prerequisites
• Installation
  • Configure Environment
• Running in Simulator
  • Run the app in iOS Simulator
  • Run the app in Android Simulator
• Navigation using Mapbox
• Documentation
• Roadmap

About

Fleetbase Navigator is an open source navigation and order management app for drivers and agents using Fleetbase. This app is fully customizable and supports QR code scanning, digital signatures, and routing and navigation for agents. Drivers will be able to update activity to orders on the run as they complete job. Drivers can also manage their wallet and view earnings, and Navigator also provides a schedule view for a comprehensive view of the drivers tasks for the day.

Prerequisites

• Yarn or NPM
• React Native CLI
• Xcode 12+
• Android Studio

Installation

Installation and setup is fairly quick, all you need is your Fleetbase API Key, and a few commands and your app will be up and running in minutes. Follow the directions below to get started.

Run the commands below; first clone the project, use npm or yarn to install the dependencies, then run npx pod-install to install the iOS dependencies. Lastly, create a .env file to configure the app.

git clone [email protected]:fleetbase/navigator-app.git
cd navigator-app
yarn
npx pod-install
touch .env

Configure Environment

Below is the steps needed to configure the environment. The first part covers collecting your required API keys.

1. Get your API Keys;
2. If you don't have a Fleetbase account already proceed to the Fleetbase Console and click "Create an account", complete the registration form and you will be taken to the console.
3. Once you're in the Fleetbase console select the "Developers" button in the top navigation. Next, select API Keys from the menu in the Developers section, and create a new API key. Copy your secret key generated, you'll need it later.
4. Once you have both required API keys open your .env file.

In your .env file supply your Fleetbase API secret key, and additionally you will need a Google Maps API Key. Lastly, you'll also need to supply your app/bundle identifier, and an APP_NAME key.

Your .env file should look something like this once you're done.

# .env
APP_NAME=
APP_IDENTIFIER=io.navigator.app
APP_LINK_PREFIX=navigator://
FLEETBASE_HOST=https://127.0.0.1:8000
FLEETBASE_KEY=

Running in Simulator

Once you have completed the installation and environment configuration, you're all set to give your app a test-drive in the simulator so you can play around.

Run the App in iOS Simulator

npx react-native run-ios

Run the App in Android Simulator

npx react-native run-android

Documentation

See the documentation webpage.

If you would like to make contributions to the Fleetbase Javascript SDK documentation source, here is a guide in doing so.

Roadmap

• COMING SOON

navigator-app's Issues

Upgrade react-native to 0.72

Noticed how old it is (0.66). Can someone upgrade and test whether its working for the latest react-native 0.72?

navigator-app repo referencing files in storefront-app project

Hi,
navigator-app/src/config.js is referencing files in a structure that only exist in the storefront-app repo:

import Environment from 'react-native-config';
import AppConfig from '../config/app';
import InterfaceConfig from '../config/interface';

/** 
 * ----------------------------------------------------------
 * Storefront App Configuration
 * ----------------------------------------------------------
 *
 * Define your own custom configuration properties below.
 * @TODO Allow 3rd party configurations for plugins
 *
 * @type {object} 
 */
const Config = {
    app: AppConfig,
    ui: InterfaceConfig,
    ...Environment,
};

export default Config;

/config/app and /config/interface do not exist in navitator-app repo so I can't compile the project

Problem installing date-fns

After git cloning and running yarn, it has a problem with installing date-fns package. Yarn error log report as follows:

Arguments: 
  C:\Program Files\nodejs\node.exe C:\Program Files (x86)\Yarn\bin\yarn.js

PATH: 
  C:\Python311\Scripts\;C:\Python311\;C:\Program Files\Common Files\Oracle\Java\javapath;C:\Python310\Scripts\;C:\Python310\;C:\Python39\Scripts\;C:\Python39\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\ProgramData\chocolatey\bin;C:\Program Files\dotnet\;C:\Program Files (x86)\dotnet\;C:\ORANT\BIN;C:\Program Files\Microsoft VS Code\bin;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\NVIDIA Corporation\NVIDIA NvDLISR;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn\;C:\HashiCorp\Vagrant\bin;C:\ProgramData\nvm;C:\Program Files\nodejs;C:\Program Files (x86)\Yarn\bin\;C:\Program Files\Calibre2\;C:\Program Files\Git\cmd;C:\Program Files\Java\jdk1.8.0_211\bin;C:\Program Files\Tailscale\;C:\Program Files\PowerShell\7\;C:\Program Files\Docker\Docker\resources\bin;C:\Users\abdul\.pyenv\pyenv-win\bin;C:\Users\abdul\.pyenv\pyenv-win\shims;C:\Users\abdul\AppData\Local\Microsoft\WindowsApps;C:\Program Files\heroku\bin;C:\Users\abdul\AppData\Roaming\Python\Python310\Scripts;C:\Program Files\Haulmont\CUBA Studio 2020.2\bin;C:\Users\abdul\.dotnet\tools;C:\Program Files\Oracle\VirtualBox;C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2021.3.2\bin;C:\Program Files\Java\jdk-17.0.3.1;C:\Program Files\OpenSSL-Win64\bin;C:\Program Files\Java\jdk-17.0.3.1\bin;C:\Program Files\Okteto;C:\Program Files\Carnac;C:\tools\neovim\nvim-win64\bin;C:\Program Files\win32yank-x64\;C:\Users\abdul\AppData\Local\Programs\oh-my-posh\bin;C:\Users\abdul\AppData\Local\BraveSoftware\Brave-Browser\Application;C:\ProgramData\nvm;C:\Program Files\nodejs;C:\Users\abdul\AppData\Local\Yarn\bin;C:\ProgramData\chocolatey\lib\mingw\tools\install\mingw64\bin;C:\Users\abdul\AppData\Roaming\npm;C:\Users\abdul\.pyenv\pyenv-win\bin;C:\Users\abdul\.pyenv\pyenv-win\shims

Yarn version: 
  1.22.19

Node version: 
  20.2.0

Platform: 
  win32 x64

Trace: 
  Error: https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz: ESOCKETTIMEDOUT
      at ClientRequest.<anonymous> (C:\Program Files (x86)\Yarn\lib\cli.js:141517:19)
      at Object.onceWrapper (node:events:625:28)
      at ClientRequest.emit (node:events:511:28)
      at TLSSocket.emitRequestTimeout (node:_http_client:840:9)
      at Object.onceWrapper (node:events:625:28)
      at TLSSocket.emit (node:events:523:35)
      at Socket._onTimeout (node:net:583:8)
      at listOnTimeout (node:internal/timers:573:17)
      at process.processTimers (node:internal/timers:514:7)

npm manifest: 
  {
      "name": "navigator-app",
      "version": "0.0.1",
      "private": true,
      "scripts": {
          "android": "react-native run-android",
          "ios": "react-native run-ios",
          "start": "react-native start",
          "pod-reset": "rm -rf ios/Pods/ ios/Podfile.lock && npx pod-install",
          "yarn-reset": "rm -rf node_modules/ package-lock.json yarn.lock && yarn install",
          "full-reset": "yarn yarn-reset && yarn pod-reset && npx jetify",
          "kill-android-build": "./android/gradlew --stop",
          "jetify": "npx jetify",
          "test": "jest",
          "lint": "eslint .",
          "generate-app-icon": "npx app-icon generate -i ./assets/app-icon.png",
          "generate-launch-screen": "npx react-native generate-bootsplash ./assets/splash-screen.png --background-color=#111827 --logo-width=100 --flavor=main"
      },
      "dependencies": {
          "@babel/plugin-proposal-async-generator-functions": "^7.17.12",
          "@fleetbase/sdk": "1.2.5",
          "@fortawesome/free-brands-svg-icons": "^5.15.4",
          "@freakycoder/react-native-bounceable": "^0.2.5",
          "@homee/react-native-mapbox-navigation": "^1.1.0",
          "@react-native-async-storage/async-storage": "^1.15.5",
          "@react-native-community/datetimepicker": "^6.1.2",
          "@react-native-community/masked-view": "^0.1.11",
          "@react-native-community/push-notification-ios": "^1.8.0",
          "@react-native-picker/picker": "^1.16.3",
          "@react-navigation/bottom-tabs": "^6.3.1",
          "@react-navigation/native": "^6.0.10",
          "@react-navigation/stack": "^6.2.1",
          "autoprefixer": "^10.2.6",
          "axios": "^0.21.1",
          "countries-list": "^2.6.1",
          "country-locale-map": "^1.8.0",
          "date-fns": "^2.28.0",
          "i18n-js": "^3.8.0",
          "postcss": "^8.3.5",
          "react": "17.0.2",
          "react-native": "0.66.4",
          "react-native-actions-sheet": "^0.5.4",
          "react-native-animated-radio-button": "^2.0.6",
          "react-native-bootsplash": "^4.0.2",
          "react-native-bouncy-checkbox": "^2.1.2",
          "react-native-calendar-strip": "^2.2.6",
          "react-native-calendars": "^1.1278.0",
          "react-native-camera": "^4.2.1",
          "react-native-collapsible": "^1.6.0",
          "react-native-config": "^1.4.2",
          "react-native-device-info": "^8.1.3",
          "react-native-event-listeners": "^1.0.7",
          "react-native-fast-image": "^8.5.11",
          "react-native-fs": "^2.18.0",
          "react-native-geolocation-service": "^5.3.0-beta.1",
          "react-native-gesture-handler": "^1.10.3",
          "react-native-google-places-autocomplete": "^2.2.0",
          "react-native-image-picker": "^4.4.0",
          "react-native-image-resizer": "^1.4.5",
          "react-native-localize": "^2.1.5",
          "react-native-location": "^2.5.0",
          "react-native-maps": "0.28.0",
          "react-native-maps-directions": "^1.8.0",
          "react-native-mmkv-storage": "^0.6.3",
          "react-native-modal": "^12.0.2",
          "react-native-open-maps": "^0.4.0",
          "react-native-permissions": "^3.0.5",
          "react-native-picker-module": "^2.0.4",
          "react-native-push-notification": "^7.4.0",
          "react-native-qrcode-scanner": "^1.5.5",
          "react-native-reanimated": "^2.2.0",
          "react-native-render-html": "^6.0.5",
          "react-native-safe-area-context": "^3.2.0",
          "react-native-screens": "^3.4.0",
          "react-native-signature-capture": "^0.4.12",
          "react-native-swipe-list-view": "^3.2.9",
          "react-native-toast-message": "^2.1.5",
          "react-native-youtube": "^2.0.2",
          "react-redux": "^7.2.5",
          "socketcluster-client": "^16.0.4",
          "tailwind-rn": "^3.0.1",
          "tailwindcss": "^2.2.4",
          "yarn": "^1.22.17"
      },
      "devDependencies": {
          "@babel/core": "^7.12.9",
          "@babel/runtime": "^7.12.5",
          "@fortawesome/fontawesome-svg-core": "^1.2.35",
          "@fortawesome/free-solid-svg-icons": "^5.15.3",
          "@fortawesome/react-native-fontawesome": "^0.2.6",
          "@react-native-community/eslint-config": "^2.0.0",
          "babel-jest": "^26.6.3",
          "babel-plugin-module-resolver": "^4.1.0",
          "babel-plugin-preval": "^5.0.0",
          "eslint": "7.14.0",
          "inflector-js": "^1.0.1",
          "jest": "^26.6.3",
          "language-name-map": "^0.3.0",
          "locale-emoji": "^0.3.0",
          "metro-react-native-babel-preset": "^0.64.0",
          "react-native-svg": "^12.1.1",
          "react-test-renderer": "17.0.1"
      },
      "jest": {
          "preset": "react-native"
      }
  }

yarn manifest: 
  No manifest

Lockfile: 
  No lockfile

Unable to build Android app

This happened after I ran ./gradlew buildRelease in android folder.

> Configure project :react-native-reanimated
No AAR for react-native-reanimated found. Attempting to build from source.
Android gradle plugin: 4.2.2
Gradle: 6.9

> Task :app:bundleReleaseJsAndAssets
warning: the transform cache was reset.
                    Welcome to Metro!
              Fast - Scalable - Integrated


Failed to construct transformer:  Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:138:10)
    at stableHash (F:\sides\navigator-app\node_modules\metro-cache\src\stableHash.js:19:8)
    at Object.getCacheKey (F:\sides\navigator-app\node_modules\metro-transform-worker\src\index.js:593:7)
    at getTransformCacheKey (F:\sides\navigator-app\node_modules\metro\src\DeltaBundler\getTransformCacheKey.js:24:19)
    at new Transformer (F:\sides\navigator-app\node_modules\metro\src\DeltaBundler\Transformer.js:48:9)
    at F:\sides\navigator-app\node_modules\metro\src\Bundler.js:22:29
    at runNextTicks (node:internal/process/task_queues:60:5)
    at process.processTimers (node:internal/timers:511:9) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
error Cannot read properties of undefined (reading 'transformFile').
TypeError: Cannot read properties of undefined (reading 'transformFile')
    at Bundler.transformFile (F:\sides\navigator-app\node_modules\metro\src\Bundler.js:48:30)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at process.processTimers (node:internal/timers:511:9)
    at async Object.transform (F:\sides\navigator-app\node_modules\metro\src\lib\transformHelpers.js:101:12)
    at async processModule (F:\sides\navigator-app\node_modules\metro\src\DeltaBundler\traverseDependencies.js:137:18)
    at async traverseDependenciesForSingleFile (F:\sides\navigator-app\node_modules\metro\src\DeltaBundler\traverseDependencies.js:131:3)
    at async Promise.all (index 0)
    at async initialTraverseDependencies (F:\sides\navigator-app\node_modules\metro\src\DeltaBundler\traverseDependencies.js:114:3)
    at async DeltaCalculator._getChangedDependencies (F:\sides\navigator-app\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:164:25)
    at async DeltaCalculator.getDelta (F:\sides\navigator-app\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:94:16)
info Run CLI with --verbose flag for more details.

> Task :app:bundleReleaseJsAndAssets FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:bundleReleaseJsAndAssets'.
> Process 'command 'cmd'' finished with non-zero exit value 1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

Need help please.

Unable to run the app because of "The binary version of its metadata is 1.6.0, expected version is 1.4.0." error

I am getting the following error when trying to run the app through Android Studio.

Error: The binary version of its metadata is 1.6.0, expected version is 1.4.0.

I have attached the entire log here, please take a look.

I also tried yarn run android, which is giving me the following error:

File google-services.json is missing. The Google Services Plugin cannot function without it.

You can find the logs here.

Note: I have tried all this from Windows.