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.
LinearGradient isn't working
See original GitHub issueBug
The LinearGradient sample code is displaying nothing. It should display an ellipse with the gradient.
Environment info
React native info output:
System:
OS: Windows 10 10.0.17763
CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
Memory: 7.95 GB / 15.92 GB
Binaries:
Node: 10.16.3 - C:\Program Files\nodejs\node.EXE
Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
SDKs:
Android SDK:
API Levels: 25, 26, 27, 28
Build Tools: 26.0.2, 27.0.3, 28.0.3
System Images: android-25 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
IDEs:
Android Studio: Version 3.5.0.0 AI-191.8026.42.35.5977832
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5
Library version: 11.0.1
Steps To Reproduce
Run LinearGradient sample code.
Reproducible sample code
import {LinearGradient, Svg, Stop, Defs, Ellipse} from 'react-native-svg';
<Svg height="150" width="300">
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="170" y2="0">
<Stop offset="0" stopColor="rgb(255,255,0)" stopOpacity="0" />
<Stop offset="1" stopColor="red" stopOpacity="1" />
</LinearGradient>
</Defs>
<Ellipse cx="150" cy="75" rx="85" ry="55" fill="url(#grad)" />
</Svg>
Issue Analytics
- State:
- Created 4 years ago
- Reactions:2
- Comments:8
Top Results From Across the Web
linear-gradient not working in Chrome - Stack Overflow
After a good amount of search I am stuck with linear-gradient which works in Firefox but not in Chrome.
Read more >Background Gradient Not Working - HTML & CSS - SitePoint
Hey Friends! I have been trying to add some gradient to the body of my template and after a couple of goes it...
Read more >linear-gradient() - CSS: Cascading Style Sheets | MDN
The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line.
Read more >LinearGradient does not render properly when there ... - GitHub
Configure the gradient to have 3 stops (e.g. [0, 0.3, 1.0]) and as many colors as the stops. Set the blend mode to...
Read more >CSS - linear-gradient background not showing
Solved: We used linear-gradient as background-image for the header. ... I have checked that the code has provided is working on my end....
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Ok, adding
gradientUnits="userSpaceOnUse"solved the issue, for me. I guess the documentation has to be updated. Hope it helps!🎉 This issue has been resolved in version 12.0.3 🎉
The release is available on:
Your semantic-release bot 📦🚀