@atomiqlab/react-native-mapbox-navigation 1.1.2 → 1.1.3

package/README.md

@@ -11,6 +11,17 @@ Native Mapbox turn-by-turn navigation for Expo apps on iOS and Android.
 - Navigation customization: camera mode/pitch/zoom, theme, map style, and UI visibility toggles.
 - Expo config plugin that applies required Android and iOS native setup.
 
+## Screenshots
+
+![Android](docs/screenshots/android.png)
+![iOS](docs/screenshots/ios.png)
+
+## Support Us
+
+[![Support on Ko-fi](docs/imgs/support_me_on_kofi_badge_red.png)](https://ko-fi.com/atomiqlab)
+
+If this package helps your work, support development on Ko-fi.
+
 ## Requirements
 
 - Expo SDK `>=50`

package/android/src/main/java/expo/modules/mapboxnavigation/MapboxNavigationActivity.kt

@@ -8,7 +8,10 @@ import android.os.Handler
 import android.os.Looper
 import android.util.Log
 import android.view.Gravity
+import android.view.ViewGroup
+import android.widget.Button
 import android.widget.FrameLayout
+import android.widget.LinearLayout
 import android.widget.TextView
 import androidx.appcompat.app.AppCompatDelegate
 import androidx.appcompat.app.AppCompatActivity
@@ -95,7 +98,7 @@ class MapboxNavigationActivity : AppCompatActivity() {
       result[Manifest.permission.ACCESS_COARSE_LOCATION] == true
 
     if (!granted) {
-      showErrorAndStay("Location permission is required to start navigation.", null)
+      showErrorScreen("Location permission is required to start navigation.", null)
       return@registerForActivityResult
     }
 
@@ -120,7 +123,7 @@ class MapboxNavigationActivity : AppCompatActivity() {
           "message" to message
         )
       )
-      showErrorAndStay(message, null)
+      showErrorScreen(message, null)
     }
 
     override fun onRouteFetchSuccessful(routes: List<NavigationRoute>) {
@@ -182,7 +185,7 @@ class MapboxNavigationActivity : AppCompatActivity() {
         Log.w(TAG, "No valid destination extras provided, starting without preview")
       }
     } catch (throwable: Throwable) {
-      showErrorAndStay("Navigation init failed: ${throwable.message}", throwable)
+      showErrorScreen("Navigation init failed: ${throwable.message}", throwable)
       return
     }
 
@@ -272,7 +275,7 @@ class MapboxNavigationActivity : AppCompatActivity() {
       }
 
     } catch (throwable: Throwable) {
-      showErrorAndStay("Failed to create NavigationView: ${throwable.message}", throwable)
+      showErrorScreen("Failed to create NavigationView: ${throwable.message}", throwable)
     }
   }
 
@@ -350,7 +353,7 @@ class MapboxNavigationActivity : AppCompatActivity() {
     return fineGranted || coarseGranted
   }
 
-  private fun showErrorAndStay(message: String, throwable: Throwable?) {
+  private fun showErrorScreen(message: String, throwable: Throwable?) {
     if (throwable != null) {
       Log.e(TAG, message, throwable)
     } else {
@@ -365,16 +368,58 @@ class MapboxNavigationActivity : AppCompatActivity() {
       )
     )
 
-    val errorView = TextView(this).apply {
+    val titleView = TextView(this).apply {
+      text = "Navigation Error"
+      textSize = 22f
+      setTextColor(0xFFFFFFFF.toInt())
+      gravity = Gravity.CENTER
+    }
+
+    val messageView = TextView(this).apply {
       text = message
+      textSize = 15f
+      setTextColor(0xFFD6E4FF.toInt())
       gravity = Gravity.CENTER
-      textSize = 16f
-      setPadding(32, 32, 32, 32)
+      setPadding(0, 24, 0, 32)
+    }
+
+    val closeButton = Button(this).apply {
+      text = "Back"
+      setOnClickListener { finish() }
     }
+
+    val content = LinearLayout(this).apply {
+      orientation = LinearLayout.VERTICAL
+      gravity = Gravity.CENTER
+      setBackgroundColor(0xFF0B1020.toInt())
+      setPadding(48, 48, 48, 48)
+      addView(
+        titleView,
+        LinearLayout.LayoutParams(
+          ViewGroup.LayoutParams.MATCH_PARENT,
+          ViewGroup.LayoutParams.WRAP_CONTENT
+        )
+      )
+      addView(
+        messageView,
+        LinearLayout.LayoutParams(
+          ViewGroup.LayoutParams.MATCH_PARENT,
+          ViewGroup.LayoutParams.WRAP_CONTENT
+        )
+      )
+      addView(
+        closeButton,
+        LinearLayout.LayoutParams(
+          ViewGroup.LayoutParams.MATCH_PARENT,
+          ViewGroup.LayoutParams.WRAP_CONTENT
+        )
+      )
+    }
+
     setContentView(
       FrameLayout(this).apply {
         addView(
-          errorView,
+          content,
           FrameLayout.LayoutParams(
             FrameLayout.LayoutParams.MATCH_PARENT,
             FrameLayout.LayoutParams.MATCH_PARENT

package/ios/MapboxNavigationModule.swift

@@ -157,9 +157,20 @@ public class MapboxNavigationModule: Module {
     }
   }
   
+  private func configuredMapboxPublicToken() -> String? {
+    guard let raw = Bundle.main.object(forInfoDictionaryKey: "MBXAccessToken") as? String else {
+      return nil
+    }
+    let token = raw.trimmingCharacters(in: .whitespacesAndNewlines)
+    guard token.hasPrefix("pk."), token.count > 20 else {
+      return nil
+    }
+    return token
+  }
+
   private func startNavigation(options: NavigationStartOptions, promise: Promise) {
     guard let destination = options.destination.toCLLocationCoordinate2D() else {
-      self.sendEvent("onError", [
+      self.emitErrorAndShowScreen([
         "code": "INVALID_COORDINATES",
         "message": "Invalid coordinates provided"
       ])
@@ -188,7 +199,7 @@ public class MapboxNavigationModule: Module {
           promise: promise
         )
       case .failure(let error):
-        self.sendEvent("onError", [
+        self.emitErrorAndShowScreen([
           "code": "CURRENT_LOCATION_UNAVAILABLE",
           "message": error.localizedDescription
         ])
@@ -203,7 +214,16 @@ public class MapboxNavigationModule: Module {
     options: NavigationStartOptions,
     promise: Promise
   ) {
-    
+    guard configuredMapboxPublicToken() != nil else {
+      let message = "Missing or invalid MBXAccessToken. Add the package plugin to app.json and set EXPO_PUBLIC_MAPBOX_ACCESS_TOKEN before prebuild."
+      self.emitErrorAndShowScreen([
+        "code": "MISSING_ACCESS_TOKEN",
+        "message": message
+      ])
+      promise.reject("MISSING_ACCESS_TOKEN", message)
+      return
+    }
+
     var waypoints = [Waypoint(coordinate: origin)]
     
     // Add intermediate waypoints if provided
@@ -233,7 +253,7 @@ public class MapboxNavigationModule: Module {
       switch result {
       case .success(let response):
         guard response.routes?.first != nil else {
-          self.sendEvent("onError", [
+          self.emitErrorAndShowScreen([
             "code": "NO_ROUTE",
             "message": "No route found"
           ])
@@ -284,12 +304,16 @@ public class MapboxNavigationModule: Module {
             promise.resolve(nil)
           }
         } else {
+          self.emitErrorAndShowScreen([
+            "code": "NO_ROOT_VC",
+            "message": "Could not find root view controller"
+          ])
           promise.reject("NO_ROOT_VC", "Could not find root view controller")
         }
         
       case .failure(let error):
         let (code, message) = self.mapDirectionsError(error)
-        self.sendEvent("onError", [
+        self.emitErrorAndShowScreen([
           "code": code,
           "message": message
         ])
@@ -309,6 +333,25 @@ public class MapboxNavigationModule: Module {
     }
   }
   
+  private func emitErrorAndShowScreen(_ payload: [String: Any]) {
+    sendEvent("onError", payload)
+
+    guard let navVC = navigationViewController else {
+      return
+    }
+
+    if navVC.presentingViewController == nil {
+      navigationViewController = nil
+      isCurrentlyNavigating = false
+      return
+    }
+
+    navVC.dismiss(animated: true) {
+      self.navigationViewController = nil
+      self.isCurrentlyNavigating = false
+    }
+  }
+
   private func mapDirectionsError(_ error: Error) -> (String, String) {
     let message = error.localizedDescription
     let lowered = message.lowercased()
@@ -645,3 +688,67 @@ private final class CurrentLocationResolver: NSObject, CLLocationManagerDelegate
     completion(result)
   }
 }
+
+private final class NavigationErrorViewController: UIViewController {
+  private let message: String
+
+  init(message: String) {
+    self.message = message
+    super.init(nibName: nil, bundle: nil)
+  }
+
+  required init?(coder: NSCoder) {
+    nil
+  }
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
+
+    view.backgroundColor = UIColor(red: 11 / 255, green: 16 / 255, blue: 32 / 255, alpha: 1)
+
+    let titleLabel = UILabel()
+    titleLabel.translatesAutoresizingMaskIntoConstraints = false
+    titleLabel.text = "Navigation Error"
+    titleLabel.textColor = .white
+    titleLabel.font = UIFont.systemFont(ofSize: 28, weight: .bold)
+    titleLabel.textAlignment = .center
+    titleLabel.numberOfLines = 0
+
+    let messageLabel = UILabel()
+    messageLabel.translatesAutoresizingMaskIntoConstraints = false
+    messageLabel.text = message
+    messageLabel.textColor = UIColor(red: 214 / 255, green: 228 / 255, blue: 255 / 255, alpha: 1)
+    messageLabel.font = UIFont.systemFont(ofSize: 16, weight: .regular)
+    messageLabel.textAlignment = .center
+    messageLabel.numberOfLines = 0
+
+    let closeButton = UIButton(type: .system)
+    closeButton.translatesAutoresizingMaskIntoConstraints = false
+    closeButton.setTitle("Back", for: .normal)
+    closeButton.titleLabel?.font = UIFont.systemFont(ofSize: 17, weight: .semibold)
+    closeButton.backgroundColor = UIColor.white.withAlphaComponent(0.15)
+    closeButton.setTitleColor(.white, for: .normal)
+    closeButton.layer.cornerRadius = 10
+    closeButton.contentEdgeInsets = UIEdgeInsets(top: 12, left: 16, bottom: 12, right: 16)
+    closeButton.addTarget(self, action: #selector(closeTapped), for: .touchUpInside)
+
+    let stack = UIStackView(arrangedSubviews: [titleLabel, messageLabel, closeButton])
+    stack.translatesAutoresizingMaskIntoConstraints = false
+    stack.axis = .vertical
+    stack.alignment = .fill
+    stack.spacing = 20
+
+    view.addSubview(stack)
+
+    NSLayoutConstraint.activate([
+      stack.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 24),
+      stack.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -24),
+      stack.centerYAnchor.constraint(equalTo: view.centerYAnchor),
+    ])
+  }
+
+  @objc
+  private func closeTapped() {
+    dismiss(animated: true)
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atomiqlab/react-native-mapbox-navigation",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Native Mapbox turn-by-turn navigation for Expo and React Native (iOS + Android)",
   "main": "src/index.tsx",
   "types": "src/index.tsx",