Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[iOS] elements with fill set to currentColor fades to dark after opening share menu #2455

Closed
tboba opened this issue Sep 17, 2024 · 0 comments · Fixed by #2465
Closed

[iOS] elements with fill set to currentColor fades to dark after opening share menu #2455

tboba opened this issue Sep 17, 2024 · 0 comments · Fixed by #2465
Labels
Repro provided

Comments

@tboba
Copy link
Member

tboba commented Sep 17, 2024 •
edited
Loading

Description

Hi!
Recently, I stumbled upon a bug, where SVGs with fill set to currentColor in some of the elements (like ) fades to dark after opening Share menu. In example below, you can see how simple heart svg gets filled with gray color after opening Share menu (with use of Share from react-native). I would also like to point out that this bug is reproducible only for elements with fill set to currentColor - other values work fine.

CleanShot.2024-09-17.at.13.07.56.mp4

Steps to reproduce

  1. Create an SVG with fill set to currentColor
  2. Attach it to example app and create a Touchable that will open share menu
  3. Try to open share menu -> SVG should fill with the gray color after opening the menu.

Snack or a link to a repository

https://snack.expo.dev/@tboba/58488a

SVG version

15.6.0

React Native version

0.73.6

Platforms

iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

Debug app & dev bundle

Device

iOS simulator

Device model

iPhone 15 Pro

Acknowledgements

Yes
@jakex7 jakex7 mentioned this issue Sep 27, 2024
Merged
@jakex7 jakex7 closed this as completed in aa7701d Sep 27, 2024
@jakex7 jakex7 mentioned this issue Sep 27, 2024
Merged
jakex7 added a commit that referenced this issue Sep 30, 2024
@jakex7
feat: properly implement currentColor (#2466)
9d99582 
# Summary

Motivated by issue #2455, I decided to implement the `currentColor`
property in line with the specs
(https://www.w3.org/TR/SVG11/color.html#ColorProperty). This involves
adding the `color` property to all renderable nodes.

## Test Plan

Example app -> `Test2455`

<img width="344" alt="image"
src="https://github.com/user-attachments/assets/ccaf5a79-4097-49f8-8948-0158d9d9274c">

```svg
<Svg color="red" width="60" height="60" viewBox="0 0 24 24" fill="none">
  <Path d="M22.7927 11.1242C21.359 18.5187 12.0003 22.7782 12.0003 22.7782C12.0003 22.7782 2.64153 18.5187 1.20661 11.1242C0.326598 6.58719 2.24925 2.02329 7.13701 2.00007C10.7781 1.98296 12.0003 5.65211 12.0003 5.65211C12.0003 5.65211 13.2226 1.98173 16.8624 2.00007C21.7612 2.02329 23.6727 6.58841 22.7927 11.1242Z" fill="currentColor"/>
  <G color="green" fill="purple">
    <G>
      <Rect x="16" y="16" width="8" height="8" fill="currentColor"/>
      <G color="pink">
        <Rect x="0" y="16" width="8" height="8" color="gold" fill="currentColor"/>
        <Circle cx="12" cy="20" r="4" fill="currentColor"/>
      </G>
    </G>
  </G>
</Svg>
```
## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ✅      |
| MacOS   |    ✅      |
| Android |    ✅      |
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Repro provided
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: currentColor dimming software-mansion/react-native-svg
1 participant
@tboba