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

Android crashes if r="0" for radialGradient #2170

Closed
kocaagasefa opened this issue Nov 3, 2023 · 0 comments · Fixed by #2271
Closed

Android crashes if r="0" for radialGradient #2170

kocaagasefa opened this issue Nov 3, 2023 · 0 comments · Fixed by #2271

Comments

@kocaagasefa
Copy link

kocaagasefa commented Nov 3, 2023 •
edited

Bug

Android is crashing when using <radialGradient r="0"> with message:

IllegalArgumentException
radius must be > 0

Demo

https://snack.expo.dev/@kocaagasefa/radial-gradient-demo

Library version: 13.4.0

Steps To Reproduce

Example svg: (from MDN)

<svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
  <radialGradient r="0" id="myGradient000">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="50%" id="myGradient050">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>
  <radialGradient r="100%" id="myGradient100">
    <stop offset="0" stop-color="white" />
    <stop offset="100%" stop-color="black" />
  </radialGradient>

  <circle cx="50" cy="50" r="0" />
  <circle cx="150" cy="50" r="25" />
  <circle cx="250" cy="50" r="50" />

  <rect x="20" y="120" width="60" height="60" fill="url(#myGradient000)" />
  <rect x="120" y="120" width="60" height="60" fill="url(#myGradient050)" />
  <rect x="220" y="120" width="60" height="60" fill="url(#myGradient100)" />
</svg>

Describe what you expected to happen:

  1. Render example svg given on https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/r#example
@jakex7 jakex7 mentioned this issue May 10, 2024
Merged
jakex7 added a commit that referenced this issue May 15, 2024
@jakex7
fix: radialGradient r={0} (#2271)
38a8dbc 
# Summary

* Fixed crash on Android when `<RadialGradient r={0}>`.
* Fixed render issue on Android and iOS when radius is zero. According
to [MDN
Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/r#radialgradient)
> A value of lower or equal to zero will cause the area to be painted as
a single color using the color and opacity of the last gradient
`<stop>`.

## Test Plan

Test is available in `TestsExample` as `Test2170`

## Compatibility

| OS      | Implemented |
| ------- | :---------: |
| iOS     |    ✅    |
| Android |    ✅    |


Fixes #2170
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: radialGradient r={0} software-mansion/react-native-svg
1 participant
@kocaagasefa