Skip to content

#3025 Fixes for polygon custom styles (fillColor, stokeColor, stokeWidth) not being applied on iOS devices when provider is Google maps.#3309

Merged
rborn merged 5 commits intoreact-native-maps:masterfrom
BeckyWu220:master
Mar 4, 2020
Merged

#3025 Fixes for polygon custom styles (fillColor, stokeColor, stokeWidth) not being applied on iOS devices when provider is Google maps.#3309
rborn merged 5 commits intoreact-native-maps:masterfrom
BeckyWu220:master

Conversation

@BeckyWu220
Copy link
Copy Markdown

Taking #3025 (comment) as a reference. Apply fillColor, stokeColor and stokeWidth to polygons after the layout is calculated.

Does any other open PR do the same thing?

A few related issues (#3025 (comment), #2867 (comment) ) were brought up and some comments indicated some temporary fix. However, no PR was found.

What issue is this PR fixing?

This issue was found while testing GeoJSON. In Geojson component, I passed in multiple style related props, fillColor, strokeColor, and strokeWidth. However, in iOS simulator, I could only see the default style (purple with opacity) being applied when using Google maps.

<Geojson 
    geojson={geoJsonData} 
    strokeColor="rgba(255, 0, 0, 0.7)"
    fillColor="rgba(0, 255, 0, 0.4)"
    strokeWidth={3}
/>

As the screenshot below.
Simulator Screen Shot - iPhone X - 2020-02-26 at 14 34 32

Related issues found in repo.
#3025 (comment), #2867 (comment)

How did you test this PR?

Tested on both iOS and Android simulator. Screenshots attached. geoJsonData used in the code snippet below is from Google office documentation. https://developers.google.com/maps/documentation/javascript/datalayer#googlejson

<Geojson 
    geojson={geoJsonData} 
    strokeColor="rgba(255, 0, 0, 0.7)"
    fillColor="rgba(0, 255, 0, 0.4)"
    strokeWidth={3}
/>

Screenshot_1582755900
Simulator Screen Shot - iPhone X - 2020-02-26 at 14 26 08

…okeColor-not-being-applied-on-iOS-issue

Applied fillColor and stokeColor and stokeWidth to polygons once the layout completes calculation.
…oogle-maps

Only update native styles when map provider is google.
@rborn
Copy link
Copy Markdown
Collaborator

rborn commented Mar 4, 2020

@BeckyWu220 thank you so much for this PR ❤
Is this something it can be used in Apple maps too ? So we have a full cross-provider compatibility or they are not supported by apple maps?

@BeckyWu220
Copy link
Copy Markdown
Author

@rborn Hi! This issue was only found on Google maps. Apple maps doesn't have the same issue detected. Thanks!

@rborn
Copy link
Copy Markdown
Collaborator

rborn commented Mar 4, 2020

@BeckyWu220 so it works fine in Apple maps without this PR ?

@BeckyWu220
Copy link
Copy Markdown
Author

@rborn Yes. Apple map works fine without this PR.

@rborn
Copy link
Copy Markdown
Collaborator

rborn commented Mar 4, 2020

@BeckyWu220 great, thank you 😻

@rborn rborn merged commit f708271 into react-native-maps:master Mar 4, 2020
@BeckyWu220
Copy link
Copy Markdown
Author

@rborn You are welcome! Great work in maintaining the great library. Thanks!

@dcosmin2003
Copy link
Copy Markdown

Hello, I updated the library but I still have this bug :(
From time to time, the polygons are in purple instead of the correct colours.

@dcosmin2003
Copy link
Copy Markdown

Something I forgot to mention: I'm using Polygon, not Geojson.

pinpong pushed a commit to pinpong/react-native-maps that referenced this pull request Feb 28, 2025
…okeColor, stokeWidth) not being applied on iOS devices when provider is Google maps. (react-native-maps#3309)

* Applied fillColor and stokeColor and stokeWidth to polygons once the layout completes calculation.

* Refactor with separate function and only update native styles when the map provider is goole.

* Fixed formatting issued found by ESLint.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants