@complexify/expo-mapbox-navigation 1.3.1 → 1.3.3

package/build/ExpoMapboxNavigation.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpoMapboxNavigation.types.js","sourceRoot":"","sources":["../src/ExpoMapboxNavigation.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ViewStyle, StyleProp } from \"react-native/types\";\n\ntype ProgressEvent = {\n  distanceRemaining: number;\n  distanceTraveled: number;\n  durationRemaining: number;\n  fractionTraveled: number;\n};\n\nexport type ExpoMapboxNavigationViewProps = {\n  coordinates: Array<{ latitude: number; longitude: number }>;\n  waypointIndices?: number[];\n  useRouteMatchingApi?: boolean;\n  locale?: string;\n  routeProfile?: string;\n  routeExcludeList?: string[];\n  mapStyle?: string;\n  mute?: boolean;\n  routeColor?: string;\n  routeAlternateColor?: string;\n  routeCasingColor?: string;\n  routeAlternateCasingColor?: string;\n  traversedRouteColor?: string;\n  maneuverArrowColor?: string;\n  onRouteProgressChanged?: (event: { nativeEvent: ProgressEvent }) => void;\n  onCancelNavigation?: () => void;\n  onWaypointArrival?: (event: {\n    nativeEvent: ProgressEvent | undefined;\n  }) => void;\n  onFinalDestinationArrival?: () => void;\n  onRouteChanged?: () => void;\n  onUserOffRoute?: () => void;\n  onRoutesLoaded?: () => void;\n  style?: StyleProp<ViewStyle>;\n\n  // Top Banner (1)\n  topBannerBackgroundColor?: string;\n  topBannerPrimaryTextColor?: string;\n  topBannerSecondaryTextColor?: string;\n  topBannerDistanceTextColor?: string;\n  topBannerSeparatorColor?: string;\n\n  // Information Stack (2)\n  informationStackBackgroundColor?: string;\n  informationStackTextColor?: string;\n\n  // Bottom Banner (3)\n  bottomBannerBackgroundColor?: string;\n  bottomBannerTimeRemainingTextColor?: string;\n  bottomBannerDistanceRemainingTextColor?: string;\n  bottomBannerArrivalTimeTextColor?: string;\n\n  // Resume Button (4)\n  resumeButtonBackgroundColor?: string;\n  resumeButtonTextColor?: string;\n  resumeButtonBorderColor?: string;\n\n  // Speed Limit View (5)\n  speedLimitBackgroundColor?: string;\n  speedLimitTextColor?: string;\n  speedLimitBorderColor?: string;\n\n  // Floating Stack (6)\n  floatingStackBackgroundColor?: string;\n  floatingButtonsBackgroundColor?: string;\n  floatingButtonsTextColor?: string;\n  floatingButtonsBorderColor?: string;\n\n  // Way Name Label (8)\n  wayNameViewBackgroundColor?: string;\n  wayNameViewTextColor?: string;\n\n  // Steps List\n  stepsBackgroundColor?: string;\n  stepsPrimaryTextColor?: string;\n  stepsSecondaryTextColor?: string;\n  stepsManeuverViewPrimaryColor?: string;\n  stepsManeuverViewSecondaryColor?: string;\n  stepsSeparatorColor?: string;\n\n  // Lane View\n  laneViewBackgroundColor?: string;\n  laneViewForegroundColor?: string;\n  laneViewSeparatorColor?: string;\n\n  // Next Banner View\n  nextBannerBackgroundColor?: string;\n  nextBannerPrimaryTextColor?: string;\n  nextBannerSecondaryTextColor?: string;\n  nextBannerDistanceTextColor?: string;\n\n  // Progress Bar\n  progressBarProgressColor?: string;\n  progressBarBackgroundColor?: string;\n\n  // Maneuver View (Direction Arrow)\n  maneuverViewPrimaryColor?: string;\n  maneuverViewSecondaryColor?: string;\n  maneuverViewPrimaryColorHighlighted?: string;\n  maneuverViewSecondaryColorHighlighted?: string;\n\n  // Instructions View\n  instructionsTextColor?: string;       // Color for all instruction text\n  instructionsBackgroundColor?: string; // Background color for instruction panels\n\n  // Instructions Card\n  instructionsCardBackgroundColor?: string;\n  instructionsCardSeparatorColor?: string;\n  instructionsCardHighlightedSeparatorColor?: string;\n\n  // Exit View\n  exitViewForegroundColor?: string;\n  exitViewBorderColor?: string;\n  exitViewHighlightColor?: string;\n\n  // Route Shield\n  routeShieldForegroundColor?: string;\n  routeShieldBorderColor?: string;\n  routeShieldHighlightColor?: string;\n\n  // Distance Labels\n  distanceRemainingColor?: string;\n  distanceUnitColor?: string;\n  distanceValueColor?: string;\n\n  // Navigation Map\n  routeAnnotationSelectedColor?: string;\n  routeAnnotationColor?: string;\n  routeAnnotationTextColor?: string;\n  routeAnnotationSelectedTextColor?: string;\n  routeAnnotationMoreTimeTextColor?: string;\n  routeAnnotationLessTimeTextColor?: string;\n  waypointColor?: string;\n  waypointStrokeColor?: string;\n\n  // Feedback\n  feedbackBackgroundColor?: string;\n  feedbackTextColor?: string;\n  feedbackCellColor?: string;\n  feedbackSubtypeCircleColor?: string;\n  feedbackSubtypeCircleOutlineColor?: string;\n\n  // End of Route\n  endOfRouteButtonTextColor?: string;\n  endOfRouteCommentBackgroundColor?: string;\n  endOfRouteCommentTextColor?: string;\n  endOfRouteContentBackgroundColor?: string;\n  endOfRouteTitleTextColor?: string;\n\n  // Road Shield Colors\n  roadShieldBlackColor?: string;\n  roadShieldBlueColor?: string;\n  roadShieldGreenColor?: string;\n  roadShieldRedColor?: string;\n  roadShieldWhiteColor?: string;\n  roadShieldYellowColor?: string;\n  roadShieldDefaultColor?: string;\n\n  // Button Properties\n  buttonTextColor?: string;\n  cancelButtonTintColor?: string;\n  previewButtonTintColor?: string;\n  startButtonTintColor?: string;\n  dismissButtonBackgroundColor?: string;\n  dismissButtonTextColor?: string;\n  backButtonBackgroundColor?: string;\n  backButtonTintColor?: string;\n  backButtonTextColor?: string;\n  backButtonBorderColor?: string;\n\n  // Navigation View\n  navigationViewBackgroundColor?: string;\n\n  // Distance Label Properties\n  distanceLabelUnitTextColor?: string;\n  distanceLabelValueTextColor?: string;\n\n  // Rating Control\n  ratingControlNormalColor?: string;\n  ratingControlSelectedColor?: string;\n\n  // Steps Properties\n  stepsBackgroundViewColor?: string;\n  stepsTableHeaderTintColor?: string;\n  stepsTableHeaderTextColor?: string;\n  stepInstructionsBackgroundColor?: string;\n  stepTableViewCellBackgroundColor?: string;\n\n  // Next Instruction\n  nextInstructionNormalTextColor?: string;\n  nextInstructionContainedTextColor?: string;\n\n  // Secondary Label Properties\n  secondaryLabelNormalTextColor?: string;\n\n  // Stylable Label\n  stylableLabelNormalTextColor?: string;\n\n  // CarPlay Properties\n  carPlayCompassBackgroundColor?: string;\n};\n"]}
+{"version":3,"file":"ExpoMapboxNavigation.types.js","sourceRoot":"","sources":["../src/ExpoMapboxNavigation.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ViewStyle, StyleProp } from \"react-native/types\";\n\ntype ProgressEvent = {\n  distanceRemaining: number;\n  distanceTraveled: number;\n  durationRemaining: number;\n  fractionTraveled: number;\n};\n\nexport type ExpoMapboxNavigationViewProps = {\n  coordinates: Array<{ latitude: number; longitude: number }>;\n  waypointIndices?: number[];\n  useRouteMatchingApi?: boolean;\n  locale?: string;\n  routeProfile?: string;\n  routeExcludeList?: string[];\n  mapStyle?: string;\n  mute?: boolean;\n  routeColor?: string;\n  routeAlternateColor?: string;\n  routeCasingColor?: string;\n  routeAlternateCasingColor?: string;\n  traversedRouteColor?: string;\n  maneuverArrowColor?: string;\n  onRouteProgressChanged?: (event: { nativeEvent: ProgressEvent }) => void;\n  onCancelNavigation?: () => void;\n  onWaypointArrival?: (event: {\n    nativeEvent: ProgressEvent | undefined;\n  }) => void;\n  onFinalDestinationArrival?: () => void;\n  onRouteChanged?: () => void;\n  onUserOffRoute?: () => void;\n  onRoutesLoaded?: () => void;\n  style?: StyleProp<ViewStyle>;\n\n  // Top Banner (1)\n  topBannerBackgroundColor?: string;\n  topBannerPrimaryTextColor?: string;\n  topBannerSecondaryTextColor?: string;\n  topBannerDistanceTextColor?: string;\n  topBannerSeparatorColor?: string;\n\n  // Information Stack (2)\n  informationStackBackgroundColor?: string;\n  informationStackTextColor?: string;\n\n  // Bottom Banner (3)\n  bottomBannerBackgroundColor?: string;\n  bottomBannerTimeRemainingTextColor?: string;\n  bottomBannerDistanceRemainingTextColor?: string;\n  bottomBannerArrivalTimeTextColor?: string;\n\n  // Resume Button (4)\n  resumeButtonBackgroundColor?: string;\n  resumeButtonTextColor?: string;\n  resumeButtonBorderColor?: string;\n\n  // Speed Limit View (5)\n  speedLimitBackgroundColor?: string;\n  speedLimitTextColor?: string;\n  speedLimitBorderColor?: string;\n\n  // Floating Stack (6)\n  floatingStackBackgroundColor?: string;\n  floatingButtonsBackgroundColor?: string;\n  floatingButtonsTextColor?: string;\n  floatingButtonsBorderColor?: string;\n\n  // Way Name Label (8)\n  wayNameViewBackgroundColor?: string;\n  wayNameViewTextColor?: string;\n\n  // Steps List\n  stepsBackgroundColor?: string;\n  stepsPrimaryTextColor?: string;\n  stepsSecondaryTextColor?: string;\n  stepsManeuverViewPrimaryColor?: string;\n  stepsManeuverViewSecondaryColor?: string;\n  stepsSeparatorColor?: string;\n\n  // Lane View\n  laneViewBackgroundColor?: string;\n  laneViewForegroundColor?: string;\n  laneViewSeparatorColor?: string;\n\n  // Next Banner View\n  nextBannerBackgroundColor?: string;\n  nextBannerPrimaryTextColor?: string;\n  nextBannerSecondaryTextColor?: string;\n  nextBannerDistanceTextColor?: string;\n\n  // Progress Bar\n  progressBarProgressColor?: string;\n  progressBarBackgroundColor?: string;\n\n  // Maneuver View (Direction Arrow)\n  maneuverViewPrimaryColor?: string;\n  maneuverViewSecondaryColor?: string;\n  maneuverViewPrimaryColorHighlighted?: string;\n  maneuverViewSecondaryColorHighlighted?: string;\n\n  // Instructions View\n  instructionsTextColor?: string; // Color for all instruction text\n  instructionsBackgroundColor?: string; // Background color for instruction panels\n\n  // Instructions Card\n  instructionsCardBackgroundColor?: string;\n  instructionsCardSeparatorColor?: string;\n  instructionsCardHighlightedSeparatorColor?: string;\n\n  // Exit View\n  exitViewForegroundColor?: string;\n  exitViewBorderColor?: string;\n  exitViewHighlightColor?: string;\n\n  // Route Shield\n  routeShieldForegroundColor?: string;\n  routeShieldBorderColor?: string;\n  routeShieldHighlightColor?: string;\n\n  // Distance Labels\n  distanceRemainingColor?: string;\n  distanceUnitColor?: string;\n  distanceValueColor?: string;\n\n  // Navigation Map\n  routeAnnotationSelectedColor?: string;\n  routeAnnotationColor?: string;\n  routeAnnotationTextColor?: string;\n  routeAnnotationSelectedTextColor?: string;\n  routeAnnotationMoreTimeTextColor?: string;\n  routeAnnotationLessTimeTextColor?: string;\n  waypointColor?: string;\n  waypointStrokeColor?: string;\n\n  // Feedback\n  feedbackBackgroundColor?: string;\n  feedbackTextColor?: string;\n  feedbackCellColor?: string;\n  feedbackSubtypeCircleColor?: string;\n  feedbackSubtypeCircleOutlineColor?: string;\n\n  // End of Route\n  endOfRouteButtonTextColor?: string;\n  endOfRouteCommentBackgroundColor?: string;\n  endOfRouteCommentTextColor?: string;\n  endOfRouteContentBackgroundColor?: string;\n  endOfRouteTitleTextColor?: string;\n\n  // Road Shield Colors\n  roadShieldBlackColor?: string;\n  roadShieldBlueColor?: string;\n  roadShieldGreenColor?: string;\n  roadShieldRedColor?: string;\n  roadShieldWhiteColor?: string;\n  roadShieldYellowColor?: string;\n  roadShieldDefaultColor?: string;\n\n  // Button Properties\n  buttonTextColor?: string;\n  cancelButtonTintColor?: string;\n  previewButtonTintColor?: string;\n  startButtonTintColor?: string;\n  dismissButtonBackgroundColor?: string;\n  dismissButtonTextColor?: string;\n  backButtonBackgroundColor?: string;\n  backButtonTintColor?: string;\n  backButtonTextColor?: string;\n  backButtonBorderColor?: string;\n\n  // Navigation View\n  navigationViewBackgroundColor?: string;\n\n  // Distance Label Properties\n  distanceLabelUnitTextColor?: string;\n  distanceLabelValueTextColor?: string;\n\n  // Rating Control\n  ratingControlNormalColor?: string;\n  ratingControlSelectedColor?: string;\n\n  // Steps Properties\n  stepsBackgroundViewColor?: string;\n  stepsTableHeaderTintColor?: string;\n  stepsTableHeaderTextColor?: string;\n  stepInstructionsBackgroundColor?: string;\n  stepTableViewCellBackgroundColor?: string;\n\n  // Next Instruction\n  nextInstructionNormalTextColor?: string;\n  nextInstructionContainedTextColor?: string;\n\n  // Secondary Label Properties\n  secondaryLabelNormalTextColor?: string;\n\n  // Stylable Label\n  stylableLabelNormalTextColor?: string;\n\n  // CarPlay Properties\n  carPlayCompassBackgroundColor?: string;\n};\n"]}

package/ios/CustomNavigationStyle.swift

@@ -23,63 +23,6 @@ class CustomDayStyle: StandardDayStyle {
     var customFloatingButtonsBorderColor: UIColor?
     var customFloatingButtonsTextColor: UIColor?
     
-    // Information Stack (2)
-    var customInformationStackBackgroundColor: UIColor?
-    var customInformationStackTextColor: UIColor?
-    
-    // Steps List
-    var customStepsBackgroundColor: UIColor?
-    var customStepsPrimaryTextColor: UIColor?
-    var customStepsSecondaryTextColor: UIColor?
-    var customStepsManeuverViewPrimaryColor: UIColor?
-    var customStepsManeuverViewSecondaryColor: UIColor?
-    var customStepsSeparatorColor: UIColor?
-    
-    // Lane View
-    var customLaneViewBackgroundColor: UIColor?
-    var customLaneViewForegroundColor: UIColor?
-    var customLaneViewSeparatorColor: UIColor?
-    
-    // Next Banner View
-    var customNextBannerBackgroundColor: UIColor?
-    var customNextBannerPrimaryTextColor: UIColor?
-    var customNextBannerSecondaryTextColor: UIColor?
-    var customNextBannerDistanceTextColor: UIColor?
-    
-    // Progress Bar
-    var customProgressBarProgressColor: UIColor?
-    var customProgressBarBackgroundColor: UIColor?
-    
-    // Maneuver View
-    var customManeuverViewPrimaryColor: UIColor?
-    var customManeuverViewSecondaryColor: UIColor?
-    var customManeuverViewPrimaryColorHighlighted: UIColor?
-    var customManeuverViewSecondaryColorHighlighted: UIColor?
-    
-    // Instructions Card
-    var customInstructionsCardBackgroundColor: UIColor?
-    var customInstructionsCardSeparatorColor: UIColor?
-    var customInstructionsCardHighlightedSeparatorColor: UIColor?
-    
-    // Exit View
-    var customExitViewForegroundColor: UIColor?
-    var customExitViewBorderColor: UIColor?
-    var customExitViewHighlightColor: UIColor?
-    
-    // Route Shield
-    var customRouteShieldForegroundColor: UIColor?
-    var customRouteShieldBorderColor: UIColor?
-    var customRouteShieldHighlightColor: UIColor?
-    
-    // Distance Labels
-    var customDistanceRemainingColor: UIColor?
-    var customDistanceUnitColor: UIColor?
-    var customDistanceValueColor: UIColor?
-    
-    // Rating Control
-    var customRatingControlNormalColor: UIColor?
-    var customRatingControlSelectedColor: UIColor?
-    
     required init() {
         super.init()
         styleType = .day
@@ -165,138 +108,5 @@ class CustomDayStyle: StandardDayStyle {
         // Set default values for floating buttons
         FloatingButton.appearance(for: traitCollection).borderWidth = 1.0
         FloatingButton.appearance(for: traitCollection).cornerRadius = 4.0
-        
-        // Information Stack
-        if let bgColor = customInformationStackBackgroundColor {
-            StepsBackgroundView.appearance(for: traitCollection).backgroundColor = bgColor
-        }
-        if let textColor = customInformationStackTextColor {
-            StepsTableHeaderView.appearance(for: traitCollection).normalTextColor = textColor
-        }
-        
-        // Steps List
-        if let bgColor = customStepsBackgroundColor {
-            StepInstructionsView.appearance(for: traitCollection).backgroundColor = bgColor
-        }
-        if let primaryTextColor = customStepsPrimaryTextColor {
-            PrimaryLabel.appearance(for: traitCollection, whenContainedInInstancesOf: [StepInstructionsView.self])
-                .normalTextColor = primaryTextColor
-        }
-        if let secondaryTextColor = customStepsSecondaryTextColor {
-            SecondaryLabel.appearance(for: traitCollection, whenContainedInInstancesOf: [StepInstructionsView.self])
-                .normalTextColor = secondaryTextColor
-        }
-        if let maneuverPrimaryColor = customStepsManeuverViewPrimaryColor {
-            ManeuverView.appearance(for: traitCollection, whenContainedInInstancesOf: [StepInstructionsView.self])
-                .primaryColor = maneuverPrimaryColor
-        }
-        if let maneuverSecondaryColor = customStepsManeuverViewSecondaryColor {
-            ManeuverView.appearance(for: traitCollection, whenContainedInInstancesOf: [StepInstructionsView.self])
-                .secondaryColor = maneuverSecondaryColor
-        }
-        if let separatorColor = customStepsSeparatorColor {
-            SeparatorView.appearance(for: traitCollection).backgroundColor = separatorColor
-        }
-        
-        // Lane View
-        if let bgColor = customLaneViewBackgroundColor {
-            LanesView.appearance(for: traitCollection).backgroundColor = bgColor
-        }
-        if let fgColor = customLaneViewForegroundColor {
-            LaneView.appearance(for: traitCollection).primaryColor = fgColor
-        }
-        if let separatorColor = customLaneViewSeparatorColor {
-            // Apply to lane view separators if available
-        }
-        
-        // Next Banner View
-        if let bgColor = customNextBannerBackgroundColor {
-            NextBannerView.appearance(for: traitCollection).backgroundColor = bgColor
-        }
-        if let primaryTextColor = customNextBannerPrimaryTextColor {
-            NextInstructionLabel.appearance(for: traitCollection, whenContainedInInstancesOf: [NextBannerView.self])
-                .normalTextColor = primaryTextColor
-        }
-        if let secondaryTextColor = customNextBannerSecondaryTextColor {
-            // Apply to secondary text in next banner
-        }
-        if let distanceTextColor = customNextBannerDistanceTextColor {
-            DistanceLabel.appearance(for: traitCollection, whenContainedInInstancesOf: [NextBannerView.self])
-                .valueTextColor = distanceTextColor
-        }
-        
-        // Progress Bar
-        if let progressColor = customProgressBarProgressColor {
-            // Apply to progress bar progress color
-        }
-        if let bgColor = customProgressBarBackgroundColor {
-            // Apply to progress bar background
-        }
-        
-        // Maneuver View
-        if let primaryColor = customManeuverViewPrimaryColor {
-            ManeuverView.appearance(for: traitCollection).primaryColor = primaryColor
-        }
-        if let secondaryColor = customManeuverViewSecondaryColor {
-            ManeuverView.appearance(for: traitCollection).secondaryColor = secondaryColor
-        }
-        if let primaryHighlightedColor = customManeuverViewPrimaryColorHighlighted {
-            ManeuverView.appearance(for: traitCollection).primaryColorHighlighted = primaryHighlightedColor
-        }
-        if let secondaryHighlightedColor = customManeuverViewSecondaryColorHighlighted {
-            ManeuverView.appearance(for: traitCollection).secondaryColorHighlighted = secondaryHighlightedColor
-        }
-        
-        // Instructions Card
-        if let bgColor = customInstructionsCardBackgroundColor {
-            InstructionsCardContainerView.appearance(for: traitCollection).customBackgroundColor = bgColor
-        }
-        if let separatorColor = customInstructionsCardSeparatorColor {
-            InstructionsCardContainerView.appearance(for: traitCollection).separatorColor = separatorColor
-        }
-        if let highlightedSeparatorColor = customInstructionsCardHighlightedSeparatorColor {
-            InstructionsCardContainerView.appearance(for: traitCollection).highlightedSeparatorColor = highlightedSeparatorColor
-        }
-        
-        // Exit View
-        if let fgColor = customExitViewForegroundColor {
-            ExitView.appearance(for: traitCollection).foregroundColor = fgColor
-        }
-        if let borderColor = customExitViewBorderColor {
-            ExitView.appearance(for: traitCollection).borderColor = borderColor
-        }
-        if let highlightColor = customExitViewHighlightColor {
-            ExitView.appearance(for: traitCollection).highlightColor = highlightColor
-        }
-        
-        // Route Shield
-        if let fgColor = customRouteShieldForegroundColor {
-            GenericRouteShield.appearance(for: traitCollection).foregroundColor = fgColor
-        }
-        if let borderColor = customRouteShieldBorderColor {
-            GenericRouteShield.appearance(for: traitCollection).borderColor = borderColor
-        }
-        if let highlightColor = customRouteShieldHighlightColor {
-            GenericRouteShield.appearance(for: traitCollection).highlightColor = highlightColor
-        }
-        
-        // Distance Labels
-        if let remainingColor = customDistanceRemainingColor {
-            DistanceRemainingLabel.appearance(for: traitCollection).normalTextColor = remainingColor
-        }
-        if let unitColor = customDistanceUnitColor {
-            DistanceLabel.appearance(for: traitCollection).unitTextColor = unitColor
-        }
-        if let valueColor = customDistanceValueColor {
-            DistanceLabel.appearance(for: traitCollection).valueTextColor = valueColor
-        }
-        
-        // Rating Control
-        if let normalColor = customRatingControlNormalColor {
-            RatingControl.appearance(for: traitCollection).normalColor = normalColor
-        }
-        if let selectedColor = customRatingControlSelectedColor {
-            RatingControl.appearance(for: traitCollection).selectedColor = selectedColor
-        }
     }
 }

package/ios/ExpoMapboxNavigation.podspec

@@ -18,6 +18,9 @@ Pod::Spec.new do |s|
   s.dependency 'ExpoModulesCore'
   s.dependency 'MapboxMaps', ENV['ExpoNavigationMapboxMapsVersion']
   s.dependency 'Turf', '~> 3.0'
+  s.dependency 'MapboxNavigation', '~> 2.14.0'
+  s.dependency 'MapboxCoreNavigation', '~> 2.14.0'
+  s.dependency 'MapboxDirections', '~> 2.11.0'
 
   s.source_files = "**/*.{h,m,swift}"
   s.exclude_files = ["Frameworks/*.xcframework/**/*.h"]

package/ios/ExpoMapboxNavigationModule.swift

@@ -209,209 +209,6 @@ public class ExpoMapboxNavigationModule: Module {
               view.controller.setSpeedLimitBorderColor(hexColor: hexColor)
           }
       }
