Open mrousavy opened 3 years ago
@mrousavy I haven't seen this issue before, and I haven't tried the react native port, but generally both the SVG's and the React trees are indeed pretty simple, so I'm not sure what could cause this. I do remember having random performance issues coming from seemingly nowhere in React Native a long time ago. I even ended up creating this issue: https://github.com/oblador/react-native-collapsible/issues/123
I'm far from a React Native expert tho. I see you've created an issue in Felipe's repo as well, so hopefully he'll know more.
You mentioned clipping, which gave me an idea. When you use the mask
prop the entire SVG is clipped so it fits into the background circle. Could you tried running with mask={false}
?
@RobertBroersma thanks for your reply, I'll try with mask={false}
sometime this week.
I can definitely confirm that the BigHeads library is the cause of the performance issues, since removing it made my screens run butter smooth. Also, it slows down the UI thread, which is where the actual vector rendering is happening, so it's not the JS thread's fault where the individual part mapping is happening, it must be the SVGs.
I'll test this further, hopefully @felipecespedes has an idea. If you can think of anything else, please let me know! :)
@RobertBroersma I've tried using mask={false}
(and showBackground={false}
), but it's still slow on a modern iPhone 11, not even speaking of low end android devices.... :/ here's a new demo: https://i.imgur.com/OBzBCNi.mp4
It's most noticeable with the clothing component, see this demo: https://i.imgur.com/yE3K8Nb.mp4
@mrousavy Is there a way you can share an isolated reproduction?
I'm not an app developer and I can't reproduce these issues on the web, so I'm out of ideas unfortunately 🤷
@RobertBroersma I'll create a repro for you and @felipecespedes which is basically my avatar creator/editor, this might even be useful for other people. If you don't have any other ideas, thanks anyways for your help, much appreciated.
hello, i'm also getting a massive delay when I render out the react-native component- did you ever figure this out? I've tried memoizing it too but it's the same result
Hi! While I really like the drawing style of the characters and want to use them to identificate users instead of profile pictures, I cannot do so. Unfortunately the render-time of a single bighead is so high, that I simply cannot use it in production (yet). I also created a screen where the user can customize his BigHead, which renders even slower.
I'm talking about noticeable delay in initial rendering (mounting) (see this demo), and generally really slow renders on re-rendering when a prop changes (see this demo). Those are definitely UI thread lags, so the vectors must be composed using expensive techniques, such as clipping, which could be optimized.
I am trying to debug why this renders so slow, as normally vector rendering should be really fast. Now to my actual question(s):