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.

IOS: Rendering Issue

See original GitHub issue

Bug

Environment info

React native info output:

System:
    OS: macOS Mojave 10.14.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 459.04 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.10.3 - ~/.nvm/versions/node/v10.15.3/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:
      Android NDK: 20.0.5594570
  IDEs:
    Android Studio: 3.1 AI-173.4907809
    Xcode: 10.3/10G8 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.60.5 => 0.60.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-create-library: 3.1.2
    react-native-log-ios: 1.0.1
    react-native-portal-library: 1.0.0
    react-native: 0.61.0

Library version: 9.9.5

Steps To Reproduce

Use this svg on an iOS Simulator device:

<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.9333 44C34.0468 44 43.8667 34.1503 43.8667 22C43.8667 9.84974 34.0468 0 21.9333 0C9.81989 0 0 9.84974 0 22C0 34.1503 9.81989 44 21.9333 44Z" fill="#F5F6F7"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22 8C29.732 8 36 14.268 36 22C36 29.732 29.732 36 22 36C14.268 36 8 29.732 8 22C8 14.268 14.268 8 22 8ZM22 14C17.5817 14 14 17.5817 14 22C14 26.4183 17.5817 30 22 30C26.4183 30 30 26.4183 30 22C30 17.5817 26.4183 14 22 14Z" fill="url(#paint0_radial)"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M24 28C24.8284 28 25.5 28.6716 25.5 29.5V35.5C25.5 36.3284 24.8284 37 24 37H20C19.1716 37 18.5 36.3284 18.5 35.5V29.5C18.5 28.6716 19.1716 28 20 28H24ZM35.5 18.5C36.3284 18.5 37 19.1716 37 20V24C37 24.8284 36.3284 25.5 35.5 25.5H29.5C28.6716 25.5 28 24.8284 28 24V20C28 19.1716 28.6716 18.5 29.5 18.5H35.5ZM14.5 18.5C15.3284 18.5 16 19.1716 16 20V24C16 24.8284 15.3284 25.5 14.5 25.5H8.5C7.67157 25.5 7 24.8284 7 24V20C7 19.1716 7.67157 18.5 8.5 18.5H14.5ZM24 7C24.8284 7 25.5 7.67157 25.5 8.5V14.5C25.5 15.3284 24.8284 16 24 16H20C19.1716 16 18.5 15.3284 18.5 14.5V8.5C18.5 7.67157 19.1716 7 20 7H24Z" fill="url(#paint1_radial)"/>
<defs>
<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(22 22) scale(9.691)">
<stop stop-color="#A5AAB2"/>
<stop offset="1" stop-color="#BEC2C9"/>
</radialGradient>
<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(22 22) scale(14.6165)">
<stop stop-color="#BEC2C9"/>
<stop offset="1" stop-color="#A5AAB2"/>
</radialGradient>
</defs>
</svg>

Describe what you expected to happen:

Correct render:

Wrong render:

Issue Analytics

State:
Created 4 years ago
Comments:7

Top GitHub Comments

1reaction

msandcommented, Sep 27, 2019

Seems there’s some strange issue, this seems to work (change r=“1” to r=“100%”):

<radialGradient id="paint0_radial" cx="0" cy="0" r="100%" gradientUnits="userSpaceOnUse" gradientTransform="translate(22 22) scale(9.691)">
<stop stop-color="#A5AAB2"/>
<stop offset="1" stop-color="#BEC2C9"/>
</radialGradient>

0reactions

msandcommented, Sep 28, 2019

🎉 This issue has been resolved in version 9.9.7 🎉

The release is available on:

Your semantic-release bot 📦🚀