[Bug]: mapStyle prop not applying custom JSON styles to NavigationView

[gloubackcup]

Description

I'm trying to apply custom map styling using the mapStyle prop on NavigationView, but the styles are not being applied. The map continues to show the default Google Maps style instead of my custom JSON style.

Environment

• Package version: @googlemaps/react-native-navigation-sdk v0.14.1
• React Native version: 0.81.5
• Platform: iOS (also testing on Android)
• iOS Deployment Target: 16.0
• Device/Simulator: iPhone 15 Pro Simulator / Physical device

Expected Behavior

The map should display with a dark/night theme based on the custom JSON style provided via the mapStyle prop.

Current Behavior

The map displays with the standard Google Maps light theme, ignoring the mapStyle prop completely.

Code Example

NavigationMap Component

const MapStyles = {
  NIGHT: JSON.stringify([
    {
      featureType: 'all',
      elementType: 'geometry',
      stylers: [{ color: '#242f3e' }],
    },
    {
      featureType: 'all',
      elementType: 'labels.text.stroke',
      stylers: [{ lightness: -80 }],
    },
    {
      featureType: 'administrative',
      elementType: 'labels.text.fill',
      stylers: [{ color: '#746855' }],
    },
    {
      featureType: 'administrative.locality',
      elementType: 'labels.text.fill',
      stylers: [{ color: '#d59563' }],
    },
    {
      featureType: 'poi',
      elementType: 'labels.text.fill',
      stylers: [{ color: '#d59563' }],
    },
    {
      featureType: 'poi.park',
      elementType: 'geometry',
      stylers: [{ color: '#263c3f' }],
    },
    {
      featureType: 'poi.park',
      elementType: 'labels.text.fill',
      stylers: [{ color: '#6b9a76' }],
    },
    {
      featureType: 'road',
      elementType: 'geometry.fill',
      stylers: [{ color: '#2b3544' }],
    },
    {
      featureType: 'road',
      elementType: 'labels.text.fill',
      stylers: [{ color: '#9ca5b3' }],
    },
    {
      featureType: 'road.arterial',
      elementType: 'geometry.fill',
      stylers: [{ color: '#38414e' }],
    },
    {
      featureType: 'road.arterial',
      elementType: 'geometry.stroke',
      stylers: [{ color: '#212a37' }],
    },
    {
      featureType: 'road.highway',
      elementType: 'geometry.fill',
      stylers: [{ color: '#746855' }],
    },
    {
      featureType: 'road.highway',
      elementType: 'geometry.stroke',
      stylers: [{ color: '#1f2835' }],
    },
    {
      featureType: 'road.highway',
      elementType: 'labels.text.fill',
      stylers: [{ color: '#f3d19c' }],
    },
    {
      featureType: 'road.local',
      elementType: 'geometry.fill',
      stylers: [{ color: '#38414e' }],
    },
    {
      featureType: 'road.local',
      elementType: 'geometry.stroke',
      stylers: [{ color: '#212a37' }],
    },
    {
      featureType: 'transit',
      elementType: 'geometry',
      stylers: [{ color: '#2f3948' }],
    },
    {
      featureType: 'transit.station',
      elementType: 'labels.text.fill',
      stylers: [{ color: '#d59563' }],
    },
    {
      featureType: 'water',
      elementType: 'geometry',
      stylers: [{ color: '#17263c' }],
    },
    {
      featureType: 'water',
      elementType: 'labels.text.fill',
      stylers: [{ color: '#515c6d' }],
    },
    {
      featureType: 'water',
      elementType: 'labels.text.stroke',
      stylers: [{ lightness: -20 }],
    },
  ]),
};


<NavigationView
  onMapReady={onMapReady}
  mapStyle={MapStyles.NIGHT}
  compassEnabled={false}
  myLocationEnabled
  recenterButtonEnabled
  // ... other props
/>

[illuminati1911]

Hey @gloubackcup and thank you for opening the issue.
I was able to reproduce the issue and we will investigate this one. For now it seems like a bug.

[gloubackcup]

Thank you @illuminati1911!

If you need any help or additional information to investigate this, just let me know.

I also think it would be valuable to improve the documentation around mapStyle, similar to how react-native-maps package defines and documents this type:

type MapStyleElement = {
    featureType?: string;
    elementType?: string;
    stylers: object[];
};

[vargasarthur]

+1
I am also having the same issue!