-
-      Prop("stepsBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setStepsBackgroundColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("stepsPrimaryTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setStepsPrimaryTextColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("stepsSecondaryTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setStepsSecondaryTextColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("stepsManeuverViewPrimaryColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setStepsManeuverViewPrimaryColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("laneViewBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setLaneViewBackgroundColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("stepsManeuverViewSecondaryColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.customDayStyle.customStepsManeuverViewSecondaryColor = UIColor(hex: hexColor)
-              view.controller.update()
-          }
-      }
-
-      Prop("stepsSeparatorColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.customDayStyle.customStepsSeparatorColor = UIColor(hex: hexColor)
-              view.controller.update()
-          }
-      }
-
-      Prop("laneViewForegroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.customDayStyle.customLaneViewForegroundColor = UIColor(hex: hexColor)
-              view.controller.update()
-          }
-      }
-
-      // Next Banner View
-      Prop("nextBannerBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setNextBannerBackgroundColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("nextBannerPrimaryTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setNextBannerPrimaryTextColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("nextBannerSecondaryTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setNextBannerSecondaryTextColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("nextBannerDistanceTextColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setNextBannerDistanceTextColor(hexColor: hexColor)
-          }
-      }
-
-      // Progress Bar
-      Prop("progressBarProgressColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setProgressBarProgressColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("progressBarBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setProgressBarBackgroundColor(hexColor: hexColor)
-          }
-      }
-
-      // Maneuver View
-      Prop("maneuverViewPrimaryColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setManeuverViewPrimaryColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("maneuverViewSecondaryColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setManeuverViewSecondaryColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("maneuverViewPrimaryColorHighlighted") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setManeuverViewPrimaryColorHighlighted(hexColor: hexColor)
-          }
-      }
-
-      Prop("maneuverViewSecondaryColorHighlighted") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setManeuverViewSecondaryColorHighlighted(hexColor: hexColor)
-          }
-      }
-
-      // Instructions Card
-      Prop("instructionsCardBackgroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setInstructionsCardBackgroundColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("instructionsCardSeparatorColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setInstructionsCardSeparatorColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("instructionsCardHighlightedSeparatorColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setInstructionsCardHighlightedSeparatorColor(hexColor: hexColor)
-          }
-      }
-
-      // Exit View
-      Prop("exitViewForegroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setExitViewForegroundColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("exitViewBorderColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setExitViewBorderColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("exitViewHighlightColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setExitViewHighlightColor(hexColor: hexColor)
-          }
-      }
-
-      // Route Shield
-      Prop("routeShieldForegroundColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setRouteShieldForegroundColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("routeShieldBorderColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setRouteShieldBorderColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("routeShieldHighlightColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setRouteShieldHighlightColor(hexColor: hexColor)
-          }
-      }
-
-      // Distance Labels
-      Prop("distanceRemainingColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setDistanceRemainingColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("distanceUnitColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setDistanceUnitColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("distanceValueColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setDistanceValueColor(hexColor: hexColor)
-          }
-      }
-
-      // Rating Control
-      Prop("ratingControlNormalColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setRatingControlNormalColor(hexColor: hexColor)
-          }
-      }
-
-      Prop("ratingControlSelectedColor") { (view: ExpoMapboxNavigationView, color: String?) in
-          if let hexColor = color {
-              view.controller.setRatingControlSelectedColor(hexColor: hexColor)
-          }
-      }
     }
   }
 }

package/ios/ExpoMapboxNavigationView.swift

@@ -96,6 +96,11 @@ class ExpoMapboxNavigationViewController: UIViewController {
 
     let customDayStyle = CustomDayStyle()
 
+    private var bottomSheetViewController: UIViewController?
+    private var bottomSheetPanGestureRecognizer: UIPanGestureRecognizer?
+    private var bottomSheetTopConstraint: NSLayoutConstraint?
+    private let bottomSheetHeight: CGFloat = 300 // Adjust this value as needed
+
     init() {
         super.init(nibName: nil, bundle: nil)
         mapboxNavigation = ExpoMapboxNavigationViewController.navigationProvider.mapboxNavigation
@@ -417,6 +422,13 @@ class ExpoMapboxNavigationViewController: UIViewController {
         bottomBanner.distanceFormatter.locale = currentLocale
         bottomBanner.dateFormatter.locale = currentLocale
 
+        // Add pan gesture recognizer to bottom banner
+        let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handleBottomBannerPan(_:)))
+        bottomBanner.view.addGestureRecognizer(panGesture)
+        
+        // Setup bottom sheet
+        setupBottomSheet()
+
         let navigationOptions = NavigationOptions(
             mapboxNavigation: self.mapboxNavigation!,
             voiceController: ExpoMapboxNavigationViewController.navigationProvider.routeVoiceController,
@@ -479,6 +491,76 @@ class ExpoMapboxNavigationViewController: UIViewController {
             navigationMapView?.maneuverArrowColor = arrowColor
         }
     }
+
+    private func setupBottomSheet() {
+        bottomSheetViewController = UIViewController()
+        guard let bottomSheet = bottomSheetViewController else { return }
+        
+        bottomSheet.view.backgroundColor = .white
+        bottomSheet.view.layer.cornerRadius = 16
+        bottomSheet.view.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMinYCorner]
+        bottomSheet.view.clipsToBounds = true
+        
+        // Add shadow
+        bottomSheet.view.layer.shadowColor = UIColor.black.cgColor
+        bottomSheet.view.layer.shadowOffset = CGSize(width: 0, height: -2)
+        bottomSheet.view.layer.shadowRadius = 3
+        bottomSheet.view.layer.shadowOpacity = 0.2
+        
+        addChild(bottomSheet)
+        view.addSubview(bottomSheet.view)
+        bottomSheet.didMove(toParent: self)
+        
+        bottomSheet.view.translatesAutoresizingMaskIntoConstraints = false
+        
+        // Position bottom sheet initially off screen
+        bottomSheetTopConstraint = bottomSheet.view.topAnchor.constraint(equalTo: view.bottomAnchor)
+        
+        NSLayoutConstraint.activate([
+            bottomSheet.view.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+            bottomSheet.view.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+            bottomSheet.view.heightAnchor.constraint(equalToConstant: bottomSheetHeight),
+            bottomSheetTopConstraint!
+        ])
+        
+        // Add some sample content to the bottom sheet
+        let label = UILabel()
+        label.text = "Bottom Sheet Content"
+        label.textAlignment = .center
+        
+        bottomSheet.view.addSubview(label)
+        label.translatesAutoresizingMaskIntoConstraints = false
+        NSLayoutConstraint.activate([
+            label.centerXAnchor.constraint(equalTo: bottomSheet.view.centerXAnchor),
+            label.topAnchor.constraint(equalTo: bottomSheet.view.topAnchor, constant: 20)
+        ])
+    }
+    
+    @objc private func handleBottomBannerPan(_ gesture: UIPanGestureRecognizer) {
+        let translation = gesture.translation(in: view)
+        let velocity = gesture.velocity(in: view)
+        
+        switch gesture.state {
+        case .changed:
+            // Update bottom sheet position based on pan
+            let newConstant = view.frame.height - bottomSheetHeight + translation.y
+            bottomSheetTopConstraint?.constant = min(view.frame.height, max(newConstant, view.frame.height - bottomSheetHeight))
+            
+        case .ended:
+            // Determine whether to show or hide based on velocity and position
+            let shouldShow = velocity.y < 0 || bottomSheetTopConstraint?.constant ?? 0 < view.frame.height - bottomSheetHeight/2
+            
+            UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseOut) {
+                self.bottomSheetTopConstraint?.constant = shouldShow ? 
+                    self.view.frame.height - self.bottomSheetHeight : 
+                    self.view.frame.height
+                self.view.layoutIfNeeded()
+            }
+            
+        default:
+            break
+        }
+    }
 }
 extension ExpoMapboxNavigationViewController: NavigationViewControllerDelegate {
     func navigationViewController(_ navigationViewController: NavigationViewController, didRerouteAlong route: Route) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@complexify/expo-mapbox-navigation",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "Expo module for Mapbox's Navigation SDK",
   "main": "build/index.js",
   "types": "build/index.d.ts",

package/src/ExpoMapboxNavigation.types.ts

@@ -100,7 +100,7 @@ export type ExpoMapboxNavigationViewProps = {
   maneuverViewSecondaryColorHighlighted?: string;
 
   // Instructions View
-  instructionsTextColor?: string;       // Color for all instruction text
+  instructionsTextColor?: string; // Color for all instruction text
   instructionsBackgroundColor?: string; // Background color for instruction panels
 
   // Instructions Card