<Polygon /> does not observe strokeWidth (both platforms) and is thinner than it used to be on iOS

[trooperandz]

Summary

The Polygon component is not observing the strokeWidth property any longer. In addition, it is thinner than it used to be on iOS. Regardless of the strokeWidth value, the line remains the same thickness (see screenshots below).

Reproducible sample code

import React from 'react';
import {
  Dimensions,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';
import MapView, {
  Polygon,
  PROVIDER_GOOGLE,
} from 'react-native-maps';

const screenDimensions = Dimensions.get('screen');

function App(): React.JSX.Element {
  return (
    <View style={styles.container}>
      <StatusBar />
      <View style={styles.mapContainer}>
        <MapView
          showsUserLocation={true}
          showsMyLocationButton={false}
          userInterfaceStyle="light"
          provider={PROVIDER_GOOGLE}
          style={styles.map}
          region={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
          }}>
          <Polygon
            coordinates={[
              {latitude: 37.78825, longitude: -122.4324},
              {latitude: 37.78925, longitude: -122.4334},
              {latitude: 37.79025, longitude: -122.4314},
              {latitude: 37.79075, longitude: -122.4304},
              {latitude: 37.78975, longitude: -122.4294},
              {latitude: 37.78875, longitude: -122.4304},
              {latitude: 37.78825, longitude: -122.4324},
            ]}
            strokeColor="#000"
            fillColor="rgba(0, 0, 255, 0.3)"
            strokeWidth={2} // This property has no effect on the line thickness any longer
          />
        </MapView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
  },
  mapContainer: {
    ...StyleSheet.absoluteFillObject,
    height: screenDimensions.height,
    width: screenDimensions.width,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'yellow',
  },
});

export default App;

Screenshots

Steps to reproduce

Add strokeWidth to the Polygon component and adjust the values. Notice that the line thickness never changes, and is thinner than it used to be on iOS.

Expected result

The Polygon should correctly observe the strokeWidth value when it is changed.

Actual result

The Polygon outline is the same thickness regardless of any strokeWidth value.

React Native Maps Version

1.23.8

What platforms are you seeing the problem on?

iOS (Google Maps), Android

React Native Version

0.79.2

What version of Expo are you using?

Not using Expo

Device(s)

iPhone 12 mini, Android Galaxy S21

Additional information

No response

[carlgrob5171989]

can you share your pod fie?

[trooperandz]

@carlgrob5171989 here you go (I also udpated the notes above to the correct react-native-maps version of 1.23.8; I mistakenly had 1.22.8 listed before):

# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip

platform :ios, min_ios_version_supported
prepare_react_native_project!

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'ReactNative792' do
  config = use_native_modules!

  rn_maps_path = '../node_modules/react-native-maps'
  pod 'react-native-maps/Google', :path => rn_maps_path

  use_react_native!(
    :path => config[:reactNativePath],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false,
      # :ccache_enabled => true
    )
  end
end