Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Android SVGs filled with black

See original GitHub issue

Hi there,

We just upgraded to RN 0.55.3, React 16.3.1, and RNSVG 6.3.1, and many of our SVGs are filled with black unexpectedly. This affects Android only.

For example, here is our HeartFilled component:

export default function HeartFilled({ height, width }: SvgProps) {
    return (
        <Svg height={height} width={width} viewBox="0 0 22 22">
            <Defs>
                <LinearGradient x1="-7.82094617%" y1="-9.7528458%" x2="128.388643%" y2="149.135801%" id="linearGradient-1">
                    <Stop stopColor="#E9350D" offset="0%"></Stop>
                    <Stop stopColor="#FE7B01" offset="86.0453351%"></Stop>
                    <Stop stopColor="#FF7F00" offset="91.3119513%"></Stop>
                    <Stop stopColor="#FF7F00" offset="100%"></Stop>
                </LinearGradient>
                <LinearGradient x1="-8.90729167%" y1="-16.3514254%" x2="160.036429%" y2="144.955742%" id="linearGradient-2">
                    <Stop stopColor="#E9350D" offset="0%"></Stop>
                    <Stop stopColor="#FF7F00" offset="91.3119513%"></Stop>
                    <Stop stopColor="#FF7F00" offset="100%"></Stop>
                </LinearGradient>
                <Path
                    d="M11.4074577,6.65193908 C11.3134123,6.8083037 11.1729108,6.89441754 11.01428,6.89441754 C10.8545161,6.89441754 10.7151477,6.8083037 10.6358323,6.67913293 C9.46536388,4.64525992 6.99525627,3.83624302 4.90472941,4.85147991 C2.68389871,5.92903603 1.73098104,8.65975133 2.77794409,10.9496997 C3.60395714,12.7558243 8.25297161,17.2235464 10.1780692,19.0285379 C10.3990192,19.2347579 10.6913531,19.3627956 11.01428,19.3627956 C11.3338077,19.3627956 11.6261415,19.2370241 11.8470915,19.0319372 C13.769923,17.2303449 18.4246028,12.7580904 19.251749,10.9496997 C20.298712,8.65975133 19.3469274,5.92903603 17.1238306,4.85147991 C15.0333037,3.83624302 12.5631961,4.64639299 11.4074577,6.65193908 Z"
                    id="path-3"></Path>
            </Defs>
            <G strokeWidth="1" fill="none" fillRule="evenodd">
                <G>
                    <G>
                        <Use fill="url(#linearGradient-1)" fill-rule="evenodd" href="#path-3"></Use>
                        <Path stroke="url(#linearGradient-2)" strokeWidth="2"
                              d="M11.0136254,5.458466 C12.5671321,3.51085788 15.2624723,2.83585096 17.5600028,3.9516167 C20.2756556,5.26791935 21.4326007,8.58466568 20.1611372,11.365648 C19.4144098,12.9982191 16.3994744,16.1369474 12.5273984,19.7648645 C12.1175789,20.1452611 11.5815696,20.3627956 11.01428,20.3627956 C10.4432567,20.3627956 9.90642442,20.1428884 9.49408527,19.758035 C5.61673614,16.1225923 2.61425407,12.9961597 1.86848906,11.365502 C0.597441995,8.58543046 1.75444639,5.26851425 4.4678818,3.95194438 C6.76989487,2.83400199 9.46224826,3.51315175 11.0136254,5.458466 Z"></Path>
                    </G>
                </G>
            </G>
        </Svg>
    );
}

To fix the issue, I just needed to remove the empty <G> elements towards the bottom:


export default function HeartFilled({ height, width }: SvgProps) {
    return (
        <Svg height={height} width={width} viewBox="0 0 22 22">
            <Defs>
                <LinearGradient x1="-7.82094617%" y1="-9.7528458%" x2="128.388643%" y2="149.135801%" id="linearGradient-1">
                    <Stop stopColor="#E9350D" offset="0%"></Stop>
                    <Stop stopColor="#FE7B01" offset="86.0453351%"></Stop>
                    <Stop stopColor="#FF7F00" offset="91.3119513%"></Stop>
                    <Stop stopColor="#FF7F00" offset="100%"></Stop>
                </LinearGradient>
                <LinearGradient x1="-8.90729167%" y1="-16.3514254%" x2="160.036429%" y2="144.955742%" id="linearGradient-2">
                    <Stop stopColor="#E9350D" offset="0%"></Stop>
                    <Stop stopColor="#FF7F00" offset="91.3119513%"></Stop>
                    <Stop stopColor="#FF7F00" offset="100%"></Stop>
                </LinearGradient>
                <Path
                    d="M11.4074577,6.65193908 C11.3134123,6.8083037 11.1729108,6.89441754 11.01428,6.89441754 C10.8545161,6.89441754 10.7151477,6.8083037 10.6358323,6.67913293 C9.46536388,4.64525992 6.99525627,3.83624302 4.90472941,4.85147991 C2.68389871,5.92903603 1.73098104,8.65975133 2.77794409,10.9496997 C3.60395714,12.7558243 8.25297161,17.2235464 10.1780692,19.0285379 C10.3990192,19.2347579 10.6913531,19.3627956 11.01428,19.3627956 C11.3338077,19.3627956 11.6261415,19.2370241 11.8470915,19.0319372 C13.769923,17.2303449 18.4246028,12.7580904 19.251749,10.9496997 C20.298712,8.65975133 19.3469274,5.92903603 17.1238306,4.85147991 C15.0333037,3.83624302 12.5631961,4.64639299 11.4074577,6.65193908 Z"
                    id="path-3"></Path>
            </Defs>
            <G strokeWidth="1" fill="none" fillRule="evenodd">
                <G fill="none" fillRule="evenodd">
                    <Use fill="url(#linearGradient-1)" fill-rule="evenodd" href="#path-3"></Use>
                    <Path stroke="url(#linearGradient-2)" strokeWidth="2"
                          d="M11.0136254,5.458466 C12.5671321,3.51085788 15.2624723,2.83585096 17.5600028,3.9516167 C20.2756556,5.26791935 21.4326007,8.58466568 20.1611372,11.365648 C19.4144098,12.9982191 16.3994744,16.1369474 12.5273984,19.7648645 C12.1175789,20.1452611 11.5815696,20.3627956 11.01428,20.3627956 C10.4432567,20.3627956 9.90642442,20.1428884 9.49408527,19.758035 C5.61673614,16.1225923 2.61425407,12.9961597 1.86848906,11.365502 C0.597441995,8.58543046 1.75444639,5.26851425 4.4678818,3.95194438 C6.76989487,2.83400199 9.46224826,3.51315175 11.0136254,5.458466 Z"></Path>
                </G>
            </G>
        </Svg>
    );
}

Is it expected that empty <G> nodes would fill background with black on Android, but not on IOS? On IOS, the elements are effectively fill="none".

The SVGs did not have a black background before upgrading. Previously, we were using RN 0.51.0, React 16.0.0, and RNSVG 5.5.1.

This is a simpler example, but I have many other SVGs that aren’t as straightforward to fix. For example, it appears I have to specify fill="none" on any Circle nodes, or else they will have a black background on Android. Curious if this is a bug, or expected behavior.

Thanks!

Issue Analytics

State:
Created 5 years ago
Reactions:5
Comments:17

Top GitHub Comments

5reactions

shakedOnocommented, Jun 27, 2018

I found that if I have more than one <G> component, on iOS it’s enough to specify fill on the top most <G>, but Android requires the inner most <G> to specify its fill property.

So the following change fixed it for me:

<G fill='white'>
  <G>

To:

<G>
  <G fill='white>

3reactions

msandcommented, Jul 3, 2018

The ReadableArray was reporting size 0 for non-empty arrays, I re-wrote it using ArrayList instead, can you try the latest version and see if it’s fixed?