You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Web Only
My web deployment of a React Native app cannot support more than one linear gradient for <Shadow> elements. New <Shadow> element gradients simply overwrite all previous gradients. I've fixed it by generating a uuid for each <Shadow> and appending it to the id string of each gradient (e.g. id={`top.${uuid}`}, fill={`url(#bottomLeft.${uuid})`}).
Thanks. The UUID solution makes absolute sense and it's certainly what I would do.
I like the https://github.com/ericelliott/cuid lib for UUID generation, as they use a timestamp and a counter to avoid id colisions. The .slug() would suit it. Maybe a simple counter would also do it.
You may do a PR if you want to, and I would really appreciate it! Else, tell me so I can implement it asap to fix this.
Web Only
My web deployment of a React Native app cannot support more than one linear gradient for
<Shadow>
elements. New<Shadow>
element gradients simply overwrite all previous gradients. I've fixed it by generating a uuid for each<Shadow>
and appending it to the id string of each gradient (e.g.id={`top.${uuid}`}
,fill={`url(#bottomLeft.${uuid})`}
).1 Shadow:



2 Shadows (notice broken corners):
2 Shadows with fix:
For my sake, let me know if this sounds like a poor solution. Also let me know if you want me to make a PR to add something like this in!
The text was updated successfully, but these errors were encountered: