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.

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

Web can't support more than 1 shadow. #53

Closed
GreyJohnsonGit opened this issue Jul 10, 2022 · 2 comments
Closed

Web can't support more than 1 shadow. #53

GreyJohnsonGit opened this issue Jul 10, 2022 · 2 comments

Comments

@GreyJohnsonGit
Copy link
Contributor

GreyJohnsonGit commented Jul 10, 2022

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:
image
2 Shadows (notice broken corners):
image
2 Shadows with fix:
image

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!

@SrBrahma
Copy link
Owner

SrBrahma commented Jul 10, 2022

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.

@SrBrahma
Copy link
Owner

Just released it under 6.0.6. Many many thanks!

SrBrahma added a commit that referenced this issue Jul 25, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants