feat: add theme prop to MapView

android/src/main/java/com/luggmaps/LuggGoogleMapView.kt

@@ -16,6 +16,7 @@ import com.google.android.gms.maps.model.AdvancedMarker
 import com.google.android.gms.maps.model.AdvancedMarkerOptions
 import com.google.android.gms.maps.model.AdvancedMarkerOptions.CollisionBehavior
 import com.google.android.gms.maps.model.LatLng
+import com.google.android.gms.maps.model.MapColorScheme
 import com.google.android.gms.maps.model.PolylineOptions
 import com.luggmaps.core.PolylineAnimator
 
@@ -74,6 +75,9 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
   private var minZoom: Float? = null
   private var maxZoom: Float? = null
 
+  // Theme
+  private var theme: String = "system"
+
   // Padding
   private var paddingTop: Int = 0
   private var paddingLeft: Int = 0
@@ -164,6 +168,7 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
     applyUiSettings()
     applyZoomLimits()
     applyPadding()
+    applyTheme()
     applyUserLocation()
     processPendingMarkers()
     processPendingPolylines()
@@ -214,6 +219,15 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
     googleMap?.setPadding(paddingLeft, paddingTop, paddingRight, paddingBottom)
   }
 
+  private fun applyTheme() {
+    val colorScheme = when (theme) {
+      "dark" -> MapColorScheme.DARK
+      "light" -> MapColorScheme.LIGHT
+      else -> MapColorScheme.FOLLOW_SYSTEM
+    }
+    googleMap?.setMapColorScheme(colorScheme)
+  }
+
   @SuppressLint("MissingPermission")
   private fun applyUserLocation() {
     val hasPermission =
@@ -436,6 +450,11 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
     }
   }
 
+  fun setTheme(value: String) {
+    theme = value
+    applyTheme()
+  }
+
   fun setMapPadding(top: Int, left: Int, bottom: Int, right: Int) {
     paddingTop = top
     paddingLeft = left

android/src/main/java/com/luggmaps/LuggGoogleMapViewManager.kt

@@ -118,6 +118,11 @@ class LuggGoogleMapViewManager :
     view.setMaxZoom(value)
   }
 
+  @ReactProp(name = "theme")
+  override fun setTheme(view: LuggGoogleMapView, value: String?) {
+    view.setTheme(value ?: "system")
+  }
+
   @ReactProp(name = "padding")
   override fun setPadding(view: LuggGoogleMapView, value: ReadableMap?) {
     value?.let {

docs/MAPVIEW.md

@@ -32,6 +32,7 @@ import { MapView } from '@lugg/maps';
 | `rotateEnabled` | `boolean` | `true` | Enable rotation gestures |
 | `pitchEnabled` | `boolean` | `true` | Enable pitch/tilt gestures |
 | `padding` | `EdgeInsets` | - | Map content padding |
+| `theme` | `'light' \| 'dark' \| 'system'` | `'system'` | Map color theme |
 | `onCameraMove` | `(event) => void` | - | Called when camera moves |
 | `onCameraIdle` | `(event) => void` | - | Called when camera stops moving |
 

example/bare/android/settings.gradle

@@ -3,4 +3,6 @@ plugins { id("com.facebook.react.settings") }
 extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
 rootProject.name = 'luggmaps.example'
 include ':app'
+include ':react-native-config'
+project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-config/android')
 includeBuild('../../../node_modules/@react-native/gradle-plugin')

example/bare/ios/LuggMapsExample-Bridging-Header.h

@@ -0,0 +1 @@
+#import "RNCConfig.h"

example/bare/ios/LuggMapsExample.xcodeproj/project.pbxproj

@@ -19,7 +19,7 @@
 		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = LuggMapsExample/Images.xcassets; sourceTree = "<group>"; };
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = LuggMapsExample/Info.plist; sourceTree = "<group>"; };
 		13B07FB81A68108700A75B9A /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = PrivacyInfo.xcprivacy; path = LuggMapsExample/PrivacyInfo.xcprivacy; sourceTree = "<group>"; };
-		262E9FEE2F3526DA00BFF3F5 /* LuggMapsExample-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "LuggMapsExample-Bridging-Header.h"; sourceTree = "<group>"; };
+		261D333D2F35F592004EB2A5 /* LuggMapsExample-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "LuggMapsExample-Bridging-Header.h"; sourceTree = "<group>"; };
 		3B4392A12AC88292D35C810B /* Pods-LuggMapsExample.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-LuggMapsExample.debug.xcconfig"; path = "Target Support Files/Pods-LuggMapsExample/Pods-LuggMapsExample.debug.xcconfig"; sourceTree = "<group>"; };
 		5709B34CF0A7D63546082F79 /* Pods-LuggMapsExample.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-LuggMapsExample.release.xcconfig"; path = "Target Support Files/Pods-LuggMapsExample/Pods-LuggMapsExample.release.xcconfig"; sourceTree = "<group>"; };
 		5DCACB8F33CDC322A6C60F78 /* libPods-LuggMapsExample.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-LuggMapsExample.a"; sourceTree = BUILT_PRODUCTS_DIR; };
@@ -43,12 +43,12 @@
 		13B07FAE1A68108700A75B9A /* LuggMapsExample */ = {
 			isa = PBXGroup;
 			children = (
+				261D333D2F35F592004EB2A5 /* LuggMapsExample-Bridging-Header.h */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
 				761780EC2CA45674006654EE /* AppDelegate.swift */,
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */,
 				13B07FB81A68108700A75B9A /* PrivacyInfo.xcprivacy */,
-				262E9FEE2F3526DA00BFF3F5 /* LuggMapsExample-Bridging-Header.h */,
 			);
 			name = LuggMapsExample;
 			sourceTree = "<group>";
@@ -193,14 +193,10 @@
 			inputFileListPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-LuggMapsExample/Pods-LuggMapsExample-frameworks-${CONFIGURATION}-input-files.xcfilelist",
 			);
-			inputPaths = (
-			);
 			name = "[CP] Embed Pods Frameworks";
 			outputFileListPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-LuggMapsExample/Pods-LuggMapsExample-frameworks-${CONFIGURATION}-output-files.xcfilelist",
 			);
-			outputPaths = (
-			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-LuggMapsExample/Pods-LuggMapsExample-frameworks.sh\"\n";
@@ -236,14 +232,10 @@
 			inputFileListPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-LuggMapsExample/Pods-LuggMapsExample-resources-${CONFIGURATION}-input-files.xcfilelist",
 			);
-			inputPaths = (
-			);
 			name = "[CP] Copy Pods Resources";
 			outputFileListPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-LuggMapsExample/Pods-LuggMapsExample-resources-${CONFIGURATION}-output-files.xcfilelist",
 			);
-			outputPaths = (
-			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
 			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-LuggMapsExample/Pods-LuggMapsExample-resources.sh\"\n";
@@ -288,6 +280,7 @@
 				SWIFT_OBJC_BRIDGING_HEADER = "LuggMapsExample/LuggMapsExample-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Debug;
@@ -315,6 +308,7 @@
 				PRODUCT_NAME = LuggMapsExample;
 				SWIFT_OBJC_BRIDGING_HEADER = "LuggMapsExample/LuggMapsExample-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VERSIONING_SYSTEM = "apple-generic";
 			};
 			name = Release;

example/bare/ios/Podfile.lock

@@ -2603,7 +2603,7 @@ PODS:
     - RNWorklets
     - SocketRocket
     - Yoga
-  - RNSVG (15.15.1):
+  - RNSVG (15.15.2):
     - boost
     - DoubleConversion
     - fast_float
@@ -2629,10 +2629,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNSVG/common (= 15.15.1)
+    - RNSVG/common (= 15.15.2)
     - SocketRocket
     - Yoga
-  - RNSVG/common (15.15.1):
+  - RNSVG/common (15.15.2):
     - boost
     - DoubleConversion
     - fast_float
@@ -2660,7 +2660,7 @@ PODS:
     - ReactCommon/turbomodule/core
     - SocketRocket
     - Yoga
-  - RNTrueSheet (3.8.1):
+  - RNTrueSheet (3.9.0-beta.0):
     - boost
     - DoubleConversion
     - fast_float
@@ -3122,8 +3122,8 @@ SPEC CHECKSUMS:
   ReactCodegen: 11c08ff43a62009d48c71de000352e4515918801
   ReactCommon: 424cc34cf5055d69a3dcf02f3436481afb8b0f6f
   RNReanimated: 292cd58688552a22b3fc1cefcfbc49b336dfed68
-  RNSVG: ba3c3bc3cf413f32d1a7012274fe503c6fc1eadd
-  RNTrueSheet: 003efdbbf461d273a13851f442062f5eb6878333
+  RNSVG: a4ea97e14b7a2221d85091a6b3128f807445a7ec
+  RNTrueSheet: b48aff9e136962b1cebc4651e81726426465b0b5
   RNWorklets: 01efdd402d236a13651ea5ea5437ca85a44e7afa
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   Yoga: 6ca93c8c13f56baeec55eb608577619b17a4d64e

example/bare/package.json

@@ -10,7 +10,7 @@
     "build:ios": "react-native build-ios --mode Debug"
   },
   "dependencies": {
-    "@lodev09/react-native-true-sheet": "^3.8.1",
+    "@lodev09/react-native-true-sheet": "3.9.0-beta.0",
     "@lugg/maps": "workspace:*",
     "@lugg/shared-example": "workspace:*",
     "react": "19.2.0",

example/expo/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@gorhom/bottom-sheet": "^5.2.8",
-    "@lodev09/react-native-true-sheet": "^3.8.1",
+    "@lodev09/react-native-true-sheet": "3.9.0-beta.0",
     "@lugg/maps": "workspace:*",
     "@lugg/shared-example": "workspace:*",
     "@vis.gl/react-google-maps": "^1.5.0",

example/shared/src/Home.tsx

@@ -145,9 +145,10 @@ function HomeContent() {
             ref={sheetRef}
             detents={['auto']}
             dimmed={false}
-            backgroundBlur="system-material-light"
             dismissible={false}
             initialDetentIndex={0}
+            anchor="left"
+            maxContentWidth={450}
           >
             {cameraPosition && (
               <Text style={styles.positionText}>

ios/LuggAppleMapView.mm

@@ -162,6 +162,14 @@ - (void)initializeMap {
   _mapView.pitchEnabled = viewProps.pitchEnabled;
   _mapView.showsUserLocation = viewProps.userLocationEnabled;
 
+  if (viewProps.theme == LuggAppleMapViewTheme::Dark) {
+    _mapView.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;
+  } else if (viewProps.theme == LuggAppleMapViewTheme::Light) {
+    _mapView.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
+  } else {
+    _mapView.overrideUserInterfaceStyle = UIUserInterfaceStyleUnspecified;
+  }
+
   _minZoom = viewProps.minZoom;
   _maxZoom = viewProps.maxZoom;
   [self applyZoomRange];
@@ -250,6 +258,16 @@ - (void)updateProps:(Props::Shared const &)props
     _mapView.pitchEnabled = newViewProps.pitchEnabled;
     _mapView.showsUserLocation = newViewProps.userLocationEnabled;
 
+    if (oldViewProps.theme != newViewProps.theme) {
+      if (newViewProps.theme == LuggAppleMapViewTheme::Dark) {
+        _mapView.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;
+      } else if (newViewProps.theme == LuggAppleMapViewTheme::Light) {
+        _mapView.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
+      } else {
+        _mapView.overrideUserInterfaceStyle = UIUserInterfaceStyleUnspecified;
+      }
+    }
+
     // Check if padding changed
     BOOL paddingChanged =
         oldViewProps.padding.top != newViewProps.padding.top ||

ios/LuggGoogleMapView.mm

@@ -162,6 +162,14 @@ - (void)initializeMap {
   _mapView.settings.tiltGestures = viewProps.pitchEnabled;
   _mapView.myLocationEnabled = viewProps.userLocationEnabled;
 
+  if (viewProps.theme == LuggGoogleMapViewTheme::Dark) {
+    _mapView.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;
+  } else if (viewProps.theme == LuggGoogleMapViewTheme::Light) {
+    _mapView.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
+  } else {
+    _mapView.overrideUserInterfaceStyle = UIUserInterfaceStyleUnspecified;
+  }
+
   if (viewProps.minZoom > 0) {
     [_mapView setMinZoom:(float)viewProps.minZoom maxZoom:_mapView.maxZoom];
   }
@@ -382,6 +390,8 @@ - (void)addPolylineViewToMap:(LuggPolylineView *)polylineView {
 
 - (void)updateProps:(Props::Shared const &)props
            oldProps:(Props::Shared const &)oldProps {
+  const auto &oldViewProps =
+      *std::static_pointer_cast<LuggGoogleMapViewProps const>(oldProps);
   const auto &newViewProps =
       *std::static_pointer_cast<LuggGoogleMapViewProps const>(props);
 
@@ -399,6 +409,17 @@ - (void)updateProps:(Props::Shared const &)props
     _mapView.settings.rotateGestures = newViewProps.rotateEnabled;
     _mapView.settings.tiltGestures = newViewProps.pitchEnabled;
     _mapView.myLocationEnabled = newViewProps.userLocationEnabled;
+
+    if (oldViewProps.theme != newViewProps.theme) {
+      if (newViewProps.theme == LuggGoogleMapViewTheme::Dark) {
+        _mapView.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;
+      } else if (newViewProps.theme == LuggGoogleMapViewTheme::Light) {
+        _mapView.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
+      } else {
+        _mapView.overrideUserInterfaceStyle = UIUserInterfaceStyleUnspecified;
+      }
+    }
+
     _mapView.padding = UIEdgeInsetsMake(
         newViewProps.padding.top, newViewProps.padding.left,
         newViewProps.padding.bottom, newViewProps.padding.right);

package.json

@@ -96,6 +96,9 @@
     "turbo": "^2.5.6",
     "typescript": "^5.9.2"
   },
+  "resolutions": {
+    "@lodev09/react-native-true-sheet": "3.9.0-beta.0"
+  },
   "peerDependencies": {
     "@vis.gl/react-google-maps": ">=1.0.0",
     "react": "*",

src/MapView.tsx

@@ -26,6 +26,7 @@ export class MapView
     scrollEnabled: true,
     rotateEnabled: true,
     pitchEnabled: true,
+    theme: 'system',
   };
 
   private nativeRef = React.createRef<any>();
@@ -89,6 +90,7 @@ export class MapView
       pitchEnabled,
       padding,
       userLocationEnabled,
+      theme,
       onCameraMove,
       onCameraIdle,
       onReady,
@@ -116,6 +118,7 @@ export class MapView
         pitchEnabled={pitchEnabled}
         padding={padding}
         userLocationEnabled={userLocationEnabled}
+        theme={theme}
         onCameraMove={onCameraMove}
         onCameraIdle={onCameraIdle}
         onReady={onReady}

src/MapView.types.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { NativeSyntheticEvent, ViewProps } from 'react-native';
-import type { MapProvider, Coordinate, EdgeInsets } from './types';
+import type { MapProvider, Coordinate, EdgeInsets, MapTheme } from './types';
 
 /**
  * Options for moving the camera
@@ -100,6 +100,11 @@ export interface MapViewProps extends ViewProps {
    * @default false
    */
   userLocationEnabled?: boolean;
+  /**
+   * Map color theme
+   * @default 'system'
+   */
+  theme?: MapTheme;
   /**
    * Called when camera moves
    */

src/MapView.web.tsx

@@ -11,6 +11,7 @@ import {
 import type { NativeSyntheticEvent } from 'react-native';
 import { View } from 'react-native';
 import {
+  ColorScheme,
   Map,
   useMap,
   type MapCameraChangedEvent,
@@ -108,6 +109,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
     pitchEnabled = true,
     padding,
     userLocationEnabled,
+    theme = 'system',
     onCameraMove,
     onCameraIdle,
     onReady,
@@ -305,6 +307,13 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
       ? 'cooperative'
       : 'auto';
 
+  const colorScheme =
+    theme === 'dark'
+      ? ColorScheme.DARK
+      : theme === 'light'
+      ? ColorScheme.LIGHT
+      : ColorScheme.FOLLOW_SYSTEM;
+
   const defaultCenter = initialCoordinate
     ? { lat: initialCoordinate.latitude, lng: initialCoordinate.longitude }
     : undefined;
@@ -320,6 +329,7 @@ export const MapView = forwardRef<MapViewRef, MapViewProps>(function MapView(
           minZoom={minZoom}
           maxZoom={maxZoom}
           gestureHandling={gestureHandling}
+          colorScheme={colorScheme}
           disableDefaultUI
           isFractionalZoomEnabled
           tilt={pitchEnabled === false ? 0 : undefined}