Skip to content

fix: apply opacity to currentColor for fill and stroke on Apple platforms #2923

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

Open
davor-bauk-sh wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix: apply opacity to currentColor for fill and stroke on Apple platforms #2923

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d355e7d
test: add test for currentColor with fill-opacity and stroke-opacity
davor-bauk-sh Apr 7, 2026
938aa89
fix: apply opacity to currentColor for fill and stroke on Apple platf…
davor-bauk-sh Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions apple/Brushes/RNSVGContextBrush.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,10 @@ - (BOOL)applyFillColor:(CGContextRef)context opacity:(CGFloat)opacity
BOOL fillColor;

if (brush.class == RNSVGBrush.class) {
CGContextSetFillColorWithColor(context, [element getCurrentColor]);
CGColorRef currentColor = [element getCurrentColor];
CGColorRef colorWithOpacity = CGColorCreateCopyWithAlpha(currentColor, opacity * CGColorGetAlpha(currentColor));
CGContextSetFillColorWithColor(context, colorWithOpacity);
CGColorRelease(colorWithOpacity);
fillColor = YES;
} else {
fillColor = [brush applyFillColor:context opacity:opacity];
Expand All @@ -70,7 +73,10 @@ - (BOOL)applyStrokeColor:(CGContextRef)context opacity:(CGFloat)opacity
BOOL strokeColor;

if (brush.class == RNSVGBrush.class) {
CGContextSetStrokeColorWithColor(context, [element getCurrentColor]);
CGColorRef currentColor = [element getCurrentColor];
CGColorRef colorWithOpacity = CGColorCreateCopyWithAlpha(currentColor, opacity * CGColorGetAlpha(currentColor));
CGContextSetStrokeColorWithColor(context, colorWithOpacity);
CGColorRelease(colorWithOpacity);
strokeColor = YES;
} else {
strokeColor = [brush applyStrokeColor:context opacity:opacity];
Expand Down
12 changes: 10 additions & 2 deletions apple/RNSVGRenderable.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -555,7 +555,11 @@ - (void)renderLayerTo:(CGContextRef)context rect:(CGRect)rect

if (self.fill) {
if (self.fill.class == RNSVGBrush.class) {
CGContextSetFillColorWithColor(context, [self getCurrentColor]);
CGColorRef currentColor = [self getCurrentColor];
CGColorRef colorWithOpacity =
CGColorCreateCopyWithAlpha(currentColor, self.fillOpacity * CGColorGetAlpha(currentColor));
CGContextSetFillColorWithColor(context, colorWithOpacity);
CGColorRelease(colorWithOpacity);
fillColor = YES;
} else {
fillColor = [self.fill applyFillColor:context opacity:self.fillOpacity];
Expand Down Expand Up @@ -603,7 +607,11 @@ - (void)renderLayerTo:(CGContextRef)context rect:(CGRect)rect
BOOL strokeColor;

if (self.stroke.class == RNSVGBrush.class) {
CGContextSetStrokeColorWithColor(context, [self getCurrentColor]);
CGColorRef currentColor = [self getCurrentColor];
CGColorRef colorWithOpacity =
CGColorCreateCopyWithAlpha(currentColor, self.strokeOpacity * CGColorGetAlpha(currentColor));
CGContextSetStrokeColorWithColor(context, colorWithOpacity);
CGColorRelease(colorWithOpacity);
strokeColor = YES;
} else {
strokeColor = [self.stroke applyStrokeColor:context opacity:self.strokeOpacity];
Expand Down
9 changes: 7 additions & 2 deletions apple/Text/RNSVGTSpan.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,8 +134,10 @@ - (void)renderLayerTo:(CGContextRef)context rect:(CGRect)rect
if (self.inlineSize != nil && self.inlineSize.value != 0) {
if (self.fill) {
if (self.fill.class == RNSVGBrush.class) {
CGColorRef color = [self getCurrentColor];
CGColorRef currentColor = [self getCurrentColor];
CGColorRef color = CGColorCreateCopyWithAlpha(currentColor, self.fillOpacity * CGColorGetAlpha(currentColor));
[self drawWrappedText:context gc:gc rect:rect color:color];
CGColorRelease(color);
} else {
CGColorRef color = [self.fill getColorWithOpacity:self.fillOpacity];
[self drawWrappedText:context gc:gc rect:rect color:color];
Expand All @@ -144,8 +146,11 @@ - (void)renderLayerTo:(CGContextRef)context rect:(CGRect)rect
}
if (self.stroke) {
if (self.stroke.class == RNSVGBrush.class) {
CGColorRef color = [self getCurrentColor];
CGColorRef currentColor = [self getCurrentColor];
CGColorRef color =
CGColorCreateCopyWithAlpha(currentColor, self.strokeOpacity * CGColorGetAlpha(currentColor));
[self drawWrappedText:context gc:gc rect:rect color:color];
CGColorRelease(color);
} else {
CGColorRef color = [self.stroke getColorWithOpacity:self.strokeOpacity];
[self drawWrappedText:context gc:gc rect:rect color:color];
Expand Down
131 changes: 131 additions & 0 deletions apps/common/test/Test2923.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
import * as React from 'react';
import {View} from 'react-native';
import Svg, {Rect, G} from 'react-native-svg';

export default function Test2923() {
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Svg width="200" height="200" viewBox="0 0 200 200">
{/* Columns: fill only | stroke only | fill + stroke */}
<G strokeWidth={4}>
{/* Row 1: no opacity set */}
<Rect
x="5"
y="5"
width="55"
height="40"
color="blue"
fill="currentColor"
/>
<Rect
x="72"
y="5"
width="55"
height="40"
color="red"
fill="none"
stroke="currentColor"
/>
<Rect
x="139"
y="5"
width="55"
height="40"
color="green"
fill="currentColor"
stroke="currentColor"
/>
{/* Row 2: fill-opacity=0.5 */}
<Rect
x="5"
y="53"
width="55"
height="40"
color="blue"
fill="currentColor"
fillOpacity={0.5}
/>
<Rect
x="72"
y="53"
width="55"
height="40"
color="red"
fill="none"
stroke="currentColor"
/>
<Rect
x="139"
y="53"
width="55"
height="40"
color="green"
fill="currentColor"
fillOpacity={0.5}
stroke="currentColor"
/>
{/* Row 3: stroke-opacity=0.5 */}
<Rect
x="5"
y="101"
width="55"
height="40"
color="blue"
fill="currentColor"
/>
<Rect
x="72"
y="101"
width="55"
height="40"
color="red"
fill="none"
stroke="currentColor"
strokeOpacity={0.5}
/>
<Rect
x="139"
y="101"
width="55"
height="40"
color="green"
fill="currentColor"
stroke="currentColor"
strokeOpacity={0.5}
/>
{/* Row 4: fill-opacity=0.5, stroke-opacity=0.5 */}
<Rect
x="5"
y="149"
width="55"
height="40"
color="blue"
fill="currentColor"
fillOpacity={0.5}
/>
<Rect
x="72"
y="149"
width="55"
height="40"
color="red"
fill="none"
stroke="currentColor"
strokeOpacity={0.5}
/>
<Rect
x="139"
y="149"
width="55"
height="40"
color="green"
fill="currentColor"
fillOpacity={0.5}
stroke="currentColor"
strokeOpacity={0.5}
/>
</G>
</Svg>
</View>
);
}
3 changes: 2 additions & 1 deletion apps/common/test/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ import Test2455 from './Test2455';
import Test2471 from './Test2471';
import Test2520 from './Test2520';
import Test2670 from './Test2670';
import Test2923 from './Test2923';

export default function App() {
return <ColorTest />;
return <Test2923 />;
}
12 changes: 6 additions & 6 deletions apps/tests-example/ios/Podfile.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2481,7 +2481,7 @@ PODS:
- React-perflogger (= 0.83.0-rc.0)
- React-utils (= 0.83.0-rc.0)
- SocketRocket
- RNSVG (15.14.0):
- RNSVG (15.15.4):
- boost
- DoubleConversion
- fast_float
Expand All @@ -2507,10 +2507,10 @@ PODS:
- ReactCodegen
- ReactCommon/turbomodule/bridging
- ReactCommon/turbomodule/core
- RNSVG/common (= 15.14.0)
- RNSVG/common (= 15.15.4)
- SocketRocket
- Yoga
- RNSVG/common (15.14.0):
- RNSVG/common (15.15.4):
- boost
- DoubleConversion
- fast_float
Expand Down Expand Up @@ -2793,7 +2793,7 @@ SPEC CHECKSUMS:
FBLazyVector: 7cad68537e4268ea85b6b763532fc9a88206eea3
fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
hermes-engine: 77c9e319eee7e1e241283e53a7377152fb825b26
hermes-engine: 6001f70f3a14afc3d17b97e9679c092e28071fd6
RCT-Folly: 59ec0ac1f2f39672a0c6e6cecdd39383b764646f
RCTDeprecation: 4cf20570eb1415872d0f37c28f34788b52008c60
RCTRequired: 2f89a85405915cde5896bd74ccaab8b191509e03
Expand Down Expand Up @@ -2863,10 +2863,10 @@ SPEC CHECKSUMS:
ReactAppDependencyProvider: d3cb50450a55777560b4d8ea6b53f6b8efb0bba3
ReactCodegen: 561c157e3ee4a8c678a49ee0287b37755354bb13
ReactCommon: 6bb21d31df3c7235e399053862a313fa38308039
RNSVG: ea9cbf6dcdbebdfff5822b0ad9311bbc4510a0b7
RNSVG: 6a91afc99237de70b617c7a84ba84c988ad5573b
SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
Yoga: b5cdaf686877e00b5489198163ec055e52f4c4f9

PODFILE CHECKSUM: 1724a8a65795bc3bed5251741119f3e86a24627c
PODFILE CHECKSUM: 870ad64bffa60495a1eeab5b704bde8080744e72

COCOAPODS: 1.15.2
22 changes: 22 additions & 0 deletions e2e/cases/4.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added e2e/references/android/4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added e2e/references/ios/4.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.