react-native-maps
Polygon fill color not working properly
Bug
I am using Google Maps on iOS and I have Polygons. Before update (to version 0.18.3. - at the moment I am not able to update to latest version) everything works properly, but from now fill color gets weird results. Sometimes color is ok, sometimes it is not proper, no rules. On android everything works well.
Environment info
React native info output:
Binaries:
Node: 10.16.0 - /usr/local/bin/node
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
Android SDK:
API Levels: 26, 28, 29
Build Tools: 28.0.3, 29.0.1
System Images: android-28 | Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.4 AI-183.6156.11.34.5692245
Xcode: 10.3/10G8 - /usr/bin/xcodebuild
npmPackages:
react: ^16.9.0 => 16.9.0
react-native: 0.59.10 => 0.59.10
npmGlobalPackages:
react-native-cli: 2.0.1
Library version: 0.18.3
Steps To Reproduce
1. react-native run-ios
...
Describe what you expected to happen:
- Polygon with proper color
Reproducible sample code
export const Polygon = (props) => {
return (
<MapView.Polygon
coordinates={ props.selectedAreas }
fillColor={ props.fillColor }
strokeColor={ props.strokeColor }
/>
)
};
I have the same issue when using Circle component after upgrade react-native-maps to 0.25 I downgrade react-native-maps version to 0.24.2 and it works fine.
I'm having the same issue. All of my polygons are rendering as a translucent blue color on iOS, but the fill and stroke colors are being received correctly on Android. I'm unable to revert to older versions of react-native-maps (lower than v0.25.0) while using Expo SDK v35.0.0. This issue persists in v0.26.1.
Here the polygons were rendered on the second render with blue/purple fill. Initial render was always using the provided fillcolor. It only happened on iOS, but probably not the older iOS version.
We "resolved" it, by using the 2.5.0 pods with version 0.26.1. So far, there are no problems. (Android works fine without any adjustments.)
To make the patch persisintent we added a postinstall script to npm to copy the following file to ./node_modules/react-native-maps/react-native-google-maps.podspec:
require 'json'
package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
Pod::Spec.new do |s|
s.name = "react-native-google-maps"
s.version = package['version']
s.summary = "React Native Mapview component for iOS + Android"
s.authors = { "intelligibabble" => "[email protected]" }
s.homepage = "https://github.com/react-native-community/react-native-maps#readme"
s.license = "MIT"
s.platform = :ios, "8.0"
s.source = { :git => "https://github.com/react-native-community/react-native-maps.git" }
s.source_files = "lib/ios/AirGoogleMaps/**/*.{h,m}"
s.compiler_flags = '-DHAVE_GOOGLE_MAPS=1', '-DHAVE_GOOGLE_MAPS_UTILS=1', '-fno-modules'
s.dependency 'React'
s.dependency 'GoogleMaps', '2.5.0'
s.dependency 'Google-Maps-iOS-Utils', '2.1.0'
end
@rmnotes looks like the latest version of GoogleMaps is 3.5.0. Could you test your patch with that one and of it works maybe open a PR ?
Thnx
@rborn I have just tested it with GoogleMaps 3.5.0, but this reintroduced the bug. Before we went backwards and tested with the versions we found in the commits. 3.2.0, 3.1.0 and 3.0.3 did not work, but 2.5.0 did.
According to the changelog, the bug was introduced/documented with 3.0.0. I did not find any indication that it is resolved yet. Nor did I find it in the issue tracker to verify its status. Maybe it is related to that issue.
Now after reading through the changelog we tested 2.7.0 and this works fine so far. So we will keep that for the time beeing.
I am not sure if that should be patched by just reverting the version number back to 2.7.0. There are probably some valid use cases that do not need correctly rendered polygons but depend on some features of version 3.
@rmnotes Thanks a lot for this, let's keep the issue open till we find a permanent fix 😍
Yes it’s a super annoying problem for us since we need GoogleMaps 3+ to have geolocation services working right in our app and we can’t go backward. Hope a fix will come out sooner than later
Yes it’s a super annoying problem for us since we need GoogleMaps 3+ to have geolocation services working right in our app and we can’t go backward. Hope a fix will come out sooner than later
@Tautotes We need geolocation as well, but are doing directly via the Places API at https://maps.googleapis.com/maps/api/place/details/json? with a dedicated Maps API key.
I made a minimal demo at https://github.com/rmnotes/react-native-maps-demo-polygon-circle to demonstrate the bug for Polygon and Circle. Just a map and a simple toggle to show either polygons or circles.
Sometimes after startup the first render is fine, but from the second render, styling properties like fillColor, strokeColor and strokeWidth get ignored.
When running it in the ios simulator, it is possible to trigger a single correct render through "Fast refresh" when manipulating a single property that is currently in use.
The workaround https://github.com/react-native-community/react-native-maps/issues/3025#issuecomment-538345230 appears to work in all versions of GoogleMaps 3.+ as long the wrapper component sets a property with a non null value on any visible element. I have updated the demo code to toggle the wrapper with a single button.
It seams like that we should not wait for an update of the GoogelMaps pod, but that there is a tiny bug in the iOS code here. Any ideas where to start investigating?
Same problem for iOS also with GeoJSON (that uses Polygon actually...)
Here you can find my workaround explained. https://github.com/react-native-community/react-native-maps/issues/2867#issuecomment-573739457
@kerembalcan Thanks, that seems to work! Not sure why the timeout is necessary though...
I wasn't satisfied with the workaround as it still introduces a flash of default blue before the polygon updates, so I did some experimenting and found some leads. Maybe someone with more iOS experience than I have can chime in, but it's looking like something in the realm of an async/threading race condition to me.
First, the temporary fix: insert a short delay before the polygon gets added to the map here: https://github.com/react-native-community/react-native-maps/blob/master/lib/ios/AirGoogleMaps/AIRGoogleMap.m#L135-L136
I changed to:
AIRGoogleMapPolygon *polygon = (AIRGoogleMapPolygon*)subview;
// Including a short delay before adding the polygon to the map fixes an issue where
// the polygon would be default blue colored on initial render.
// https://github.com/react-native-community/react-native-maps/issues/3057
double delayInSeconds = 1.0;
dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delayInSeconds * NSEC_PER_SEC));
dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
polygon.polygon.map = self;
[self.polygons addObject:polygon];
});
I initially tried only a dispatch_async, but found that the below code still showed default blue polygons sometimes (most of the time it worked though):
dispatch_async(dispatch_get_main_queue(), ^{
polygon.polygon.map = self;
[self.polygons addObject:polygon];
});
I'm going to patch-package for now as I don't think this is the actual fix, but I'm hoping some iOS dev out there can identify the underlying issue take it over the finish line.
I'm experiencing the same problem on the project I'm working on with react-native-maps version 0.26.1 , as a temporal fix I applied this solution: https://github.com/react-native-community/react-native-maps/issues/3025#issuecomment-522968087
Although, on the project, we have one specific case where it's not working 100% perfect (sometimes it shows the correct styles, sometimes it doesn't), but as temporal fix, we can cope with it...
Does anybody know if this bug related with Google Maps is already being addressed and an official solution will arrive soon? If I'm not mistaken, this is happening since July 2019 (v0.25.0) :confused:
I found another workaround:
I saved the CGColorRef taken from fillColor.CGColor in a property of the AIRGoogleMapCircle
@property (nonatomic, assign) CGColorRef strokeColorRef;
@property (nonatomic, assign) CGColorRef fillColorRef;
then I created a new color from the rgba values of that color ref
- (UIColor *)getColorFromCGColorRef:(CGColorRef) color{
const CGFloat * components = CGColorGetComponents(color);
const CGFloat alpha = CGColorGetAlpha(color);
UIColor *newFill = [UIColor colorWithRed: components[0] green: components[1] blue: components[2] alpha: alpha];
return newFill;
}
And I called again setFillColor and setStrokeColor before adding the circle to the map
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wobjc-missing-super-calls"
- (void)insertReactSubview:(id<RCTComponent>)subview atIndex:(NSInteger)atIndex {
//[...]
} else if ([subview isKindOfClass:[AIRGoogleMapCircle class]]) {
AIRGoogleMapCircle *circle = (AIRGoogleMapCircle*)subview;
circle.circle.map = self;
[circle setFillColor:[self getColorFromCGColorRef:circle.fillColorRef]];
[circle setStrokeColor:[self getColorFromCGColorRef:circle.strokeColorRef]];
[self.circles addObject:circle];
}
It should work also for polygon, I guess.
Seems that the object is added before the color has been passed to the view. That's why the delay added by @computerjazz works most of the time.
I thought I would add screenshots to illustrate the issue:
Polygons filled with blue color:
Expected polygons:
Apparently it is a known Google Maps issue present since version 3.0.0. From the changelog (https://developers.google.com/maps/documentation/ios-sdk/releases):
Version 3.0.0 - January, 2019 Support for iOS 8.0 has been dropped. The new minimum is iOS 9.0. Known Issues: There is an occasional rendering bug when using the polygon overlay feature.
This actually worked for me on iOS https://github.com/react-native-maps/react-native-maps/issues/2867#issuecomment-527960757